Echarts

一、引入

npm install echarts --save

柱状图：

option = {
  //X轴参数各种配置
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] //X轴数据
  },
  //Y轴参数各种配置
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130], //y轴数据
      type: 'bar'
    }
  ]
};

后端数据接收

// 假设 jsonData 是从后端返回的 JSON 数据
const jsonData = {
  'Datelist': [],
  'product': [
    {
      name: 'bjmg',
      data: [320, 302, 301, 334, 390, 330, 320],
    },
    {
      name: 'gsufp',
      data: [320, 302, 301, 334, 390, 330, 320],
    }
    // 其他产品数据...
  ],
  'sum': [320, 302, 301, 334, 390, 330, 320]
};

// 将 jsonData 转换为 ECharts 的 series 配置
const seriesData = jsonData.product.map(item => {
  return {
    name: item.name, // 使用 JSON 中的 name 作为 series 名称
    type: 'bar',
    stack: 'total',
    barWidth: 80,
    label: {
      show: true,
      textStyle: {
        fontSize: 25
      }
    },
    emphasis: {
      focus: 'series'
    },
    data: item.data // 使用 JSON 中的 data 作为 series 数据
  };
});

// 然后将转换后的 seriesData 添加到 ECharts 配置中
const option = {
  // ... 其他 ECharts 配置项
  series: seriesData
};

// 使用生成的 option 初始化 ECharts 图表
// myChart.setOption(option);

完整代码：