Echarts常用組件常用簡單使用匯總

最近由於項目需求 要學習一段echarts 數據可視化 ，不得不說echarts的各種組件還是非常強大的，不過面臨頭疼的也是 他強大的API 實在太多的屬性 所以在這彙總下個人在使用中常用的配置
這裏附上百度Ecahrts 官方api 感興趣學習的小夥伴可以去研究下：
https://echarts.baidu.com/option.html#title
1.折線圖常用命令：

//根據第獲取元素
var dom = document.getElementById("bottom_02");
//加載echarts組件
var myChart = echarts.init(dom);
var app = {};
//折線圖數據源
var data_line={
    //x軸顯示數據
    xAxis:['2013','2014','2015','2016','2017','2018'],
    //y軸單位值
    yAxis:'(萬噸)',
    seriesData:[100, 200, 320,300,250,190]
};
option = null;
option = {
//grid屬性用於設置圖標在div中的位置
    grid: {
    //距離上邊框的距離（以下依次）
        top:'18%',
        left: '2%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis:  {
    //'type':x軸顯示數值類型 通常爲category
        type: 'category',
        boundaryGap: false,
        data: data_line.xAxis,
        //設置座標軸的軸線
        axisTick: {
            show: false
        },
        //設置座標軸刻度屬性
        axisLine: {
            show: true,
            //設置刻度的樣式
            lineStyle:{
                color:'#FFFFFF'
            }
        },
    },
    yAxis: {
    //跟xAxis相呼應 一個顯示類目，一個顯示數值
        type: 'value',
        boundaryGap: false,
        name:data_line.yAxis,
        data:data_line.seriesData,
        axisTick: {
            show: false
        },
        axisLine: {
            show: false,
            lineStyle:{
                color:'#FFFFFF'
            }
        },
    },
    //加載顯示數據
    series: [{
        data: data_line.seriesData,
        type: 'line',
        // 顯示數值
        itemStyle : {
            normal: {
                label : {
                    width: 1,
                    color:'#FFB508',
                    show: true
                }
            }
        },
    }]
};
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}

2.柱狀圖常用命令：

var dom = document.getElementById("right_top");
var myChart = echarts.init(dom);
var app = {};
option = null;

//右側柱狀圖數據集合
var data_apar_right={
    //標題內容
    titleData:'倉容情況',
    //分類標題頭
    legend:['總的', '已用'],
    //x軸內容
    xAxis:['庫1', '庫2', '庫3', '庫4', '庫5','庫6'],
    //'legend(總的)'對應各個庫的數據
    data_legend1:[320, 332, 301, 334, 390,400],
    //'legend(已用)'對應各個庫的數據
    data_legend2:[220, 182, 191, 234, 290,400]
};

option = {
    color: ['rgba(151,4,253,1)','rgba(3,177,211,1)', 'rgba(230,154,18,1)','rgba(12,186,137,1])'],
  //tooltip鼠標移入顯示彈框
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    //類目顯示 對應圖中最上面兩個
    legend: {
        data:data_apar_right.legend
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',
            axisTick: {show: false},
            data:data_apar_right.xAxis,
            axisLabel: {
                interval:0,
                //樣式全部寫在textStyle裏
                textStyle: {
                    color:'rgba(255,255,255,0.4)',
                    fontStyle:'normal',
                    fontSize:9,
                    opacity:0.4
                }
            },
        }
    ],
    yAxis: [
        {
            type: 'value',
            axisLabel: {
                interval:0,
                textStyle: {
                    color:'rgba(255,255,255,0.4)',
                    fontStyle:'normal',
                    fontSize:9,
                    opacity:0.4
                }
            },
        }
    ],
    series: [
        {
            name: data_apar_right.legend[0],
            type: 'bar',
            //設置柱狀圖寬度
            barWidth : 12,
            //設置柱狀圖間距
            barGap: 0,
            data: data_apar_right.data_legend1,
            itemStyle: {
                normal: {
                //color設置顏色漸變 以後自己用可以直接拿來顏色替換掉即可
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#9704FD'},
                            {offset: 1, color: '#03B1D3'}
                        ]
                    )
                },
                //鼠標移入時樣式變化
                emphasis: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#03B1D3'},
                            {offset: 1, color: '#9704FD'}
                        ]
                    )
                }
            },
        },
        {
            name: data_apar_right.legend[1],
            type: 'bar',
            barWidth : 12,
            data: data_apar_right.data_legend2,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#E69A12'},
                            {offset: 1, color: '#0CBA89'}
                        ]
                    )
                },
                emphasis: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#0CBA89'},
                            {offset: 1, color: '#E69A12'}
                        ]
                    )
                }
            }
        },
    ]
};
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}

3.餅狀圖（圓環圖）常用命令：
由於餅狀圖使用很簡單官方api也說明的很詳細 所以就不介紹了 ，直接介紹餅狀圖另一種樣式-圓環圖

var dom = document.getElementById("bottom_03");
var myChart = echarts.init(dom);
var app = {};
option = null;
//數據源
var data_circle={
    //標題
    title:'異常事故比例',
    //數據源
    dataset:[{name:'火警',num:12},{name:'違規操作',num:2},{name:'設備損毀',num:19},{name:'盜竊',num:3},{name:'摔倒',num:30}],
    //備註框顯示的內容
    legend:['火警','違規操作','設備損毀','盜竊','摔倒']
};


option = {
    title: {
        text: data_circle.title,
        left:'18%',
        top: '78%',
        textStyle: {
            color: '#fff',
            fontSize: 14
        }
    },
    color:['#00BD8D','#D90051','#01B4D2','#FFB508','#9702FE'],
    //顯示移入彈框
    tooltip: {
        trigger: 'item',
        formatter: "{b}<br/>{d}次"
        //a:系列名稱,b:數據項名稱,c:數值,d:百分比
    },
    legend: {
        orient: 'vertical',
        data:data_circle.legend,
        //設置導航欄寬度對應圖中右邊那一列
        itemWidth:10,
        //設置導航欄每一項的間距
        itemGap:25,
        top:'28%',
        right:'19%',
        //設置導航欄高度
        itemHeight:10,
        textStyle:{
            color:'#fff',
            fontSize:14
        }
    },
    dataset: {
        // 這裏指定了維度名的順序，從而可以利用默認的維度到座標軸的映射。
        // 如果不指定 dimensions，也可以通過指定 series.encode 完成映射，參見後文。
        source: data_circle.dataset
    },
    series: [
        {
            type:'pie',
            //設置這個就會將餅狀圖變成圓環圖。radius中兩個參數指的是內徑和外徑   *切記* 內徑<外徑 （不然移入效果會出錯）
            radius: ['30%', '50%'],
            //設置圓心位置 （對應則是圓環或餅圖移動位置）
            center: ['29%', '40%'],
        }
    ]
};
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}