Apache ECharts

Apache ECharts介绍

Apache ECharts是一个基于 JavaScript 的开源可视化图表库。

https://echarts.apache.org/zh/index.html

https://echarts.apache.org/handbook/zh/get-started/

https://echarts.apache.org/examples/zh/index.html

安装

执行npm install echarts进行安装：

安装完成后，package.json文件中自动更新了依赖：

渲染一个最基础的图表

从官网将源码拷贝到自己的项目中做修改：

https://echarts.apache.org/examples/zh/editor.html?c=bar-simple

import * as echarts from 'echarts'
import { useEffect } from 'react'

const Home = () => {
  useEffect(() => {
    // 保证dom可用后才进行图表的渲染
    // 获取要渲染图标的dom节点
    const chartDom = document.getElementById('main')
    // 图标初始化，生成图表实例对象
    const myChart = echarts.init(chartDom)
    // 准备图表参数
    const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }
      ]
    }

    // 使用图表的参数，完成图表渲染
    option && myChart.setOption(option)
  }, [])
  // 图表渲染的节点必须是一个具备宽和高的节点
  return <div><div id="main" style={{ width: '500px', height: '400px' }}></div></div>
}

export default Home

在React中，可以不使用直接获取dom节点的原始方法，而是改用useRef：

import * as echarts from 'echarts'
import { useEffect, useRef } from 'react'

const Home = () => {
  const chartRef = useRef(null)
  useEffect(() => {
    // 保证dom可用后才进行图表的渲染
    // 获取要渲染图标的dom节点
    const chartDom = chartRef.current
    // 图标初始化，生成图表实例对象
    const myChart = echarts.init(chartDom)
    // 准备图表参数
    const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }
      ]
    }

    // 使用图表的参数，完成图表渲染
    option && myChart.setOption(option)
  }, [])
  // 图表渲染的节点必须是一个具备宽和高的节点
  return <div><div ref={chartRef} style={{ width: '500px', height: '400px' }}></div></div>
}

export default Home