React项目中使用 ECharts，附大量图表示例

Echarts是目前很多前端项目中用的最多的数据可视化插件，它不仅仅是日常开发项目必会的技能之一，也是很多公司面试的内容，下面我们一起来学习一下在React项目中如何简单的使用Echarts。

第一步：安装插件

//安装Echarts//在项目的根目录，用命令行输入安装命令回车yarn add echarts

第二步：了解Echarts使用方法（分四步）

    1.  创建DOM节点；

    2. 初始化Echarts实例对象；

    3. 创建options配置；

    4. 加载options配置，渲染图表；

第三步：在组件中引入Echarts且使用

    那么，我们就真实的按步骤写一下！

    在组件中引入：​​​​​​​

//引入echarts插件import * as echarts from 'echarts'//使用React的hooks，让页面初始化渲染完成就绑定DOM节点import { useEffect } from 'react'

    1. 创建DOM节点​​​​​​​

useEffect(() => {    const lineChartDom = document.getElementById('lineChart')}, [])

    2. 初始化实例对象​​​​​​​

useEffect(() => {    const lineChartDom = document.getElementById('lineChart')    const lineChartInstance = echarts.init(lineChartDom)}, [])

    3. 设置options配置项​​​​​​​

useEffect(() => {    const lineChartDom = document.getElementById('lineChart')    const lineChartInstance = echarts.init(lineChartDom)    const options = {      tooltip: {        trigger: 'axis'      },      grid: {        left: 50,        right: 50,        bottom: 20,        top: 20      },      xAxis: {        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']      },      yAxis: {        type: 'value'      },      series: [        {          name: '订单',          type: 'line',          data: [98, 189, 324, 529, 918, 1099, 1744, 4288, 9188, 12999, 15550, 26779]        },        {          name: '流水',          type: 'line',          data: [2, 69, 156, 322, 619, 768, 891, 988, 1428, 3259, 4621, 5927]        }      ]    };  }, [])

    4. 加载options，渲染图表​​​​​​​

useEffect(() => {    const lineChartDom = document.getElementById('lineChart')    const lineChartInstance = echarts.init(lineChartDom)    const options = {      tooltip: {        trigger: 'axis'      },      grid: {        left: 50,        right: 50,        bottom: 20,        top: 20      },      xAxis: {        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']      },      yAxis: {        type: 'value'      },      series: [        {          name: '订单',          type: 'line',          data: [98, 189, 324, 529, 918, 1099, 1744, 4288, 9188, 12999, 15550, 26779]        },        {          name: '流水',          type: 'line',          data: [2, 69, 156, 322, 619, 768, 891, 988, 1428, 3259, 4621, 5927]        }      ]    };    lineChartInstance.setOption(options)  }, [])

运行项目，就可以看到效果

总结

通过以上步骤，我们已经学会了如何在React中使用ECharts，并实现数据的动态更新。

除此之外，ECharts还可以用于制作多种类型的图表，如折线图、饼图、雷达图等。

扩展：大量图表示例

isqqw echarts图表集 isqqw.com

echarts图表集 www.isqqw.com