获取 Zoomdata 数据以使用 echarts index.js 堆叠折线图

Question

我正在使用 echarts javascript 图表并尝试让它与我在 Zoomdata 中的数据一起使用。我将数据按 20 台不同的计算机分组，因此我希望制作一个包含 20 条线的堆叠折线图。我知道如何对此进行硬编码，但我想 link Zoomdata 中的数据到代码中以显示在图表中。现在它只是将所有 20 台计算机绘制在一条线上。

import echarts from 'echarts'; //
import styles from './index.css';

// create chart container
const chartContainer = document.createElement('div');
chartContainer.style.width = '100%';
chartContainer.style.height = '100%';
chartContainer.classList.add(styles.chartContainer);
controller.element.appendChild(chartContainer);

const groupAccessor = controller.dataAccessors['Group By'];
const metricAccessor = controller.dataAccessors.Size;

//Need help
//Part Im having trouble with linking data in zoomdata to this chart
const chart = echarts.init(chartContainer);
const option = {
    xAxis: {
        type: 'category',
        data: []
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'line',
            stack: '总量',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'line',
            stack: '总量',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'直接访问',
            type:'line',
            stack: '总量',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'搜索引擎',
            type:'line',
            stack: '总量',
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};

//Rest of code
controller.update = data => {
  // Called when new data arrives
  option.series[0].data = reshapeData(data);
  chart.setOption(option);
};


function reshapeData(data) {
  return data.map(d => ({
    name: groupAccessor.raw(d),
    value: metricAccessor.raw(d),
    datum: d,
    itemStyle: { //tell the chart you would like to use the colors selected
      color: groupAccessor.color(d),//tell the chart you would like to use the colors selected
    }, //tell the chart you would like to use the colors selected
  }));
}

chart.on('mousemove', param => {
  controller.tooltip.show({
    event: param.event.event,
    data: () => param.data.datum,
  });
});

chart.on('mouseout', param => {
  controller.tooltip.hide();
});

chart.on('click', param => {
  controller.menu.show({
    event: param.event.event,
    data: () => param.data.datum,
  });
});

controller.createAxisLabel({
  picks: 'Group By',
  position: 'bottom',
  orientation: 'horizontal',
});

controller.createAxisLabel({
  picks: 'Size',
  position: 'bottom',
  orientation: 'horizontal',
});

json 看起来像：

[
  { 
    current: {
      count: 1508,
      metrics: null,
      na: false
    },
    group: [
      "Computer1"
    ]
  },
  {..},
  {..}
]

Answer 1

感谢您添加 json 详细信息。如果我理解的不错，你要在每一行显示的值必须是current.count，每个系列的名称由group数组中的第一项给出（我不知道为什么不过它是一个数组）。

如果我想把你的数据映射到 ECharts 上，我会写这样的代码：

/* 
 * incremental update counter. This will be displayed 
 * on the xAxis by being pushed to options.xAxis.data array.
 */
let updateCount = 0,

// initialize series as empty
const options = {
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: []
}

controller.update = data => {
  updateCount++
  if (options.series.length > 0) {
    // Called when new data arrives  
    options.xAxis.data.push('record ' + updateCount)
    options.series = updateData(data)
  } else {
    // Called only once to initialize
    options.xAxis.data.push('record ' + updateCount)
    options.series = initData(data)
  }
  // you can remove the following line if your chart is already reactive.
  chart.setOption(option)
}

// the init function.
const initData = data => {
  // transform each item in the data array into a series entry.
  data.map(item => {
    return {
       name: item.group[0],
       type: 'line',
       stack: 'defaultStack',
       data: [item.current.count]
    }
  })
}

// the update function.
const updateData = newData => {
  // push new data counts to its respective series data.
  options.series.forEach((item, index) => {
    item.data.push(newData[index].current.count)
  }
}

将原始数据解析为 ECharts 选项的方式有点长，但更安全。如果您对此有任何问题，请告诉我，我还没有测试过，所以它只是大脑代码。

获取 Zoomdata 数据以使用 echarts index.js 堆叠折线图

Getting Zoomdata data to work with echarts index.js stacked line chart

javascript

echarts