Question

我正在使用echarts javascript图表，并尝试使其与Zoomdata中的数据一起使用。我将数据按20台不同的计算机分组，因此我希望制作包含20条线的堆积线图。我知道如何对此进行硬编码，但我想将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堆叠折线图一起使用

1 个答案: