Echarts使用(Vue) 时间轴事件绑定、单图例多种切换

最近项目中有使用到Echarts的图表实例，一直查又嫌麻烦，自己总结一些使用上的内容，希望同时也能帮助到你。
总体内容
**1、Vue项目怎么使用Echarts**
2、在使用带有时间轴内容时给时间轴绑定事件
3

如果不是Vue项目，可通过官网说明进行使用。

1、Vue项目怎么使用Echarts

安装

npm install echarts -S

引入项目/使用
main.js

import myCharts  from "echarts";
Vue.prototype.$myCharts = myCharts

单页面中

template

<template>
	<div id="main" style="width: 100%;height:600px;"></div>
</template>

script

mounted(){
            this.myCharts = this.$myCharts.init(document.getElementById("main"));
            this.ModeCharts()//调用构建图例
        },
        methods:{
			ModeCharts(){
					var option = { //图表数据
						    xAxis: {
						        type: 'category',
						        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
						    },
						    yAxis: {
						        type: 'value'
						    },
						    series: [{
						        data: [820, 932, 901, 934, 1290, 1330, 1320],
						        type: 'line'
						    }]
					};
					this.myCharts.setOption(option);//必要一步
	}
}

如果是纯静态展示，同样在echart初始化后调用含步骤setOption(option)创建渲染的方法即可
但是 一般来说setOption都是在数据结构组装完成之后，也就是在向后端请求到数据，并将数据组装成echarts所需要的结构，再调用setOption，以上基本就是在Vue中使用Echarts基本步骤

注： echarts官方图例上所有的 setOption 事件都绑定在了 刷新 按钮上

解析echarts构建方法中各部分
技术能力有限，暂没做到解析源码，只是就一般使用内容做一下注解；

这是基本大框架内容用法标注，echarts所支持内容肯定不仅仅这部分，有特别多的b主对各个部分作了更详细的介绍。
Gird说明
Title说明

2、带时间轴图例怎么绑定事件。

何谓echarts时间轴，也就是在X轴下方带块级选中操作的图例。
而在数据量很庞大的情况下，后台数据往往不可能一次性将你需要的数据结构组装传给前端，这时候就需要对单个块级进行绑定事件，在每次点击的时候重新向后台请求这个块的数据，再重新调用所含setoption的构造函数即可。

一般在option中为timeline属性。
默认选中时间轴的下标极为重要currentIndex（number），再每次点击的时候如果不重新设置默认选中下标，你的数据虽然改变了，下方的块级却依旧还是默认选中。

var option = {
                    timeline: { //时间轴属性
                        axisType: 'category',
                        show: true,
                        symbol:'rect',
                        symbolSize:15,
                        currentIndex:0,//默认选中时间轴的下标
                        controlStyle:{
                            show:false
                        },
                        autoPlay: false, //是否自动播放
                        playInterval: 1000, //播放时间间格
                        data: []
                    },
                    options: []
                };

添加事件
已知我在初始化echarts画板时所绑定的名称为myChart，添加事件 timelinechanged事件

this.myChart.on('timelinechanged', function (timeLineIndex) {
                   console.log(timeLineIndex) // timeLineIndex为你的单个时间轴内容
                   console.log(timeLineIndex.currentIndex) // 时间轴下标
});

同理，echarts还有其他的可绑定事件，w3cschool上的解析

细小的一些所用到的内容；
都为option内属性，仅需要加在option={属性}内
更改标题对齐位置：title属性下的left，top，botton，right

标注解释/说明

legend: {
                        show: true, //是否展示
                        x: 'center', //对其方式
                        data: ['男性','女性'] //显示内容
                    }

配置Y轴最大值（最小值）： yAxis属性对象下max(min)属性
如果yAxis列表中存在两个对象，所示内容就是这样

yAxis: [{
                            type: 'value',
                            name: '报名人数',
                            max:function(value) {
                            //value所含 是你所用数据对象中的 []（max值，value值）
                                return value.max+10000;
                            },
                            axisTick:{
                                show:false
                            },
                            splitLine: {
                                show: false
                            }
                        }, {
                            type: 'value',
                            name: '百分比(%)',
                            show:false,
                            axisTick:{
                                show:false
                            },
                            splitLine:{
                                show:false
                            }
                        }],

单图例配置多中图例切换方式

toolbox: {
        show: true,
        feature: {
            dataView: {show: true, readOnly: false}, //数据报表
            magicType: {show: true, type: ['line', 'bar']}, //切换为折线图
            restore: {show: true}, //还原
            saveAsImage: {show: true}  //保存为图片
        }
    },

取消图例自带的缩放功能：找到dataZoom，注销即可

缩放echart柱状图宽度，折线图线的粗细：

更新----
在使用数据视图的时候，对数据视图显示内容进行控制：

不论是否其中的内容是你想要的，你也可以对他们的内容进行控制；

已知数据视图在echarts上控制属性为
toolbox >>> feature>>>dataView
toolbox 为option下第一级属性，dataView则是控制数据视图按钮的显示

toolbox:{
                            show: true, //显示？
                            feature: { //显示的内容？
                                dataView: { //数据视图
                                    show: true,
                                    readOnly: true, //只读？
                                    optionToContent:function(val){ //控制展示的内容
                                        var axisData = ['','核销金额','带动消费金额','带动比'];
                                        var series = val.series[0].data;
                                        var table = '',th='',tr='',als = '';
                                        for (let i in axisData){
                                            th += '<th>' + axisData[i] + '</th>'
                                        }
                                        tr='<tr>' + th +'</tr>';
                                        series.map(item=>{
                                            als += '<tr style="height: 30px;">' +'<td>'+item.countColumn +'</td>'+'<td>'+item.value +'</td>'+'<td>'+item.num +'</td>'+'<td>'+(item.num/item.value).toFixed(2) +'</td>'+'</tr>'
                                        })
                                        table = '<table style="width: 400px">'+ tr + als +'</table>';
                                        return table;
                                    }}, //数据报表我组装成了一个表格

                            }
                        },

有持续使用就有持续更新