vuejs+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、目前拖动色块时不会紧随鼠标移动，待优化。
