【重點突破】—— Echarts圖表的介紹和使用

時間 2019-11-17

標籤重點突破 echarts 圖表介紹使用简体版

原文原文鏈接

前言：百度Echarts是一個基於Canvas的純Javascript圖表庫，提供直觀、生動、可交互、可個性化定製的數據可視化圖表。官網地址：http://echarts.baidu.com/index.htmljavascript

1、Echarts基礎html

實例Demo：http://echarts.baidu.com/examples/
文檔教程：http://www.echartsjs.com/option.html#titlejava
主題下載/定製主題：http://www.echartsjs.com/download-theme.html react
React組件化theme變量應用主題npm

echarts->echartTheme.js數組

export default {
    "color": [
        "#f9c700",
        "#ff5400",
        "#6699cc",
        "#9cb3c5",
        "#e0e6ec",
        "#666666",
        "#787464",
        "#cc7e63",
        "#724e58",
        "#4b565b"
    ],
    "backgroundColor": "#ffffff",
    "textStyle": {},
    "title": {
        "textStyle": {
            "color": "#cccccc"
        },
        "subtextStyle": {
            "color": "#cccccc"
        }
    },
    "line": {
        "itemStyle": {
            "normal": {
                "borderWidth": 1
            }
        },
        "lineStyle": {
            "normal": {
                "width": 2
            }
        },
        "symbolSize": "10",
        "symbol": "emptyCircle",
        "smooth": false
    },
    "pie": {
        "itemStyle": {
            "normal": {
                "borderWidth": 0,
                "borderColor": "#ccc"
            },
            "emphasis": {
                "borderWidth": 0,
                "borderColor": "#ccc"
            }
        }
    },
    "categoryAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#f1f3f5"
            }
        },
        "axisTick": {
            "show": true,
            "lineStyle": {
                "color": "#f1f3f5"
            }
        },
        "axisLabel": {
            "show": true,
            "textStyle": {
                "color": "#999999",
                "fontSize": "14"
            }
        },
        "splitLine": {
            "show": true,
            "lineStyle": {
                "color": [
                    "#f1f3f5"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.3)",
                    "rgba(200,200,200,0.3)"
                ]
            }
        }
    },
    "valueAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#f1f3f5"
            }
        },
        "axisTick": {
            "show": true,
            "lineStyle": {
                "color": "#f1f3f5"
            }
        },
        "axisLabel": {
            "show": true,
            "textStyle": {
                "color": "#999999",
                "fontSize": "14"
            }
        },
        "splitLine": {
            "show": true,
            "lineStyle": {
                "color": [
                    "#f1f3f5"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.3)",
                    "rgba(200,200,200,0.3)"
                ]
            }
        }
    },
    "toolbox": {
        "iconStyle": {
            "normal": {
                "borderColor": "#999999"
            },
            "emphasis": {
                "borderColor": "#666666"
            }
        }
    },
    "legend": {
        "textStyle": {
            "color": "#333333"
        }
    },
    "tooltip": {
        "axisPointer": {
            "lineStyle": {
                "color": "#cccccc",
                "width": 1
            },
            "crossStyle": {
                "color": "#cccccc",
                "width": 1
            }
        }
    },
    "timeline": {
        "lineStyle": {
            "color": "#293c55",
            "width": 1
        },
        "itemStyle": {
            "normal": {
                "color": "#293c55",
                "borderWidth": 1
            },
            "emphasis": {
                "color": "#a9334c"
            }
        },
        "controlStyle": {
            "normal": {
                "color": "#293c55",
                "borderColor": "#293c55",
                "borderWidth": 0.5
            },
            "emphasis": {
                "color": "#293c55",
                "borderColor": "#293c55",
                "borderWidth": 0.5
            }
        },
        "checkpointStyle": {
            "color": "#e43c59",
            "borderColor": "rgba(194,53,49,0.5)"
        },
        "label": {
            "normal": {
                "textStyle": {
                    "color": "#293c55"
                }
            },
            "emphasis": {
                "textStyle": {
                    "color": "#293c55"
                }
            }
        }
    },
    "markPoint": {
        "label": {
            "normal": {
                "textStyle": {
                    "color": "#ffffff"
                }
            },
            "emphasis": {
                "textStyle": {
                    "color": "#ffffff"
                }
            }
        }
    }
}

echarts->themeLight.jsbash

var colorPalette = [
    '#C1232B',
    '#27727B',
    '#FCCE10',
    '#E87C25',
    '#B5C334',
    '#FE8463',
    '#9BCA63',
    '#FAD860',
    '#F3A43B',
    '#60C0DD',
    '#D7504B',
    '#C6E579',
    '#F4E001',
    '#F0805A',
    '#26C0C0'
];
export default {

    color: colorPalette,

    title: {
        textStyle: {
            fontWeight: 'normal',
            color: '#27727B'
        }
    },

    visualMap: {
        color: ['#C1232B', '#FCCE10']
    },

    toolbox: {
        iconStyle: {
            normal: {
                borderColor: colorPalette[0]
            }
        }
    },

    tooltip: {
        backgroundColor: 'rgba(50,50,50,0.5)',
        axisPointer: {
            type: 'line',
            lineStyle: {
                color: '#27727B',
                type: 'dashed'
            },
            crossStyle: {
                color: '#27727B'
            },
            shadowStyle: {
                color: 'rgba(200,200,200,0.3)'
            }
        }
    },

    dataZoom: {
        dataBackgroundColor: 'rgba(181,195,52,0.3)',
        fillerColor: 'rgba(181,195,52,0.2)',
        handleColor: '#27727B'
    },

    categoryAxis: {
        axisLine: {
            lineStyle: {
                color: '#27727B'
            }
        },
        splitLine: {
            show: false
        }
    },

    valueAxis: {
        axisLine: {
            show: false
        },
        splitArea: {
            show: false
        },
        splitLine: {
            lineStyle: {
                color: ['#ccc'],
                type: 'dashed'
            }
        }
    },

    timeline: {
        lineStyle: {
            color: '#27727B'
        },
        controlStyle: {
            normal: {
                color: '#27727B',
                borderColor: '#27727B'
            }
        },
        symbol: 'emptyCircle',
        symbolSize: 3
    },

    line: {
        itemStyle: {
            normal: {
                borderWidth: 2,
                borderColor: '#fff',
                lineStyle: {
                    width: 3
                }
            },
            emphasis: {
                borderWidth: 0
            }
        },
        symbol: 'circle',
        symbolSize: 3.5
    },

    candlestick: {
        itemStyle: {
            normal: {
                color: '#C1232B',
                color0: '#B5C334',
                lineStyle: {
                    width: 1,
                    color: '#C1232B',
                    color0: '#B5C334'
                }
            }
        }
    },

    graph: {
        color: colorPalette
    },

    map: {
        label: {
            normal: {
                textStyle: {
                    color: '#C1232B'
                }
            },
            emphasis: {
                textStyle: {
                    color: 'rgb(100,0,0)'
                }
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#ddd',
                borderColor: '#eee'
            },
            emphasis: {
                areaColor: '#fe994e'
            }
        }
    },

    gauge: {
        axisLine: {
            lineStyle: {
                color: [
                    [
                        0.2, '#B5C334'
                    ],
                    [
                        0.8, '#27727B'
                    ],
                    [1, '#C1232B']
                ]
            }
        },
        axisTick: {
            splitNumber: 2,
            length: 5,
            lineStyle: {
                color: '#fff'
            }
        },
        axisLabel: {
            textStyle: {
                color: '#fff'
            }
        },
        splitLine: {
            length: '5%',
            lineStyle: {
                color: '#fff'
            }
        },
        title: {
            offsetCenter: [0, -20]
        }
    }
}

引用主題

//導入主題
import echartTheme from './../echartTheme'
import themeLight from './../themeLight'

componentWillMount()中註冊主題

componentWillMount(){
        echarts.registerTheme('Default', echartTheme);
        echarts.registerTheme('Light', themeLight);
}

ReactEcharts組件中使用主題echarts

<ReactEcharts theme="Default"/>
<ReactEcharts theme="Light"/>

React單頁面應用中安裝echarts、echarts-for-react（經常使用）組件化

npm install echarts echarts-for-react --save
//或
yarn add echarts echarts-for-react --save

引用echartsthis

方法一：加載所有echarts包（少用）

//加載所有echarts
import echarts from 'echarts'

方法二：按需加載（經常使用）

//按需加載
import echarts from 'echarts/lib/echarts'
//必需基礎組件
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/markPoint'
//導入矩形圖
import 'echarts/lib/chart/bar'

引用並初始化ReactEcharts：組件化開發，避免經過new對象的形式實現

import ReactEcharts from 'echarts-for-react'

//render echarts options
<ReactEcharts option={this.getOption()} theme="Default"/>

2、柱形圖功能實現

echarts->bar->index.js：對應路由/admin/charts/bar
基本柱形圖表

初始化ReactEcharts

<Card title="基本柱形圖表">
      <ReactEcharts option={this.getOption()} theme="Default" style={{height: 500}}/>
</Card>

getOption()渲染數據：series爲核心總體數據源，type爲'bar'

getOption = () => {
        let option = {
            title: {
                text: '用戶騎行訂單'
            },
            tooltip: {//提示條
                trigger: 'axis'
            },
            xAxis: {  //X軸
                data: ['週一','週二','週三','週四','週五','週六','週日']
            },
            yAxis: {  //Y軸
                type: 'value'
            },
            series: [ //總體數據源
                {
                    name: '訂單量',
                    type: 'bar',
                    data: [1000, 2000, 1500, 3000, 2000, 1200, 800]
                }
            ]
        }
        return option;
}

對比柱形圖表

初始化ReactEcharts

<Card title="對比柱形圖表">
          <ReactEcharts option={this.getOption2()} theme="Default" style={{height: 500}}/> 
</Card>

getOption2()渲染數據

getOption2 = () => {
        let option = {
            title: {
                text: '用戶騎行訂單'
            },
            legend: { //可過濾父標題
                data: ['OFO','摩拜','小藍']
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                data: ['週一','週二','週三','週四','週五','週六','週日']
            },
            yAxis: {
                type: 'value'
            },
            series: [ //總體數據源
                {
                    name: 'OFO',
                    type: 'bar',
                    data: [2000, 3000, 5500, 7000, 8000, 12000, 20000]
                },
                {
                    name: '摩拜',
                    type: 'bar',
                    data: [1500, 3000, 4500, 6000, 8000, 10000, 15000]
                },
                {
                    name: '小藍',
                    type: 'bar',
                    data: [1000, 2500, 4000, 4500, 6000, 7000, 8000]
                }
            ]
        }
        return option;
}

3、餅形圖功能實現

echarts->pie->index.js：對應路由/admin/charts/pie

按需加載導入餅圖

//導入餅圖
import 'echarts/lib/chart/pie'

餅形圖表

初始化ReactEcharts

<Card title="餅形圖表">
      <ReactEcharts option={this.getOption()} theme="Light"/>
</Card>

getOption()：關鍵在於option不一樣，type爲'pie'，data數組元素爲對象

getOption = () => {
        let option = {
            title: {
                text: '用戶騎行訂單',
                x: 'center'  //水平方向居中
            },
            legend: {
                orient: 'vertical', //垂直方向排列
                right: 10,          //絕對定位位置
                top: 20,
                bottom: 20,
                data: ['週一','週二','週三','週四','週五','週六','週日']
            },
            tooltip:{
                trigger: 'item',
                formatter: '{a}<br/>{b}:{c}({d}%)' //格式化提示項
            },
            series: [
                {
                    name: '訂單量',
                    type: 'pie',
                    data: [
                        {
                            value: 1000,
                            name: '週一'
                        },
                        {
                            value: 1000,
                            name: '週二'
                        },
                        {
                            value: 2000,
                            name: '週三'
                        },
                        {
                            value: 1500,
                            name: '週四'
                        },
                        {
                            value: 3000,
                            name: '週五'
                        },
                        {
                            value: 2000,
                            name: '週六'
                        },
                        {
                            value: 1200,
                            name: '週日'
                        }
                    ]
                }
            ]
        }
        return option;
}

環形圖表

初始化ReactEcharts

 <Card title="環形圖表">
           <ReactEcharts option={this.getOption2()} theme="Light"/> 
</Card>

getOption2()：radius屬性設置內環外環大小

getOption2 = () => {
        let option = {
            title: {
                text: '用戶騎行訂單',
                x: 'center'  //水平方向居中
            },
            legend: {
                orient: 'vertical', //垂直方向排列
                right: 10,          //絕對定位位置
                top: 20,
                bottom: 20,
                data: ['週一','週二','週三','週四','週五','週六','週日']
            },
            tooltip:{
                trigger: 'item',
                formatter: '{a}<br/>{b}:{c}({d}%)' //格式化提示項
            },
            series: [
                {
                    name: '訂單量',
                    type: 'pie',
                    radius: ['50%','80%'], //內環外環大小
                    // center: ['30%','60%'], //x軸y軸位置
                    data: [
                        {
                            value: 1000,
                            name: '週一'
                        },
                        {
                            value: 1000,
                            name: '週二'
                        },
                        {
                            value: 2000,
                            name: '週三'
                        },
                        {
                            value: 1500,
                            name: '週四'
                        },
                        {
                            value: 3000,
                            name: '週五'
                        },
                        {
                            value: 2000,
                            name: '週六'
                        },
                        {
                            value: 1200,
                            name: '週日'
                        }
                    ]
                }
            ]
        }
        return option;
}

南丁格爾圖表：表格按數據大小排序、半徑或區域隨數據遞增

初始化ReactEcharts

<Card title="南丁格爾圖表">
      <ReactEcharts option={this.getOption3()} theme="Light"/> 
</Card>

getOption3()：roseType屬性指定半徑radius或區域area

getOption3 = () => {
        let option = {
            title: {
                text: '用戶騎行訂單',
                x: 'center'  //水平方向居中
            },
            legend: {
                orient: 'vertical', //垂直方向排列
                right: 10,          //絕對定位位置
                top: 20,
                bottom: 20,
                data: ['週一','週二','週三','週四','週五','週六','週日']
            },
            tooltip:{
                trigger: 'item',
                formatter: '{a}<br/>{b}:{c}({d}%)' //格式化提示項
            },
            series: [
                {
                    name: '訂單量',
                    type: 'pie',
                    data: [
                        {
                            value: 1000,
                            name: '週一'
                        },
                        {
                            value: 1000,
                            name: '週二'
                        },
                        {
                            value: 2000,
                            name: '週三'
                        },
                        {
                            value: 1500,
                            name: '週四'
                        },
                        {
                            value: 3000,
                            name: '週五'
                        },
                        {
                            value: 2000,
                            name: '週六'
                        },
                        {
                            value: 1200,
                            name: '週日'
                        }
                    ].sort((a,b) => {  //數據排序
                        return a.value - b.value;
                    }),
                    roseType:'radius', //數據大、半徑大        
                }
            ]
        }
        return option;
}

4、折線圖功能實現

echarts->pie->index.js：對應路由/admin/charts/pie

按需加載導入折線圖

//導入餅圖
import 'echarts/lib/chart/line'

基本折線圖表

初始化ReactEcharts

<Card title="基本折線圖">
          <ReactEcharts option={this.getOption()} theme="Default" style={{height: 500}}/>
</Card>

getOption()：指定xAxis和yAxis的數據，series中經過data存儲趨勢點

getOption = () => {
        let option = {
            title: {
                text: '用戶騎行訂單'
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                data: [
                    '週一','週二','週三','週四','週五','週六','週日'
                ]
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '訂單量',
                    type: 'line',
                    data: [1000,2000,1500,3000,2000,1200,800] //趨勢點
                }
            ]
        }
        return option;
}

對比折線圖表

初始化ReactCharts

<Card title="對比折線圖">
         <ReactEcharts option={this.getOption2()} theme="Default" style={{height: 500}}/> 
</Card>

getOptions2()：series總體數據源中多個數據對象對比

getOption2 = () => {
        let option = {
            title: {
                text: '用戶騎行訂單'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['OFO訂單量','摩拜訂單量']  
            },
            xAxis: {
                data: [
                    '週一','週二','週三','週四','週五','週六','週日'
                ]
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: 'OFO訂單量',
                    type: 'line',
                    data: [1200,3000,4500,6000,8000,12000,20000] //趨勢點
                },
                {
                    name: '摩拜訂單量',
                    type: 'line',
                    data: [1000,2000,5500,6000,8000,10000,12000] //趨勢點
                }
            ]
        }
        return option;
}

區域折線圖表

初始化ReactEcharts

<Card title="區域折線圖">
        <ReactEcharts option={this.getOption3()} theme="Default" style={{height: 500}}/> 
</Card>

getOption3()：boundaryGap屬性指定座標軸從0開始，areaStyle屬性指定區域填充樣式

getOption3 = () => {
        let option = {
            title: {
                text: '用戶騎行訂單'
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                boundaryGap: false, //座標軸從起點開始，true時在中間
                data: ['週一','週二','週三','週四','週五','週六','週日']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '訂單量',
                    type: 'line',
                    data: [1000,2000,1500,3000,2000,1200,800], //趨勢點
                    areaStyle: {} //區域填充顏色
                }
            ]
        }
        return option;
}

注：轉載請註明出處

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。