Hooks + Ts + Echarts

零散记录，突然发现需要自己绘制Echars了，慌了一P，项目构建时候直接使用TS和Hooks，并且好久没有做过Echarts了，安装完成后发现都已经5.x版本了，翻看api，最后做了一个demo实例，特记录一下。

如果TS 安装echarts时候需要注意 还需要 安装 @types/echarts

@types/echarts

echarts

Echarts 全部引用

import * as echarts from 'echarts'

按需加载

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import {
    BarChart,
    LineChart
} from 'echarts/charts';
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import {
    TitleComponent,
    TooltipComponent,
    GridComponent
} from 'echarts/components';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
    CanvasRenderer
} from 'echarts/renderers';

// 注册必须的组件
echarts.use(
    [TitleComponent, TooltipComponent, GridComponent, BarChart, LineChart, CanvasRenderer]
);

HTML代码如下

<div id="base-chart-dom" ref={main2} style={{ height: "200px" }}></div>

一、 老版本获取DOM然后绘制

    let initChart = () => {
        let element = document.getElementById('base-chart-dom');
        console.log(element);
        let myChart = echarts.init(element as HTMLDivElement);
        let option = {
            xAxis: {
                type: 'category',
                data: ["一月", "二月", "三月"]
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 200, 150],
                type: 'bar'
            }]
        };
        myChart.setOption(option);
    };


    useEffect(() => {
        initChart();
    });

二、 useRef 绘制

// 引入
import React, { useState, useRef, useEffect } from 'react';

// 声明
const main2 = useRef(null);
let chartInstance = null;

// 绘制 加了部分颜色和圆角
let renderChart = () => {
    const myChart = echarts.getInstanceByDom(main2.current as unknown as HTMLDivElement);
    if (myChart) {
        chartInstance = myChart;
    }
    else {
        chartInstance = echarts.init(main2.current as unknown as HTMLDivElement);
    }
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            top: '5%',
            left: '1%',
            right: '1%',
            bottom: '1%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                alignWithLabel: true
            },
        },
        yAxis: {
            type: 'value',
        },
        series:
            [
                {
                    type: 'bar',
                    name: '千粉互动',
                    itemStyle: {
                        emphasis: {
                            barBorderRadius: 30
                        },
                        barBorderRadius: [4, 4, 4, 4],
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: '#70B3FF' },
                                { offset: 1, color: '#708CFF' }
                            ]
                        )
                    },
                    data: [101, 522, 2001, 3342, 3901, 3301, 2210]
                }
            ]
    };
    chartInstance.setOption(option)
};



useEffect(() => {
    renderChart();
});

到此两种绘制已经完成，后续需要提取功能，来做更好的开发。