ECharts in React

ECharts 是什么

echarts是百度前端团队使用js开发的一个可视化开源库。访问其官网可以了解更多。在现在的我看来，它能满足我的绝大多数需求。

ECharts in React

最近在使用create-react-app做React项目时，需要将数据做成图表。也就是可视化。根据ECharts文档，我摸索总结将自定义的EChart组件应用到React项目中的步骤如下:

1. 安装： npm install echarts --save
2. 引入，对于v5版本，在项目中引入的方法为

import * as echarts from 'echarts'

3. 自定义组件
如果是在项目中使用ECharts，建议自定义组件。接下来以我自定义的组件为例，看看React中的ECharts组件都需要什么。

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

type Chart = {                                           //你也可以参考echarts官网中echarts如何在ts中使用的文档来自定义类型
    title?: string,
    xData?: string[],
    seriesData?: number[],
    option:any
    className?:string
}

const MoneyChart:React.FC<Chart> = (props) => {
    const {option} = props                             //option 的值由父组件传入
    const chartWrapper = useRef<HTMLDivElement>(null)   // 在React中，通过useRef来获取组件挂载的HTML元素，也就是ECharts官网文档中所提到的父容器。
    const chart = useRef<any>(null)
    useEffect(()=>{
            const height = document.getElementById('dora')?.clientHeight  // 你也可以根据你的布局来自定义ECharts的宽高。
            if(!chartWrapper.current){return}
            chartWrapper.current.style.height =`${height}px`              //用到了响应式布局的理念，在父元素中寻找id为dora的元素，并设置ECharts父容器的高度为其高度
            chart.current=echarts.init(chartWrapper.current,'vintage')    //初始化ECharts
    },[])
    useEffect(()=>{                             //每次当option变化时，再次setOptions
        chart.current.setOption(option)
    },[option])
    return (
            <div ref={chartWrapper}/>
    )
}
export {MoneyChart}

父组件要做什么操作呢？

import {MoneyChart} from "Components/DisplayCharts";  //引入子组件

const [option, setOption] = useState({                //设置初始值
    grid: {
        left: 0,
        right: 0,
    },
    xAxis: {
        axisTick: {alignWithLabel: false},
        data: ['1', '2', '3']
    },
    yAxis: {
        type: 'value',
        show: false
    },
    series: [
        {
            symbolSize: 10,
            data: ['1', '2', '3'],
            type: 'line',
            smooth:true
        }
    ],
    tooltip: {show: true}
})


const x = () => setOption({                 //将异步获得的数据通过setOption到一个新的option上，然后通过虚拟DOM渲染，diff算法等渲染到页面上
    grid: {
        left: 0,
        right: 0,
    },
    xAxis: {
        axisTick: {alignWithLabel: true},
        data: keys
    },
    yAxis: {
        type: 'value',
        show: false
    },
    series: [
        {
            symbolSize: 10,
            data: values,
            type: 'line',
            smooth:true
        }
    ],
    tooltip: {show: true}
})

useEffect(() => {                      //当数据records和category发生变化时，执行以上函数
    x()
}, [records,category])

return(                                //最后传入option，在子组件中就是props.option
<>
<MoneyChart option={option}/>
</>
)