react 中使用echarts

前言

之前项目中图表一直使用的是 ant design echarts ,但是由于 antV 的图表不兼容 CSS transform: 'scale' 缩放属性;项目是通过 scale缩放实现不同比例适配, scale 属性会导致图表的图例等焦点位置错误;转而使用 echarts;

一.下载 echarts

1.echarts下载
npm  install  echarts  --save
2.在React框架中使用，必须还要下载一个echarts-for-react 库：
npm  install  echarts-for-react  --save

二.代码应用

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

const Echarts = (props) => {
    const chartRef = useRef()
    const options = {
        title: {
            text: "柱状图"
        },
        tooltip: {
             trigger: 'axis'
        },
        // 图例组件
        legend:{
             data:['销量'],
             show:true
        },
        // x轴
        xAxis: {
            type: 'category',
            data: ['冬瓜', '茄子', '丝瓜', '玉米', '红薯', '西红柿', '芹菜']
        },
        // y轴
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [20, 9, 39, 43, 60, 18, 50],
            type:'bar', // 柱状图
            name:'销量'
        }]
    }

    useEffect(() => {
        // 创建一个echarts实例，返回echarts实例。不能在单个容器中创建多个echarts实例
        const chart = echarts.init(chartRef.current)

        // 设置图表实例的配置项和数据
        chart.setOption(options)

        // 组件卸载
        return () => {
            // myChart.dispose() 销毁实例。实例销毁后无法再被使用
            chart.dispose()
        }
    },[])

    return(
        // 把图表封装单独放入一个组件中
        <div style={{width: "100%", height: "100%"}} ref={chartRef}></div>
    )
}
export default Echarts