Echarts xAxis data设置失效 x轴刻度文字无法展示或与柱状图错位 详见DEMO

Question

问题描述

渲染echarts柱状图,写入xAxis.data值后,x轴的刻度文字只展示一个,或柱状图与x轴刻度文字错位.

问题出现的环境背景及自己尝试过哪些方法

    "angular-route": "1.5.8",
    "bootstrap": "^3.3.7",
    "angular": "1.5.8",
    "echarts": "3.3.2",
    "angular-sanitize": "1.6.4",
    "d3": "3.5.17",
    "ng-file-upload-shim": "12.2.13",
    "bootstrap-datetimepicker": "0.0.11",
    "md5": "0.7.2",
    "angular-bootstrap": "1.3.2",
    "angular-animate": "1.6.4",
    "pdfjs-build": "0.9.0",
    "jquery": "3.2.1",
    "jQuery.print": "1.5.1",
    "jquery.cookie": "1.4.1",
    "moment": "2.9.0",
    "bootstrap-daterangepicker": "2.1.25",
    "bootstrap-wysiwyg": "master",
    "angular-ivh-treeview": "^v1.1.0",
    "angular-ui-tree": "^v2.22.6",
    "html2canvas": "^0.4.1",
    "font-awesome": "^5.6.3"

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
详情,请复制代码进入示例,可查看效果

option = {
    color: ['#3398DB'],
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
         type: 'category',
         position: 'bottom',
         boundaryGap: true,
         axisLabel: {
           // showMinLabel: true,
           show: true,
           interval: 'auto',    // {number}
           formatter: '{value}月',
         },
         axisTick: {
           alignWithLabel: true,
         },
         data: [20, 21]
       },
    yAxis : [
        {
            type : 'value'
        }
    ],
    series: [
          {
            "name": "COPD", 
            "data": ["3"], 
            "num": "20", 
            "type": "bar", 
            "stack": "第20周"
          },
          {
            "name": "支气管扩张",
            "data": ["6"],
            "num": "20",
            "type": "bar",
            "stack": "第20周"
          },
          {"name": "间质性肺疾病", "data": ["2"], "num": "20", "type": "bar", "stack": "第20周"}, {
            "name": "肺气肿",
            "data": ["3"],
            "num": "21",
            "type": "bar",
            "stack": "第21周"
          },
          {
            "name": "肺癌",
            "data": ["3"],
            "num": "21", 
            "type": "bar", 
            "stack": "第21周"
          }
        ]
};

你期待的结果是什么？实际看到的错误信息又是什么？

期待,x轴的刻度文字可以正常展示,与柱状图无错位.

Answer 1

数据格式与echarts规定的不符,将相同name值的data数据进行合并,后恢复正常.

Answer 2

你绑定的数据错了，X轴上面的类型应该相同，不同的可以用0代替

series : [
     {
        "name": "COPD", 
        "data": [3,0], 
        "num": "20", 
        "type": "bar", 
        "stack": "第20周"
      },
      {
        "name": "支气管扩张", 
        "data": [6,0], 
        "num": "20", 
        "type": "bar", 
        "stack": "第20周"
      },
      {"name": "间质性肺疾病",
        "data": [2,0], 
        "num": "20",
        "type": "bar", 
        "stack": "第20周"
      },
      {"name": "肺气肿",
        "data": [0,3], 
        "num": "20",
        "type": "bar", 
        "stack": "第20周"
      },
      {"name": "肺癌",
        "data": [0,3], 
        "num": "20",
        "type": "bar", 
        "stack": "第20周"
      },
      
]