echarts-for-react
用echarts来画react的图表。import * as echarts from 'echarts/core';
import {
TitleComponent,
ToolboxComponent,
TooltipComponent,
GridComponent,
LegendComponent,
} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([
TitleComponent,
ToolboxComponent,
TooltipComponent,
GridComponent,
LegendComponent,
LineChart,
CanvasRenderer,
UniversalTransition,
]);
let chartDom = document.getElementById('main');
let myChart = echarts.init(chartDom);
let option;
option = {
title: {
text: 'Stacked Line',
},
tooltip: {
//提示框
trigger: 'axis',
backgroundColor: '#FFFFFF',
borderColor: '#d0d0d7',
borderWidth: 1,
axisPointer: {
animation: false,
type: 'cross',
lineStyle: {
type: 'dashed',
color: '#9EB7ED',
width: 1,
opacity: 1,
},
},
formatter: (params) => {
let newParams = '';
newParams += `${params.data}<br />`;
params.forEach((param) => {
const encode1 = param.value];
const encode1Fn = fNumber(4, true, true, 'nan')(+encode1);
const temp1 = `${param.marker}${param.seriesName}:${encode1Fn}<br />`;
newParams += temp1;
});
return `<p style="coloe:#6581BE;display:inline;">${newParams}</p>`;
},
},
legend: {
//图标
left: '5%',
itemGap: 25,
textStyle: {
fontSize: 13,
rich: {
hint: { color: '#9A9A9A' },
rise: { color: '#D20A10' },
drop: { color: '#5E9B42' },
},
},
inactiveColor: '#777', //点击消失后的颜色
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
toolbox: {
//控制下载和导出数据的按钮
top: '5%',
right: '10%',
feature: {
dataView: {
show: true,
lang: ['', '关闭', '导出excel'],
optionToContent: (opt) => {
const newData = opt?.dataset?.source;
let tableHeader = '';
opt.series.forEach((os) => {
tableHeader = `${tableHeader}<td>${os.name}</td>`;
});
tableHeader += '</tr>';
let table = `<table id="echarts-table-dataview" style="width:100%;text-align:center"><tbody><tr><td>时间</td>${tableHeader}`;
newData.forEach((item) => {
table = `${table}<tr>
<td>${item.tradeData}</td>
<td>${item.today !== '' || null ? item.today : '--'}</td>//多个数据可以多写几个
`;
});
table = `${table}</tbody></table>`;
return table;
},
contentToOption: () => {
const tableSheet = XLSX.utils.table_to_sheet(
document.getElementById('echarts-table-dataview'),
{
raw: true,
},
);
tableSheet['!cols'] = [{ wch: 14 }, { wch: 12 }, { wch: 5 }];
const workbook = XLSX.utils.book_new();
const fileName = Number(flagNet) === 1 ? `标题1` : '标题2';
XLSX.utils.book_append_sheet(workbook, tableSheet, fileName);
XLSX.writeFile(workbook, fileName + '.xlsx');
},
},
},
feature: {
saveAsImage: {},
},
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: ,
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: ,
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: ,
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: ,
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: ,
},
],
};
option && myChart.setOption(option);
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]