ECharts在React中的使用

首先通过npm安装Echarts，也可写进package.json中install

npm install echarts --save-dev

新建一个ReactEcharts组件

import React, { Component } from 'react'

/**
 * 第一个import echarts是必须的
 * 第二个是引入的具体的一个图表类型 （可选）
 * 第三个是表的title(可选)
 * 第四个是表的工具栏组件相关的行为（可选，
   内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具）
 */
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/title'
import 'echarts/lib/component/toolbox'

class ReactEcharts extends Component {
   
    constructor(props) {
        super(props)
    }
    componentDidMount() {
        //初始化图表
        this.initChart();
    }
    componentWillReceiveProps(nextProps) {
        //更新图表
        this.initChart(nextProps);
    }
    /*生成图表，做了判断，如果不去判断dom有没有生成，
      每次更新图表都要生成一个dom节点*/
    initChart(props) {
        let option = props === undefined ? this.props.option : props.option;
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.getInstanceByDom(document.getElementById('main'));
        if( myChart === undefined){
            myChart = echarts.init(document.getElementById('main'));
        }
        // 绘制图表，option设置图表格式及源数据
        myChart.setOption(option);
    }

    render() {
        return (
        //width和height可由属性值传入
            <div id="main" style={{ width: 800, height: 400 }}></div>
        );
    }
};

export {ReactEcharts as default};

新建一个HomeChart.js文件，在需要的地方引入ReactEcharts组件

import React, { Component } from 'react';
import classNames from 'classnames';
import ReactEcharts from 'scripts/components/ReactEcharts';

class HomeChart extends Component {

    constructor(props) {
        super(props)
        this.state = {
        //option可由函数初始化
            option: option1
        };
    }

    componentDidMount() {
        // this.getOptions(option1)
    }
    
    //数据发生变化后更新option，由state管理
    getOptions(options) {
        this.setState({option: options});
    }

    render() {
        let {option} = this.state;
        return (
            <div>
                <button onClick={this.getOptions}>查询</button>
                <div className="pull-left mt-20">
                    <ReactEcharts option={option}></ReactEcharts>
                </div>
            </div>
        )
    }
};

export default HomeChart

ECharts 配置option示例

myChart.setOption({
    color: 'blue',
    title: {
        left: 'center',
        text: '订单利润报表',
        subtext: 'data from tnet'
    },
    toolbox: {
        right: '40px',
        // top: '15px',
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {
                show: true,
                type: ['line', 'bar']
            },
            restore: {show: true},
            saveAsImage: {
                show: true,
                type: 'png'
            },
        }
    },
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : [10, 22, 20, 334, 390, 330, 220, 220, 200, 334,
                39, 33, 220, 220, 200, 334, 390, 330, 220, 220,
                20, 34, 390, 330, 220, 220, 200, 334, 390, 330, 220],
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: {
                interval:0,
                rotate:60
            }
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name: '收入',
            type: 'bar',
            stack: '总量',
            barWidth: '60%',
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            data:[10, 22, 20, 334, 390, 330, 220, 220, 200, 334,
                39, 33, 220, 220, 200, 334, 390, 330, 220, 220,
                20, 34, 390, 330, 220, 220, 200, 334, 390, 330, 220]
        }
    ]
})

配置项

• 标题 title

  • title.text => 主标题文本
  • title.link => 主标题文本超链接
  • title.textStyle => 主标题样式
  • title.subtext => 副标题文本
  • title.sublink => 副标题文本超链接
  • title.left（top、right、bottom） => 标题位置

• 工具栏组件 toolbox

  • toolbox.left （top、right、bottom） => 工具栏组件位置
  • toolbox.feature => 各工具配置项
    • toolbox.feature.saveAsImage => 保存为图片
    • toolbox.feature.restore => 配置项还原
    • toolbox.feature.dataView => 数据视图工具，可以展现当前图表所用的数据，编辑后可动态更新
    • toolbox.feature.dataZoom => 数据区域缩放 ,目前只支持直角坐标系的缩放
    • toolbox.feature.magicType => 动态类型切换

• 绘图网格 grid

  • grid.left（top、right、bottom） => grid 组件位置
  • grid.containLabel => grid 区域是否包含坐标轴的刻度标签
  • grid.show => 是否显示直角坐标系网格

• 提示框组件tooltip（提示框组件可以设置在全局或局部）

  • tooltip.trigger => 触发类型（'item'|'axis'|'none'）
  • tooltip.axisPointer => 坐标轴指示器配置项
  • tooltip.triggerOn => 提示框触发的条件（'mousemove'|'click'）
  • tooltip.enterable => 鼠标是否可进入提示框浮层中，默认为false

• 系列列表 series

  • series[i].type => 系列图表类型
  • series[i].name => 系列名称，用于tooltip的显示
  • series[i].label => 图形上的文本标签
    • series[i].label.position => 标签的位置
    • series[i].label.rotate => 标签旋转
    • series[i].label.fontSize => 标签的字体大小
    • series[i].label.color => 标签的颜色
  • series[i].data => 系列中的数据内容数组
  • series[i].xAxisIndex => 使用的x轴的 index，在单个图表实例中存在多个x轴的时候有用
  • series[i].yAxisIndex => 使用的y轴的 index，在单个图表实例中存在多个y轴的时候有用

• grid 中的 x 轴 x Axis

  • xAxis.type => 坐标轴类型（'value'|'category'|'time'|'log'）
  • xAxis.nameLocation => 坐标轴名称显示位置
  • xAxis.nameRotate => 坐标轴名字旋转，角度值
  • xAxis.scale => 是否是脱离 0 值比例,设置成 true 后坐标刻度不会强制包含零刻度

• grid 中的 y 轴 yAxis(与x轴相同)

• 图例组件 legend（图例组件展现了不同系列的标记，颜色和名字。可以通过点击图例控制哪些系列不显示）

  • legend.data => 图例的数据数组
  • legend.left （top、right、bottom） => 图例组件位置
  • legend.padding => 图例的内边距
  • legend.itemGap => 图例每项之间的间隔