echarts-for-react

用echarts来画react的图表。

2. import * as echarts from 'echarts/core';
3. import {
4.   TitleComponent,
5.   ToolboxComponent,
6.   TooltipComponent,
7.   GridComponent,
8.   LegendComponent,
9. } from 'echarts/components';
10. import { LineChart } from 'echarts/charts';
11. import { UniversalTransition } from 'echarts/features';
12. import { CanvasRenderer } from 'echarts/renderers';
14. echarts.use([
15.   TitleComponent,
16.   ToolboxComponent,
17.   TooltipComponent,
18.   GridComponent,
19.   LegendComponent,
20.   LineChart,
21.   CanvasRenderer,
22.   UniversalTransition,
23. ]);
25. let chartDom = document.getElementById('main');
26. let myChart = echarts.init(chartDom);
27. let option;
29. option = {
30.   title: {
31.     text: 'Stacked Line',
32.   },
33.   tooltip: {
34.     //提示框
35.     trigger: 'axis',
36.     backgroundColor: '#FFFFFF',
37.     borderColor: '#d0d0d7',
38.     borderWidth: 1,
39.     axisPointer: {
40.       animation: false,
41.       type: 'cross',
42.       lineStyle: {
43.         type: 'dashed',
44.         color: '#9EB7ED',
45.         width: 1,
46.         opacity: 1,
47.       },
48.     },
49.     formatter: (params) => {
50.       let newParams = '';
51.       newParams += `${params[0].data[0]}<br />`;
52.       params.forEach((param) => {
53.         const encode1 = param.value[param.encode.y[0]];
54.         const encode1Fn = fNumber(4, true, true, 'nan')(+encode1);
55.         const temp1 = `${param.marker}${param.seriesName}:${encode1Fn}<br />`;
56.         newParams += temp1;
57.       });
58.       return `<p style="coloe:#6581BE;display:inline;">${newParams}</p>`;
59.     },
60.   },
61.   legend: {
62.     //图标
63.     left: '5%',
64.     itemGap: 25,
65.     textStyle: {
66.       fontSize: 13,
67.       rich: {
68.         hint: { color: '#9A9A9A' },
69.         rise: { color: '#D20A10' },
70.         drop: { color: '#5E9B42' },
71.       },
72.     },
73.     inactiveColor: '#777', //点击消失后的颜色
74.     data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
75.   },
76.   grid: {
77.     left: '3%',
78.     right: '4%',
79.     bottom: '3%',
80.     containLabel: true,
81.   },
82.   toolbox: {
83.     //控制下载和导出数据的按钮
84.     top: '5%',
85.     right: '10%',
86.     feature: {
87.       dataView: {
88.         show: true,
89.         lang: ['', '关闭', '导出excel'],
90.         optionToContent: (opt) => {
91.           const newData = opt?.dataset[0]?.source;
92.           let tableHeader = '';
93.           opt.series.forEach((os) => {
94.             tableHeader = `${tableHeader}<td>${os.name}</td>`;
95.           });
96.           tableHeader += '</tr>';
97.           let table = `<table id="echarts-table-dataview" style="width:100%;text-align:center"><tbody><tr><td>时间</td>${tableHeader}`;
98.           newData.forEach((item) => {
99.             table = `${table}<tr>
100.           <td>${item.tradeData}</td>
101.           <td>${item.today !== '' || null ? item.today : '--'}</td>//多个数据可以多写几个
102.           `;
103.           });
104.           table = `${table}</tbody></table>`;
105.           return table;
106.         },
107.         contentToOption: () => {
108.           const tableSheet = XLSX.utils.table_to_sheet(
109.             document.getElementById('echarts-table-dataview'),
110.             {
111.               raw: true,
112.             },
113.           );
114.           tableSheet['!cols'] = [{ wch: 14 }, { wch: 12 }, { wch: 5 }];
115.           const workbook = XLSX.utils.book_new();
116.           const fileName = Number(flagNet) === 1 ? `标题1` : '标题2';
117.           XLSX.utils.book_append_sheet(workbook, tableSheet, fileName);
118.           XLSX.writeFile(workbook, fileName + '.xlsx');
119.         },
120.       },
121.     },
122.     feature: {
123.       saveAsImage: {},
124.     },
125.   },
126.   xAxis: {
127.     type: 'category',
128.     boundaryGap: false,
129.     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
130.   },
131.   yAxis: {
132.     type: 'value',
133.   },
134.   series: [
135.     {
136.       name: 'Email',
137.       type: 'line',
138.       stack: 'Total',
139.       data: [120, 132, 101, 134, 90, 230, 210],
140.     },
141.     {
142.       name: 'Union Ads',
143.       type: 'line',
144.       stack: 'Total',
145.       data: [220, 182, 191, 234, 290, 330, 310],
146.     },
147.     {
148.       name: 'Video Ads',
149.       type: 'line',
150.       stack: 'Total',
151.       data: [150, 232, 201, 154, 190, 330, 410],
152.     },
153.     {
154.       name: 'Direct',
155.       type: 'line',
156.       stack: 'Total',
157.       data: [320, 332, 301, 334, 390, 330, 320],
158.     },
159.     {
160.       name: 'Search Engine',
161.       type: 'line',
162.       stack: 'Total',
163.       data: [820, 932, 901, 934, 1290, 1330, 1320],
164.     },
165.   ],
166. };
168. option && myChart.setOption(option);

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。