在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