React 使用echarts

最新推荐文章于 2024-07-25 18:06:29 发布

weixin_48417637

最新推荐文章于 2024-07-25 18:06:29 发布

阅读量479

点赞数 9

文章标签： react.js echarts 前端

本文链接：https://blog.csdn.net/weixin_48417637/article/details/135655186

版权

项目要增加图表插件，第一个想到的就是echarts，查阅了一些资料，需要下载2个依赖，echarts和echarts-for-react（不是react-for-echarts，踩坑了，一些文章上面安装写的是react-for-echarts，下面引用又是echarts-for-react，而且安装了react-for-echarts就不能再安装echarts-for-react，搞的重新删除依赖再安装）

首先安装依赖

npm i echarts -S

npm i echarts-for-react -S

然后页面引用

import EChartsReact from 'echarts-for-react'

创建图表

const Pie: React.FC = () => {
  const options = {
    tooltip: {
      trigger: 'item',
    },
    legend: {
      top: '5%',
      left: 'center',
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data：[
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
          ]
      },
    ],
  };

  return <EChartsReact option={options} style={{ height: '400px' }} />;
};
export default Pie;

图标配置项参考echarts官网 Documentation - Apache ECharts