ECharts for React

一、介绍

ECharts 是一款由百度开发的基于 JavaScript 的数据可视化库，它的特点在于具有良好的可定制性和数据可视化效果，同时支持多种数据格式，能够快速搭建一个漂亮的数据可视化界面。而 ECharts for React 就是将 ECharts 库与 React 框架进行整合的组件库，使得在 React 应用中使用 ECharts 更加便捷。

二、安装和使用

安装 ECharts for React 可以使用 npm 安装命令：

{`npm install echarts-for-react`}

使用 ECharts for React，需要先导入 echarts 和 echarts-for-react：

{`import ReactECharts from 'echarts-for-react';
import echarts from 'echarts';`}

然后即可在 React 组件中使用 ReactEcharts 组件来渲染图表了：

{`function Chart() {
  const option = {
    // ECharts 配置项
  };
  
  return (
    
   
  );
}
`}

三、组件 API

1. ReactECharts 组件属性

ReactECharts 组件支持的属性包括：

• option (required): ECharts 的配置项，必填项。
• notMerge: 是否不与之前设置的 option 进行合并，默认为 false。
• lazyUpdate: 是否在 setOption 后不立即更新图表，而是等待调用更新方法时再更新，默认为 false。
• showLoading: 是否显示加载动画，默认为 false。
• loadingOption: 加载动画的配置项。
• loadingProgress: 加载动画的进度。
• onChartReady: 图表渲染完成时的回调函数。
• renderer: 图表的渲染器，支持 canvas 和 svg 两种方式，默认为 canvas。
• dispose: 是否在组件 unmount 时销毁图表实例，默认为 true。
• style: 组件的样式。
• className: 组件的类名。
• opts: ECharts 实例的配置项。
• echarts: echarts 的引用，通常使用 import echarts from 'echarts' 导入。

2. 组件实例的方法

通过使用 refs 来获取组件实例，从而可调用组件实例的方法来对图表进行操作。ReactECharts 组件实例支持的方法包括：

• getEchartsInstance(): 获取 ECharts 实例，用于调用 ECharts 原生方法。
• getDom(): 获取 ECharts 实例所在的 DOM 元素。
• getOption(): 获取图表配置项。
• setOption(option: object, notMerge?: boolean, lazyUpdate?: boolean): 设置图表配置项。
• clear(): 清空图表内容。
• showLoading(type?: string, opts?: object): 显示加载动画，type 为加载动画类型，默认为 default。
• hideLoading(): 隐藏加载动画。
• resize(): 重置图表大小。
• dispatchAction(option: object): 触发某个行为，例如切换折线图的显示与隐藏操作。

四、使用示例

1. 柱状图

{`import ReactECharts from 'echarts-for-react';
import echarts from 'echarts';

function BarChart() {
  const option = {
    title: {
      text: '柱状图',
    },
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20],
    }],
  };

  return (
    
   
  );
}`}

2. 折线图

{`import ReactECharts from 'echarts-for-react';
import echarts from 'echarts';

function LineChart() {
  const option = {
    title: {
      text: '折线图',
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    },
    yAxis: {
      type: 'value',
    },
    series: [{
      name: '邮件营销',
      type: 'line',
      stack: '总量',
      data: [120, 132, 101, 134, 90, 230, 210],
    }, {
      name: '联盟广告',
      type: 'line',
      stack: '总量',
      data: [220, 182, 191, 234, 290, 330, 310],
    }, {
      name: '视频广告',
      type: 'line',
      stack: '总量',
      data: [150, 232, 201, 154, 190, 330, 410],
    }, {
      name: '直接访问',
      type: 'line',
      stack: '总量',
      data: [320, 332, 301, 334, 390, 330, 320],
    }, {
      name: '搜索引擎',
      type: 'line',
      stack: '总量',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
    }],
  };

  return (
    
   
  );
}`}

3. 饼图

{`import ReactECharts from 'echarts-for-react';
import echarts from 'echarts';

function PieChart() {
  const option = {
    title: {
      text: '饼图',
    },
    tooltip: {},
    series: [{
      name: '访问来源',
      type: 'pie',
      radius: '50%',
      data: [
        {value: 335, name: '直接访问'},
        {value: 310, name: '邮件营销'},
        {value: 234, name: '联盟广告'},
        {value: 135, name: '视频广告'},
        {value: 1548, name: '搜索引擎'},
      ],
    }],
  };

  return (
    
   
  );
}`}

4. 地图

{`import ReactECharts from 'echarts-for-react';
import echarts from 'echarts/dist/echarts'; // 引入中国地图的配置文件
import 'echarts/map/js/china';

function MapChart() {
  const option = {
    visualMap: {
      min: 0,
      max: 1000,
      left: 'left',
      top: 'bottom',
      calculable: true,
      inRange: {
        color: ['#e0ffff', '#006edd'],
      },
    },
    series: [
      {
        type: 'map',
        mapType: 'china',
        roam: false, // 禁止拖拽和缩放地图
        label: {
          normal: {
            show: true,
          },
          emphasis: {
            show: true,
          },
        },
        data: [
          { name: '北京', value: 110 },
          { name: '天津', value: 100 },
          { name: '上海', value: 130 },
          { name: '重庆', value: 120 },
          { name: '河北', value: 50 },
          { name: '河南', value: 20 },
          { name: '云南', value: 170 },
          { name: '辽宁', value: 70 },
          { name: '黑龙江', value: 80 },
          { name: '湖南', value: 180 },
          { name: '安徽', value: 90 },
          { name: '山东', value: 140 },
          { name: '新疆', value: 10 },
          { name: '江苏', value: 110 },
          { name: '浙江', value: 200 },
          { name: '江西', value: 70 },
          { name: '湖北', value: 230 },
          { name: '广西', value: 80 },
          { name: '甘肃', value: 20 },
          { name: '山西', value: 40 },
          { name: '内蒙古', value: 70 },
          { name: '陕西', value: 80 },
          { name: '吉林', value: 50 },
          { name: '福建', value: 100 },
          { name: '贵州', value: 60 },
          { name: '广东', value: 300 },
          { name: '青海', value: 10 },
          { name: '西藏', value: 1 },
          { name: '四川', value: 200 },
          { name: '宁夏', value: 20 },
          { name: '海南', value: 10 },
          { name: '台湾', value: 3 },
          { name: '香港', value: 7 },
          { name: '澳门', value: 7 },
        ],
      },
    ],
  };

  return (
    
   
  );
}`}