本文将使用的技术栈为:
react 官网:https://zh-hans.reactjs.org/docs/hooks-state.html#gatsby-focus-wrapper
EChars官网:https://echarts.apache.org/zh/tutorial.html#5 分钟上手 ECharts
npx create-react-app my-app
cd my-app
npm start
npm install echarts --save
import React, { useEffect } from "react";
import * as echarts from 'echarts';
const Child1Item = props => {
const initChart = () => {
let element = document.getElementById('chart1');
let myChart = echarts.init(element);
myChart.clear()
let option;
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
option && myChart.setOption(option);
}
useEffect(() => {
initChart()
}, [])
return (
<div id='chart1' style={{ width: '80%', margin: '0 auto', height: '600px' }}></div>
)
}
export default Child1Item;
import React, { useEffect } from "react";
import * as echarts from 'echarts';
const Child2Item = props => {
const initChart = () => {
let element = document.getElementById('chart2');
let myChart = echarts.init(element);
myChart.clear()
let option;
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}]
};
option && myChart.setOption(option);
}
useEffect(() => {
initChart()
}, [])
return (
<div id='chart2' style={{ width: '80%', margin: '50px auto', height: '600px' }}></div>
)
}
export default Child2Item;
import React, { useEffect } from "react";
import * as echarts from 'echarts';
const Child3Item = props => {
const initChart = () => {
let element = document.getElementById('chart3');
let myChart = echarts.init(element);
myChart.clear()
let option;
option = {
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: '搜索引擎' },
{ value: 735, name: '直接访问' },
{ value: 580, name: '邮件营销' },
{ value: 484, name: '联盟广告' },
{ value: 300, name: '视频广告' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
option && myChart.setOption(option);
}
useEffect(() => {
initChart()
}, [])
return (
<div id='chart3' style={{ width: '80%', margin: '50px auto', height: '600px' }}></div>
)
}
export default Child3Item;
这里推荐ECharts官网的配置项手册,真是好用啊!不多说,直接上链接:https://echarts.apache.org/zh/option.html#title
然后这是本文写的例子的github源码:https://github.com/JACK-ZHANG-coming/react-demo-project