ECharts 绘图问题

Question

请教，下面代码中数据第一列为日期，第二列想作为类别，第三列为条形图的值，想显示为附图二的样子（https://echarts.apache.org/ex...），但是下面代码显示为图一右边的样子，将该列数据单独取出去重或不去重做为X轴数据都不能达到需要的效果，tooltip的显示也不对，请大神们帮帮忙，谢谢。

https://echarts.apache.org/ex...

代码：

var data =
[['2022-03-24', '10', 1],
 ['2022-03-24', '8', 1],
 ['2022-03-24', '7', 2],
 ['2022-03-24', '6', 2],
 ['2022-03-24', '5', 1],
 ['2022-03-24', '4', 2],
 ['2022-03-24', '3', 5],
 ['2022-03-24', '2', 10],
 ['2022-03-24', '0', 61],
 ['2022-03-25', '11', 1],
 ['2022-03-25', '9', 1],
 ['2022-03-25', '8', 2],
 ['2022-03-25', '5', 2],
 ['2022-03-25', '4', 1],
 ['2022-03-25', '3', 4],
 ['2022-03-25', '2', 9],
 ['2022-03-25', '0', 55]];

var y = [], m = [], h = [];
for (var i = 0; i < data.length; i++) {
    y.push(data[i][0]);
    m.push(data[i][1]);
    h.push(data[i][2])
    }
console.log(y);

var arr = y;
var hist = {};
arr.map( function (a) { if (a in hist) hist[a] ++; else hist[a] = 1; } );
console.log(hist);

var data1 = data.map((v1, i1) => v1.filter((v2, i2) => [2].indexOf(i2) >= 0));
console.log(data1);
       

option = {
  legend: {},
  tooltip: {},
  dataset: {
    sourceHeader:true,
    dimensions:['A','B','C'],
    source:  data,
  },
  
  xAxis: { type: 'category'},// data: hist },
  yAxis: { type: 'value' },
  
  series:[]
};

for (var i = 0; i < data.length; i++) {
    option.series.push({
        name: data1[1],
        type: 'bar',
        data: data1[i],
    });
}

这样写样式基本对了，但数据显示不对：

Answer 1

不知道是不是你要的效果，是的话把你的数据格式转化一下

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['类别', '数值']
  },
  toolbox: {
    show: true,
    orient: 'vertical',
    left: 'right',
    top: 'center',
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar', 'stack'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  xAxis: [
    {
      type: 'category',
      axisTick: { show: false },
      data: ['2022-03-24', '2022-03-24', '2022-03-24', '2022-03-24', '2022-03-24']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '类别',
      type: 'bar',
      barGap: 0,
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390]
    },
    {
      name: '数值',
      type: 'bar',
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290]
    }
  ]
};

重点在于x轴，和y轴是分开的