关于图的数据处理

function sspPolymerizationEcharts() {
const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);
// 从 allData 获取数据
const data = allData.value;
// 提取数据列
const datelist = data.map(item => item.date);
const reqCount = data.map(item => item.advReq);
const respCount = data.map(item => item.advResp);
const respRate = data.map(item => item.respRate);
const impCount = data.map(item => item.imp);
const impRate = data.map(item => item.impRate);
const clkCount = data.map(item => item.clk);
const clkRate = data.map(item => item.clkRate);
const advBidfloorCount = data.map(item => item.advBidfloor);
const ecpmCount = data.map(item => item.cpm);
// 生成系列数据
const seriesData = [
{ data: reqCount, name: '请求' },
{ data: respCount, name: '填充' },
{ data: respRate, name: '填充率%' },
{ data: impCount, name: '展示' },
{ data: impRate, name: '展现率%' },
{ data: clkCount, name: '点击' },
{ data: clkRate, name: '点击率%' },
{ data: advBidfloorCount, name: '收入(元)' },
{ data: ecpmCount, name: 'CPM(元)' }
].map(item => ({
...item,
type: 'line',
smooth: true
}));

// 配置项
const option = {
legend: {
icon: 'circle',
itemWidth: 10,
itemHeight: 10,
y: 'bottom',
data: seriesData.map(item => item.name)
},
xAxis: {
type: 'category',
boundaryGap: false,
data: datelist
},
yAxis: {
type: 'value'
},
tooltip: {
trigger: 'axis'
},
series: seriesData
};

// 设置图表选项
myChart.setOption(option);
}

点击查看代码

function sspPolymerizationEcharts() {
  const chartDom = document.getElementById('main');
  const myChart = echarts.init(chartDom);
  // 从 allData 获取数据
  const data = allData.value;
  // 提取数据列
  const datelist = data.map(item => item.date);
  const reqCount = data.map(item => item.advReq);
  const respCount = data.map(item => item.advResp);
  const respRate = data.map(item => item.respRate);
  const impCount = data.map(item => item.imp);
  const impRate = data.map(item => item.impRate);
  const clkCount = data.map(item => item.clk);
  const clkRate = data.map(item => item.clkRate);
  const advBidfloorCount = data.map(item => item.advBidfloor);
  const ecpmCount = data.map(item => item.cpm);
  // 生成系列数据
  const seriesData = [
    { data: reqCount, name: '请求' },
    { data: respCount, name: '填充' },
    { data: respRate, name: '填充率%' },
    { data: impCount, name: '展示' },
    { data: impRate, name: '展现率%' },
    { data: clkCount, name: '点击' },
    { data: clkRate, name: '点击率%' },
    { data: advBidfloorCount, name: '收入(元)' },
    { data: ecpmCount, name: 'CPM(元)' }
  ].map(item => ({
    ...item,
    type: 'line',
    smooth: true
  }));

  // 配置项
  const option = {
    legend: {
      icon: 'circle',
      itemWidth: 10,
      itemHeight: 10,
      y: 'bottom',
      data: seriesData.map(item => item.name)
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: datelist
    },
    yAxis: {
      type: 'value'
    },
    tooltip: {
      trigger: 'axis'
    },
    series: seriesData
  };

  // 设置图表选项
  myChart.setOption(option);
}