vuejs+echarts实现时间轴

标签：option show vuejs myChart params 时间轴 true echarts

1、效果图

2、具体需求描述

①可以设置时间轴起始值；

②时间轴可以缩放、左右拖动；

③鼠标移入时间轴显示当前刻度信息；

④点击时间轴时添加蓝色图标，鼠标移入图标显示此时图标信息且隐藏刻度信息，按住图标可以拖动图标；

3、实现

①结构代码

<div id="timeAxisEchart" style="width:100%;height: 50px;"></div> ②配置图表 data () {     return {       myChart: null,       option: {         grid: {           show: true,           top: 0,           left: 30,           right: 30,           bottom: 0,           borderWidth: 0,           cursor: 'pointer',         },         xAxis: {           type: 'time',           maxInterval: 3600 * 1000 * 24 * 30 * 12,           minInterval: 1000 * 60 * 2,           axisLine: {             // 轴线             show: true,             lineStyle: {               width: 2,             },           },           axisTick: {             // 轴刻度             show: true,             alignWithLabel: true,           },           offset: -26,           axisPointer: {             // 坐标轴指示器配置项             show: true,             label: {               show: true,               margin: -26,             },           }         },         yAxis: {           show: false,         },         tooltip: {           show: true,           formatter: (value) => {             return value.data ? this.dateFormatter("yyyy-MM-dd HH:mm:ss", new Date(parseInt(value.data))) : '';           },           padding: [2, 4],           transitionDuration: 0,           position: function(point, params, dom, rect, size) {               //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小               var x = point[0]; //               var y = point[1];               var boxWidth = size.contentSize[0];               var boxHeight = size.contentSize[1];               var posX = 0; //x坐标位置               var posY = 0; //y坐标位置               if (x < boxWidth) { //左边放不开                   posX = 5;               } else { //左边放的下                   posX = x - boxWidth - 10;               }               if (y < boxHeight) { //上边放不开                   posY = -26;               } else { //上边放得下                   posY = y - boxHeight;               }               return [posX, posY];           }         },         series: [           {             type: 'scatter',             symbol: 'pin',             symbolSize: 26,             symbolOffset: [0, 26],             itemStyle: {
            },             data: [],             z:999,           }         ],         dataZoom: [           {             type: 'inside',             xAxisIndex: 0,           },         ],       },     };   }, ③初始化图表     initEchart (time) {       let that = this;       let draggerStatus = false;       this.myChart = null;       this.myChart = this.$echarts.init(document.getElementById("timeAxisEchart"));       this.option.xAxis.min = new Date(time[0]).getTime();       this.option.xAxis.max = new Date(time[1]).getTime();       this.option.series[0].data = [new Date(time[0]).getTime()];       this.myChart.setOption(this.option, true);       window.addEventListener("resize", () => {         that.myChart.resize();       });       // 鼠标移入item不显示axisPointer       that.myChart.on('mouseover', params => {         that.option.xAxis.axisPointer.show = false;         that.myChart.setOption({ xAxis: that.option.xAxis });       });       that.myChart.on('mouseout', params => {         // draggerStatus = false;         that.option.xAxis.axisPointer.show = true;         that.myChart.setOption({ xAxis: that.option.xAxis });       });       // 拖动series数据       that.myChart.on('mousedown', params => {         draggerStatus = true; 　　 that.option.dataZoom[0].moveOnMouseMove = false;//拖动时禁止时间轴拖动（看具体需求是否需要）         that.myChart.setOption({ dataZoom: that.option.dataZoom });       });       that.myChart.getZr().on('mousemove', params => {         const pointInPixel = [params.offsetX, params.offsetY]         if (that.myChart.containPixel('grid', pointInPixel) && draggerStatus) {           const xIndex = that.myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0];           that.option.series[0].data = [new Date(parseInt(xIndex)).getTime()];           that.myChart.setOption({ series: that.option.series });         }       });       window.onmouseup = ()=> {         if(draggerStatus){           //逻辑操作         }         draggerStatus = false; 　　 that.option.dataZoom[0].moveOnMouseMove = true;//时间轴可拖动         that.myChart.setOption({ dataZoom: that.option.dataZoom });       };       // 时间轴点击事件       that.myChart.getZr().on('click', params => {         const pointInPixel = [params.offsetX, params.offsetY]         if (that.myChart.containPixel('grid', pointInPixel)) {           const xIndex = that.myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0];           that.option.series[0].data = [new Date(parseInt(xIndex)).getTime()];           that.myChart.setOption({ series: that.option.series }); 　　　//逻辑操作         }       });     }, 4、目前拖动色块时不会紧随鼠标移动，待优化。

标签：option,show,vuejs,myChart,params,时间轴,true,echarts
From： https://www.cnblogs.com/wangyan0926/p/17932924.html