React中使用ECharts——柱狀圖

柱形圖實例1

import React, { Component } from 'react'
import { Card } from 'antd'
// import echarts from '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'
import ReactEcharts from 'echarts-for-react'
//引入樣式
import '../common.less'

export default class BarA extends Component {
    getOption = ()=>{
        let option = {
            title: {
                text: '用戶訂單'
            },
            tooltip:{
                trigger: 'axis'
            },
            xAxis: {
                data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
            },
            yAxis: {
                type: 'value'
            },
            series : [
                {
                    name:'訂單量',
                    type:'bar',
                    barWidth: '50%',
                    data:[1000, 1500, 2000, 3000, 2500, 1800, 1200]
                }
            ]
        }
        return option;
    }
    render() {
        return (
            <Card.Grid className="bar_a">
                <ReactEcharts option={this.getOption()}/>
            </Card.Grid>
        )
    }
}

柱形圖實例2

import React, { Component } from 'react'
import { Card } from 'antd'
// import echarts from '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'
import ReactEcharts from 'echarts-for-react'
//引入樣式
import '../common.less'

export default class BarB extends Component {
    getOption = ()=>{
        let option = {
            title: {
                text: '用戶訂單'
            },
            tooltip:{
                trigger: 'axis'
            },
            legend: {
                data:['A','B','C']
            },
            xAxis: {
                data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
            },
            yAxis: {
                type: 'value'
            },
            series : [
                {
                    name:'A',
                    type:'bar',
                    barWidth: '15%',
                    data:[800, 1300, 2000, 2300, 1800, 1100, 500]
                },
                {
                    name:'B',
                    type:'bar',
                    barWidth: '15%',
                    data:[1000, 1800, 2200, 3100, 2200, 1500, 1000]
                },
                {
                    name:'C',
                    type:'bar',
                    barWidth: '15%',
                    data:[300, 800, 1200, 1800, 1300, 600, 200]
                }
            ]
        }
        return option;
    }
    render() {
        return (
            <Card.Grid className="bar_b">
                <ReactEcharts option={this.getOption()}/>
            </Card.Grid>
        )
    }
}

1） legend: 圖例組件。圖例組件展現了不同系列的標記(symbol)，顏色和名字。可以通過點擊圖例控制哪些系列不顯示。
    --- data[i] (object)：圖例的數據數組。數組項通常為一個字符串，每一項代表一個系列的 name（如果是 餅圖，也可以是餅圖單個數據的 name）。圖例組件會自動根據對應系列的圖形標記（symbol）來繪制自己的顏色和標記，特殊字符串 ''（空字符串）或者 '\n'（換行字符串）用於圖例的換行。
    如果 data 沒有被指定，會自動從當前系列中獲取。多數系列會取自 series.name 或者 series.encode 的 seriesName 所指定的維度。如 餅圖 and 漏斗圖 等會取自 series.data 中的 name。
    如果要設置單獨一項的樣式，也可以把該項寫成配置項對象。此時必須使用 name 屬性對應表示系列的 nam
示例：

data: [{
    name: '系列1',
    // 強制設置圖形為圓。
    icon: 'circle',
    // 設置文本為紅色
    textStyle: {
        color: 'red'
    }
}]