Echarts

一、引入
npm install echarts --save
柱状图：

1. option = {
2.   //X轴参数各种配置
3.   xAxis: {
4.     type: 'category',
5.     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] //X轴数据
6.   },
7.   //Y轴参数各种配置
8.   yAxis: {
9.     type: 'value'
10.   },
11.   series: [
12.     {
13.       data: [120, 200, 150, 80, 70, 110, 130], //y轴数据
14.       type: 'bar'
15.     }
16.   ]
17. };

复制代码

后端数据吸收

1. // 假设 jsonData 是从后端返回的 JSON 数据
2. const jsonData = {
3.   'Datelist': [],
4.   'product': [
5.     {
6.       name: 'bjmg',
7.       data: [320, 302, 301, 334, 390, 330, 320],
8.     },
9.     {
10.       name: 'gsufp',
11.       data: [320, 302, 301, 334, 390, 330, 320],
12.     }
13.     // 其他产品数据...
14.   ],
15.   'sum': [320, 302, 301, 334, 390, 330, 320]
16. };
18. // 将 jsonData 转换为 ECharts 的 series 配置
19. const seriesData = jsonData.product.map(item => {
20.   return {
21.     name: item.name, // 使用 JSON 中的 name 作为 series 名称
22.     type: 'bar',
23.     stack: 'total',
24.     barWidth: 80,
25.     label: {
26.       show: true,
27.       textStyle: {
28.         fontSize: 25
29.       }
30.     },
31.     emphasis: {
32.       focus: 'series'
33.     },
34.     data: item.data // 使用 JSON 中的 data 作为 series 数据
35.   };
36. });
38. // 然后将转换后的 seriesData 添加到 ECharts 配置中
39. const option = {
40.   // ... 其他 ECharts 配置项
41.   series: seriesData
42. };
44. // 使用生成的 option 初始化 ECharts 图表
45. // myChart.setOption(option);

复制代码

完备代码：
[code][/code]