ECharts初试（1）

进入公司写的第一个小demo没想到会是用echarts完成一个图表效果。

刚看到图的时候，感觉不难，不过没想到，echarts官方api狠狠地打击我的自信心。
1.vue引入echarts

首先使用 npm install echarts --save
然后在main.js中引用	import echarts from 'echarts'
将其指向VUE实例的原型上	Vue.prototype.$echarts = echarts
//也可以按需引入，不过因为不知道需要配置哪些参数才能实现效果，就直接全部引入

2.创建DOM容器，初始化echarts实例，设置参数

//DOM容器
<div id="echarts" style="width: 600px;height:400px;"> </div>
//图形初始化
let echartsView = this.$echarts.init(document.getElementById('echarts'));
//参数存放的变量
let option = {}
//生成图表
echartsView.setOption(option);

3.参数配置

initEcharts(){
    /*数据处理*/
    this.dataPro(this.echartsData)
    /*序号图标加载*/
    let rankingIcons = {
        'one': require('./../assets/1.png'),
        'two': require('./../assets/2.png'),
        'three': require('./../assets/3.png'),
        'four': require('./../assets/4.png'),
        'five': require('./../assets/5.png'),
        'six': require('./../assets/6.png'),
        'seven': require('./../assets/7.png'),
        'eight': require('./../assets/8.png'),
        'nine': require('./../assets/9.png'),
        'ten': require('./../assets/10.png'),
    };
    /*参数配置*/
    let option = {
        title : {
            text:"Top10",
            top:30,
            textStyle:{
                color: 'red',
                fontSize: 20
            }
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'cross',
            },
            formatter: function(params) {
                /*自定义提示框*/
                var result = '';
                result += `<span style="display:inline-block;position: absolute;left: 5px">${params[0].axisValue}</span>`+"</br>"
                /*自定义提示框，小点添加*/
                let marker = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:rgb(40,210,240);"></span>`
                result += marker + "金额: " + params[0].value +"</br>";
                return result;
            }
        },
        grid:{
            /*预留容器左边空间*/
            left:120
        },
        xAxis: {
            show:false
        },
        yAxis: {
            type: 'category',
            data: this.nameRanking,
            axisLine:{show:false},     //不展现坐标轴的线
            axisTick: {show: false},   //不展现坐标轴的标点
            axisLabel:{
                formatter: function (value,index) {
                    let mapping = {
                        1:'ten',
                        2:'nine',
                        3:'eight',
                        4:'seven',
                        5:'six',
                        6:'five',
                        7:'four',
                        8:'three',
                        9:'two',
                        10:'one',
                    }
                    /*label返回格式*/
                    return '{value|' + value + '}{' + mapping[index+1] + '|}';
                },
                rich: {
                    value: {
                        height: 23,
                        padding:15,
                        lineHeight: 23,
                    },
                    one: {
                        height: 23,
                        lineHeight: 23,
                        width:23,
                        backgroundColor: {
                            image: rankingIcons.one
                        }
                    },
                    two: {
                        height: 23,
                        width:23,
                        lineHeight: 23,
                        backgroundColor: {
                            image: rankingIcons.two
                        }
                    },
                    three: {
                        height: 23,
                        width:23,
                        lineHeight: 23,
                        backgroundColor: {
                            image: rankingIcons.three
                        }
                    },
                    four: {
                        height: 23,
                        width:23,
                        lineHeight: 23,
                        backgroundColor: {
                            image: rankingIcons.four
                        }
                    },
                    five: {
                        height: 23,
                        width:23,
                        lineHeight: 23,
                        backgroundColor: {
                            image: rankingIcons.five
                        }
                    },
                    six: {
                        height: 23,
                        width:23,
                        lineHeight: 23,
                        backgroundColor: {
                            image: rankingIcons.six
                        }
                    },
                    seven: {
                        height: 23,
                        width:23,
                        lineHeight: 23,
                        backgroundColor: {
                            image: rankingIcons.seven
                        }
                    },
                    eight: {
                        height: 23,
                        width:23,
                        lineHeight: 23,
                        backgroundColor: {
                            image: rankingIcons.eight
                        }
                    },
                    nine: {
                        height: 23,
                        width:23,
                        lineHeight: 23,
                        backgroundColor: {
                            image: rankingIcons.nine
                        }
                    },
                    ten: {
                        height: 23,
                        width:23,
                        lineHeight: 23,
                        backgroundColor: {
                            image: rankingIcons.ten
                        }
                    }
                }
            },
        },
        series: [{
            data: this.valRanking,
            type: 'bar',
            barWidth:10,
            itemStyle:{
                /*正常时的样式*/
                normal: {
                    barBorderRadius:5,
                    borderWidth:1,
                    borderColor:'#ccc',
                    /*渐变色*/
                    color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: "rgb(50,210,230)" // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: "rgb(90,210,170)" // 100% 处的颜色
                    }], false)
                }
            },
            z:5
        },
            /*作为对比的背景*/
            {
            data: [300, 300, 300, 300, 300, 300, 300, 300,300,300],
            type: 'bar',
                /*两个Bar重合*/
            barGap: '-100%',
                /*取消各种事件的触发*/
            silent: true,
            barWidth:10,
            itemStyle:{
                /*正常时的样式*/
                normal: {
                    borderWidth:1,
                    borderColor:'#ccc',
                    color:'rgb(233,233,233)',
                    opacity:0.8,
                    barBorderRadius:5,
                },
                /*hover时的样式*/
                emphasis:{
                    borderWidth:1,
                    borderColor:'#ccc',
                    color:'rgb(233,233,233)',
                    opacity:0.8,
                    barBorderRadius:5,
                }
            },
            z:1
        }]
    };
},

效果基本实现，由于没有具体的颜色值和宽高，基本都是目测的，长得像就行了。

关键点

1. 提示框
   提示框主要是需要重写效果，因为默认的效果中文字不是居右显示，并且会多一个底层（无填充部分的框）作为对比的数据。重写tooltip样式会缺失那个颜色的小点。需要用html文本自定义添加。颜色为参数的color属性，可以直接用marker。
2. 序号图标
   序号图标也需要重写坐标轴axisLabel方法，主要是formatter中返回的格式
   {rich中样式名 | 需要使用该样式的内容}
3. 颜色渐变
   最坑的就是颜色渐变，echarts官方api根本没有更新这个方法，辛辛苦苦找得怀疑人生。
   重写series中itemStyle
   /渐变色/
   color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: “rgb(50,210,230)” // 0% 处的颜色 },
   {offset: 1,color: “rgb(90,210,170)” // 100% 处的颜色 }], false)
   graphic.LinearGradient可以设置渐变色。第一个参数为渐变方向。分别为右/下/左/上
   第二个就是渐变色的设置了。

总体来说，还是学到了不少东西，至少为echarts的使用找到了入门的方向。
最后给大家看下我目测的结果图