Stacker 条形图在 Echarts 中显示每个系列两次

Question

当我添加 stack 属性时，每个堆叠条都会显示两次。 如果我删除堆栈属性，我会得到 3 个单独的列，每列显示一次数据。

不知道出了什么问题。这是一个错误吗？ 我也尝试过对数据进行编码。

var myChart = echarts.init(document.getElementById('main'));

var activities = [{"activity_date":"2020-07-10","light_activity":0,"medium_activity":0,"heavy_activity":0,"pam_score":0.0,"steps":0},{"activity_date":"2020-10-17","light_activity":112,"medium_activity":63,"heavy_activity":6,"pam_score":23.0,"steps":11406},{"activity_date":"2020-10-18","light_activity":8,"medium_activity":4,"heavy_activity":0,"pam_score":2.0,"steps":781},{"activity_date":"2020-10-19","light_activity":57,"medium_activity":31,"heavy_activity":11,"pam_score":16.0,"steps":8188},{"activity_date":"2020-10-20","light_activity":96,"medium_activity":47,"heavy_activity":8,"pam_score":20.0,"steps":9813},{"activity_date":"2020-10-21","light_activity":117,"medium_activity":73,"heavy_activity":6,"pam_score":25.0,"steps":12406},{"activity_date":"2020-10-22","light_activity":95,"medium_activity":69,"heavy_activity":13,"pam_score":27.0,"steps":13531},{"activity_date":"2020-10-23","light_activity":25,"medium_activity":25,"heavy_activity":3,"pam_score":8.0,"steps":4125},{"activity_date":"2020-10-17","light_activity":112,"medium_activity":63,"heavy_activity":6,"pam_score":23.0,"steps":11406},{"activity_date":"2020-10-18","light_activity":8,"medium_activity":4,"heavy_activity":0,"pam_score":2.0,"steps":781},{"activity_date":"2020-10-19","light_activity":57,"medium_activity":31,"heavy_activity":11,"pam_score":16.0,"steps":8188},{"activity_date":"2020-10-20","light_activity":96,"medium_activity":47,"heavy_activity":8,"pam_score":20.0,"steps":9813},{"activity_date":"2020-10-21","light_activity":117,"medium_activity":73,"heavy_activity":6,"pam_score":25.0,"steps":12406},{"activity_date":"2020-10-22","light_activity":95,"medium_activity":69,"heavy_activity":13,"pam_score":27.0,"steps":13531},{"activity_date":"2020-10-23","light_activity":33,"medium_activity":28,"heavy_activity":3,"pam_score":10.0,"steps":4781}];

option = {
    legend: {},
    tooltip: {},
    toolbox: { show: true,
        feature: {
            restore: {show: true},
        }},
    xAxis: {
        type: 'category',
    },
    yAxis: {
        type: 'value'
    },
    dataset: {
        source: activities,
        dimensions: ['activity_date', 'light_activity', 'medium_activity', 'heavy_activity', 'pam_score', 'steps']
    },
    series: [
    {
        name: "Light",
        type: 'bar',
        stack: '1',
    },
    {
        name: "Medium",
        type: 'bar',
          stack: '1',
    },
    {
        name: "Heavy",
        type: 'bar',
        stack: '1',
    }
    ]
};

myChart.setOption(option);

http://jsfiddle.net/k15qeLm6/1/

Answer 1

这不是错误。您在数组activities 中有重复数据。查看固定版本：

var myChart = echarts.init(document.getElementById('main'));

var activities = [{
  "activity_date": "2020-07-10",
  "light_activity": 0,
  "medium_activity": 0,
  "heavy_activity": 0,
  "pam_score": 0.0,
  "steps": 0
}, {
  "activity_date": "2020-10-17",
  "light_activity": 112,
  "medium_activity": 63,
  "heavy_activity": 6,
  "pam_score": 23.0,
  "steps": 11406
}, {
  "activity_date": "2020-10-18",
  "light_activity": 8,
  "medium_activity": 4,
  "heavy_activity": 0,
  "pam_score": 2.0,
  "steps": 781
}, {
  "activity_date": "2020-10-19",
  "light_activity": 57,
  "medium_activity": 31,
  "heavy_activity": 11,
  "pam_score": 16.0,
  "steps": 8188
}, {
  "activity_date": "2020-10-20",
  "light_activity": 96,
  "medium_activity": 47,
  "heavy_activity": 8,
  "pam_score": 20.0,
  "steps": 9813
}, {
  "activity_date": "2020-10-21",
  "light_activity": 117,
  "medium_activity": 73,
  "heavy_activity": 6,
  "pam_score": 25.0,
  "steps": 12406
}, {
  "activity_date": "2020-10-22",
  "light_activity": 95,
  "medium_activity": 69,
  "heavy_activity": 13,
  "pam_score": 27.0,
  "steps": 13531
}, {
  "activity_date": "2020-10-23",
  "light_activity": 25,
  "medium_activity": 25,
  "heavy_activity": 3,
  "pam_score": 8.0,
  "steps": 4125
}];

option = {
  legend: {},
  tooltip: {},
  toolbox: {
    show: true,
    feature: {
      restore: {
        show: true
      },
    }
  },
  xAxis: {
    type: 'category',
  },
  yAxis: {
    type: 'value'
  },
  dataset: {
    source: activities,
  },
  series: [{
      name: "Light",
      type: 'bar',
      stack: '1',
    },
    {
      name: "Medium",
      type: 'bar',
      stack: '1',
    },
    {
      name: "Heavy",
      type: 'bar',
      stack: '1',
    }
  ]
};

myChart.setOption(option);

<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>