1、安装依赖
npm i -S echarts
2.引入
import * as echarts from "echarts"
3、直接复制下方代码 第一个代码是初始化 下面是需要请求的数据
const [options, setOptions] = useState( { title: { text: "员工性别统计", textStyle: { fontSize: 18 }, left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left' }, series: [ { name: '员工性别统计', type: 'pie', radius: '50%', data: [ { value: 1, name: '男', itemStyle: { color: "#ff7070" } }, { value: 1, name: '女', itemStyle: { color: "#9fe080" } }, ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] } )
useEffect(() => { axios({ url: '接口地址', params: { 参数 }, }).then(res => { 打印数据 console.log(...); 声明变量存数据 setTab(res.data); chart.setOption({ title: { text: "员工性别统计", textStyle: { fontSize: 18 }, left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left' }, series: [ { name: '员工性别统计', type: 'pie', radius: '50%', data: [ { value: res.data.nan, name: '男', itemStyle: { color: "#ff7070" } }, { value: res.data.nv, name: '女', itemStyle: { color: "#9fe080" } }, ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }) // 创建一个echarts实例，返回echarts实例。不能在单个容器中创建多个echarts实例 const chart = echarts.init(chartRef.current) // 设置图表实例的配置项和数据 chart.setOption(options) // 设置图表实例的配置项和数据 chart.setOption(options) // 组件卸载 return () => { // myChart.dispose() 销毁实例。实例销毁后无法再被使用 chart.dispose() } }, [])
