react used Echarts

react used Echarts

A. The first way (recommended)

1. Install

npm i echarts -S
npm i react-for-echarts -S

2. go echarts official website to download theme

echarts official theme

sure to select the json file, because the default is amd way, and react is component-based, modular support es6 import.
Json file into the js file can be, hereinafter referred to as echartsTheme.js

export default {
json文件
}

3. Use

• Import Demand

import React from 'react'

import ReactEcharts from 'echarts-for-react';
import echartTheme from '@/lib/echartsTheme'
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts'
// 引入饼图
import 'echarts/lib/chart/bar'
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';

• Rendering theme (do not use DidMount)

componentWillMount(){
        echarts.registerTheme('myTheme',echartTheme);
}

• Configuration option
  because the react-for-echarts has helped us to package the option of configuration items, we can simply pass option

	getOption(){
        let option = {
            title: {
                text: '网站访问统计'
            },
            tooltip : {
                trigger: 'axis'
            },
            xAxis: {
                data: [
                    '周一',
                    '周二',
                    '周三',
                    '周四',
                    '周五',
                    '周六',
                    '周日'
                ]
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '订单量',
                    type: 'bar',
                    data: [
                        1000,
                        2000,
                        1500,
                        3000,
                        2000,
                        1200,
                        800
                    ]
                }
            ]
     }
        return option;
}

    render(){
        return (
            <div>
                <Card title="柱形图表之一" >
                    <ReactEcharts option={this.getOption()} theme="myTheme" notMerge={true} lazyUpdate={true} style={{ height: 500 }} />
                </Card>
            </div> 
        );
	}

Specific examples of the network can see Quguan

II. The second way

1. Install

npm i echarts -S

2. Use

• Directly into

import React from 'react'

// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts'
// 引入饼图
import 'echarts/lib/chart/bar'
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';

• Examples of echarts

 componentDidMount() {
        // 基于准备好的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]
            }]
        });
    }

• use

render() {
        return (
            <div id="main" style={{ width: 400, height: 400 }}></div>
        );
}