在項目中使用echarts

最近在項目中須要使用一些圖表，鑑於echarts的中文API，因此選擇了echarts。項目是用webpack+vue來開發的。

---

安裝依賴

npm install echarts --save-dev

而後在你須要使用圖表的模版文件中引入echarts，目前用到了全國地圖這個形式的圖表，所以在引入echarts的同時還須要引入中國地圖文件，文件在（下圖）中。其中還有全國省的地圖，不過目前用不到，就用china.js這個文件好了。

引入

import echarts from 'echarts'
import china from 'echarts/map/js/china'

下面開始使用和一些簡單配置：
思路是經過請求獲取須要展現的數據，而後給配置給echarts，在頁面渲染。肯定思路那麼開始：

---

在mounted中完成請求功能

接下來就是在methods中配置echarts的初始化工做

---

好了圖表出來了，後期配置下顏色就不會這麼醜了...但願如此

1、多數據地圖和柱圖聯動

2017年7月20日 18:24:32 懶蛋樓主回來了，時隔很久補上一篇Echarts的使用案例吧，形式仍是地圖圖表。
下面放上一個效果圖

該圖表每一個省份共有5種數據，單選某一省份的時候右側的小圖區出現該省的數據詳情柱狀圖。

下面列出地圖圖表的配置

let option = {
        backgroundColor: '#FFF',    //地圖的背景色
        zoom: 1.5,                  //圖形初始化的比例
        toolbox: {                //圖表工具欄
            show: true,
            top:'0',
            left: '1%',
            feature: {
                dataView: {readOnly: true},    //數據視圖切換
                restore: {},            //還原功能
                saveAsImage: {}        //保存圖表至本地
            }
        },
        visualMap: {        //地圖可視化
            min: 0,
            max: 2500,
            left: 'left',
            top: 'bottom',
            text: ['高','低'],
            calculable: true,
            inRange: {
                color: ['#e0ffff', '#006edd']    //地圖區塊展現顏色
            },
        },
        legend: {            //圖例說明
            orient: 'horizontal',
            left: '25%',
            top: '1%',
            data:['統建CDN','IDC','省建Cache','統建Cache','省建OTT'],

        },
        tooltip:{        //鼠標懸停的提示框
            trigger: 'item',
            formatter: function(obj){
                let data = map4.mapdata[obj.dataIndex];
                return `<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 16px;padding-bottom: 7px;margin-bottom: 7px">
                            全網業務流量分佈地圖
                        </div>
                        省份：${data.name}<br/>
                        統建CDN：${data.value.CDN}GBPS<br />
                        IDC：${data.value.IDC}GBPS<br />
                        統建Cache：${data.value.Cache}GBPS<br />
                        省建Cache：${data.value.PCache}GBPS<br />
                        省建OTT：${data.value.POTT}GBPS<br />
                        總計流量：${data.value.POTT+data.value.CDN+data.value.IDC+data.value.Cache+data.value.PCache}GBPS<br />
                        `
            }
        },
        series: series,    //地圖數據
    };
    //下面是具體的地圖數據
    /*
    ** 由於數據的格式問題，這裏對原始數據進行循環生成了五個獨立的數據，放入series中
    */
    let ser = ()=>{
        let array = [];
        let labelArray = [{name:'統建CDN',item:'CDN'},{name:'IDC',item:'IDC'},{name:'省建Cache',item:'PCache'},{name:'統建Cache',item:'Cache'},{name:'省建OTT',item:'POTT'}]
        for(let i=0;i<labelArray.length;i++){
            array.push({
                name: labelArray[i].name,
                type: 'map',
                mapType: 'china',
                selectedMode : 'single',
                label: {
                    normal: { show: false},
                    emphasis: { show: false}
                },
                itemStyle: {
                    normal: {
                        color: Object.values(color)[i],    //color是定義的array裏面有五種數據顏色
                        areaColor: colorD,    //colorD是定義的默認顏色
                        borderColor: 'rgba(100,149,237,1)',
                        opacity: '0.6'
                    },
                    emphasis: {
                        areaColor: colorD,
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                        shadowBlur: 10,
                        opacity: '0.8'
                    }
                },
                roam: true,
                data:data(labelArray[i].item)
            })
        }
        return array;
    }
    //data函數
    let data = (type)=>{
        let array = [];
        map4.mapdata.map((item)=>{
            array.push({
                name: item.name,
                value: item.value[type]
            })
        })
        return array;
    }
    
    let series = ser();
    //原始數據結構
    mapdata : [
        {
            name:'安徽',
            value:{
                CDN:193.5,
                IDC:884.64,
                Cache:43.88,
                PCache:17.61,
                POTT:406.39
            }
        },
        {
            name: '北京',
            value:{
                CDN:40.86,
                IDC:451.49,
                Cache:34.64,
                PCache:0,
                POTT:14.15
            }
        }
        ....
    ]

以上就是左側地圖部分的詳細說明，這樣咱們就獲得了一個地圖圖表。接下來咱們開始實現左右聯動。

drawmap(id){
    this.chart = echarts.init(document.getElementById(id));
    this.chart.setOption(option);
    this.chart.on('click',function(data){    //爲圖表綁定點擊事件
        that.setData(data);
    });
},

這裏樓主在使用Echarts自帶的地圖點擊事件geoselected時，點擊地圖沒有任何響應，不知道是什麼緣由，無奈只好使用了click,該方法返回一個對象：關於對象中的內容能夠查看API。接下來咱們就是經過這個對象裏的一個dataIndex值來定位用戶指望查看的數據：

let {name,dataIndex} = data;
let seriesData = [
    {
        name:`${name}`,
        type: 'bar',
        data:Object.values(map4.mapdata[dataIndex].value)
    }
];

將數據賦給柱圖中，完成一次點擊聯動展現。

let option = {
    title: {
        text: `${name}流量數據`,
        left: 'center',
        textStyle:{
            fontSize: 16,
            fontWeight: 'normal'
        }
    },
    tooltip: {
        trigger: 'item',
        formatter:(item)=>{
            return `<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 16px;padding-bottom: 7px;margin-bottom: 7px">${name}流量數據</div>
                    ${item.name}：${item.value}GBPS<br/>`
        }
    },
    legend: {
        data: ['統建CDN','IDC','省建Cache','統建Cache','省建OTT']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    itemStyle:{
        normal:{
            color: function (params){
                return Object.values(color)[params.dataIndex]
            }
        }
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    yAxis: {
        type: 'category',
        data: ['統建CDN','IDC','省建Cache','統建Cache','省建OTT']
    },
    series:seriesData
};

有些朋友會報錯，應該是初始化時候出的問題。在項目使用，咱們在`mounted`中獲取圖表的數據，
並執行初始化圖表的方法，由於請求是異步的，因此可能會出現沒有數據的狀況。所以咱們須要使用`promise`這種方式，經過這種方式就可讓圖形正常渲染出來。

this.$http.get('/data/showdaydata').then(res=>{
    this.data1 = this.formatterPro(res.data.PCache);
}).then(()=>{
    this.$nextTick(function() {
        this.drawbar('map-item-1');
    });
});