echarts-for-react -- 封装的echarts插件

一、使用echarts

参考echarts官网：https://echarts.apache.org/handbook/zh/basics/import/

        1.下载依赖包        

npm install echarts@5.1.2 --save

        2.封装组件

        封装组件要考虑接收数据、元素id唯一、盒子宽高等因素，可以通过组件等props接收。

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

export default const EchartsModel=()=>{
  useEffect(()=>{
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 绘制图表
    myChart.setOption({
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    });
  },[])
  //创建element元素
  render() {
    return (
      <div id='main' style={{ height: 250, width: 300 }}></div>
    );
  }
}

        3.响应式宽高

        参考官方文档：https://echarts.apache.org/handbook/zh/concepts/chart-size#%E5%93%8D%E5%BA%94%E5%AE%B9%E5%99%A8%E5%A4%A7%E5%B0%8F%E7%9A%84%E5%8F%98%E5%8C%96

        在以上代码中添加：

window.addEventListener('resize', function() {
  myChart.resize();
});

 二、使用echarts-for-react创建图表

        1.下载依赖包

npm install echarts-for-react@3.0.1 --save

        2.在页面中引入 

import React from 'react'
import EChartsReact from 'echarts-for-react'

export default function HomePage() {

  // 数据配置
  const options={
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
  }

  // 直接引入
  return (
    <EChartsReact option={options} style={{height:'400px'}}/>
  )

}