echarts官方:Apache EChartsApache ECharts,一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。https://echarts.apache.org/zh/index.html
1、在React项目中引入 echarts-for-react 模块
import ReactEcharts from 'echarts-for-react'
2、主要代码
export default function index() {
let option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
itemStyle: {
borderRadius: 5,
borderColor: '#fff',
borderWidth: 1
},
data: [
{ value: 900, name: '现有客户' },
{ value: 735, name: '当地资讯' },
{ value: 0, name: '网络平台' },
{ value: 484, name: '展会' },
{ value: 0, name: '外出拜访' },
{ value: 200, name: '供应商' },
{ value: 1200, name: '市场挖掘' },
{ value: 0, name: '推广' },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
return (
<>
<ReactEcharts option={option} style={{ height: '350px', width: '500px', backgroundColor: 'white', borderRadius: '5px' }}></ReactEcharts>
</>
)
}