在项目中使用echarts

时间 2019-12-05

标签项目使用 echarts 繁體版

原文原文链接

最近在项目中须要使用一些图表，鉴于echarts的中文API，因此选择了echarts。项目是用webpack+vue来开发的。html

安装依赖vue

npm install echarts --save-dev

而后在你须要使用图表的模版文件中引入echarts，目前用到了全国地图这个形式的图表，所以在引入echarts的同时还须要引入中国地图文件，文件在（下图）中。其中还有全国省的地图，不过目前用不到，就用china.js这个文件好了。
webpack

引入web

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

下面开始使用和一些简单配置：
思路是经过请求获取须要展现的数据，而后给配置给echarts，在页面渲染。肯定思路那么开始：npm

在mounted中完成请求功能api

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

好了图表出来了，后期配置下颜色就不会这么丑了...但愿如此数据结构

1、多数据地图和柱图联动

2017年7月20日 18:24:32 懒蛋楼主回来了，时隔很久补上一篇Echarts的使用案例吧，形式仍是地图图表。
下面放上一个效果图
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');
    });
});