v-charts使用心得

v-charts主要是根据echarts用vue封装的可视化工具，用起来更方便，

echarts官网
v-charts官网

v-charts的api不全，主要还是要参照echarts官网，
在项目开发中遇到了几个难点，花了一些时间研究，以下列出：
1、折线图如何监听鼠标点击、鼠标移入、点击图例事件
在页面标签里加上 :events=“lineData.chartEvents”

<ve-line :data="lineData.staticData" :events="lineData.chartEvents" :tooltip-visible="false"></ve-line>

在js里面加上

chartEvents: {
                mouseover: function(e) {
                //。。。需要做的事情
                },
                click: function(e) {
 				//。。。需要做的事情
				},
				legendselectchanged: function(e) {//点击图例改变时
				
				},
				legendscroll: (params) => {// 选中图例时，设置legend滚动页码,防止自动切回第一页
				}
            },

2、如果让默认的tooltip隐藏，可以如下操作
加上:tooltip-visible=“false”

<ve-line :data="lineData.staticData" :tooltip-visible="false"></ve-line>

3、柱状图渐变色
这一段加在series里面

color:new echarts.graphic.LinearGradient(0, 0, 0, 1,
                            [{
                                offset: 0,
                                color: '#94CCFF'
                            },
                            {
                                offset: 1,
                                color: '#23AFFF'
                            }
                            ])

全部代码如下
html部分

<ve-line :data="lineData.staticData" :grid="lineData.grid" :settings="lineData.chartSettings" :extend="lineData.chartExtend" :data-zoom="lineData.dataZoom" height="250px"></ve-line>

js部分

var datetime=new Date().getTime();
var endTime = datetime - 24*60*60*1000//昨天当前时间的时间戳
var begindateTime = datetime - 6*30*24*60*60*1000//六个月之前的时间戳
var formatendTime = moment(new Date(endTime)).format('YYYY-MM')
var formatbeginTime = moment(new Date(begindateTime)).format('YYYY-MM')

function initTime(begin,end){
    var month = (end - begin)/(30*24*60*60*1000)
    var monthInt = parseInt(month)
    var datearr = []
    //生成随机数造假数据
    for(var i = 0; i<monthInt; i++){
        var time = datetime - (monthInt-i)*30*24*60*60*1000
        datearr.push({
            'month': moment(new Date(time)).format('YYYY-MM'),
            'value': Math.round(Math.random()*2000)
        })
    }
    return datearr
}

var vm = new Vue({
    el:'#dhapp',
    data: {
    lineData: {//业务量图表数据
            chartSettings:{
                metrics: ['value'],
                dimension: ['month']
            },
            grid: {
                show: true,
                top: 10,
                bottom: 0
            },
            dataZoom: [{
                type: 'inside',
                start: 0,
                end: 100
            }, {
                type: 'inside',
                start: 0,
                end: 100
            }],
            chartExtend: {
                legend: {
                    show: false
                },
                series: {
                    smooth: false,
                    itemStyle: {
                        color: '#528EFC'
                    },
                    lineStyle: {
                        color: '#528EFC',
                        width: 2
                    },
                    showSymbol: true,
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0, // 0% 位置颜色
                            color: '#528EFC'
                        }, {
                            offset: 1, // 100% 位置颜色
                            color: '#fff'
                        }])
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        axisLabel: {
                            textStyle: {
                                color: '#fff' // 坐标值得具体的颜色
                            }
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#B2A9C6'
                            },
                            symbol: ['none','arrow'],
                            symbolSize: [10, 15]
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        boundaryGap: [0, '100%'],
                        axisLabel: {
                            textStyle: {
                                color: '#fff'
                            },

                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#B2A9C6'
                            },
                            symbol: ['none','arrow'],
                            symbolSize: [10, 15]
                        },
                    }
                ]
            },
            staticData: {
                // columns: ['月份', '业务量'],
                rows: initTime(begindateTime,datetime)//获取最近六个月以内的数据
            }
        },
    }
})