在react项目中使用ECharts，建议多看几遍官网，从官网的示例中复制代码即可实现简单的图形。
官网地址：https://echarts.apache.org/zh/index.html
1、下载echarts
npm install echarts --save |
2、在需要的页面引入或者可以封装成单独的组件，这里直接展示代码啦
import React, { Component } from 'react'
import * as echarts from 'echarts';
import 'zrender/lib/svg/svg';
export default class Dashboard extends Component {
componentDidMount(){
var mychart = echarts.init(document.getElementById('main'))
var 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)
}
render() {
return (
<div id='main' style={{width:'800px',height:'400px'}}>
)
}
}
好啦，来看看效果吧😊
关键部分就是 代码中的 option ，这个可以从官网中的示例找需要的图形代码复制过来，就可以啦
如果需要单独封装，通过axios向后端请求数据渲染可以参考一下链接。
https://blog.csdn.net/hahahhahahahha123456/article/details/80390151