echarts 实现点击时间轴，显示切换功能
echarts时间轴的样例中，是有点击时间轴，然后直接切换的功能的，但是用它的sample的时候，并没有这一块的功能，然后看网上的教材也都不怎么理想，后来看官方文档，找到的解决方法
1.在timeline中增加事件监听
timeline: {
data: dataTime,
triggerEvent: true,
label: {
formatter: function (s) {
return formatDate(s, 'yyyy-MM');
}
},
currentIndex: month,
autoPlay: false
},2.增加事件绑定
var myChart1 = echarts.init(document.getElementById("chart-box"));
myChart1.setOption(option);
myChart1.on("click", function (params) {
if(params.componentType === 'timeline'){
var month = new Date(params.dataIndex).getMonth();
var myChart1 = echarts.init(document.getElementById("chart-box"));
var option = {
timeline: {
data: dataTime,
triggerEvent: true,
label: {
formatter: function (s) {
return formatDate(s, 'yyyy-MM');
}
},
currentIndex: month,
autoPlay: false
},
options: []
};
setDetail(chartData, option, month + 1);
myChart1.setOption(option);
myChart1.resize();
}
});
3.设置样式，需要注意的几个地方就是timeline的currentIndex属性,用户指定当前显示使用的是哪个options[i]
另外一个需要注意的是options里面保存的显示的数据，但是我们需要为当前显示的那个数据设置样式，其余的只需要设置数据就行，因此我单独写了一个方法，用来拼接options的内容
/**
* 动态设置图表的数据
* @param chartData
* @param option
*/
function setDetail(chartData, option, index) {
var date = new Date();
var options = [];
var month = date.getMonth() + 1;
for (var i = 1; i <= month; i++) {
if (index === i) {
//设置具体的样式
var detail = {
title: {
textStyle: {
color: '#a8a8a8',
fontSize: 13
},
text: i + '月工单分布'
},
tooltip: {'trigger': 'axis'},
legend: {
x: 'right',
data: ['工单数', '同比', '环比'],
textStyle: {
color: '#a8a8a8',
fontSize: 13
},
triggerEvent: true,
selected: {
'工单数': true,
'同比': false,
'环比': false
},
itemStyle: {
normal: {
color: function (params) {
var colorList = ['#C1232B', '#B5C334', '#FCCE10'];
return colorList[params.dataIndex]
}
}
}
},
toolbox: {
show: true,
orient: 'vertical',
x: 'right',
y: 'center',
feature: {
'magicType': {'show': true, 'type': ['line', 'bar', 'stack', 'tiled']}
}
},
calculable: true,
grid: {'y': 80, 'y2': 100},
xAxis: [{
type: 'category',
data: chartData.get(i).major,
axisLabel: {
interval: 0,
textStyle: {
color: '#a8a8a8'
}
}
}],
yAxis: [
{
type: 'value',
name: '工单数（条）',
axisLabel: {
textStyle: {
color: '#a8a8a8'
}
}
},
{
type: 'value',
name: '百分比（%）',
axisLabel: {
textStyle: {
color: '#a8a8a8',
fontSize: 10,
fontStyle: "bold"
}
}
}
],
series: [
{
name: '工单数',
type: 'bar',
itemStyle: {
normal: {
color: '#C1232B'
}
},
barWidth: 30,
markLine: {
symbol: ['arrow', 'none'],
symbolSize: [4, 2],
itemStyle: {
normal: {
lineStyle: {color: 'orange'},
barBorderColor: 'orange',
label: {
position: 'left',
formatter: function (params) {
return Math.round(params.value);
},
textStyle: {color: 'orange'}
}
}
},
data: [{'type': 'average', 'name': '平均值'}]
},
data: chartData.get(i).total
},
{
name: '环比', 'yAxisIndex': 1, 'type': 'bar',
data: chartData.get(i).line,
itemStyle: {
normal: {
color: '#B5C334'
}
},
barWidth: 30
},
{
name: '同比', 'yAxisIndex': 1, 'type': 'bar',
data: chartData.get(i).yoy,
itemStyle: {
normal: {
color: '#FCCE10'
}
},
barWidth: 30
}
]
};
options.push(detail);
} else {
//添加数据
var detail = {
title: {text: i + '月工单分布'},
series: [
{data: chartData.get(i).total},
{data: chartData.get(i).line},
{data: chartData.get(i).yoy}
]
};
options.push(detail);
}
}
option.options = options;
}最后再调用
myChart1.setOption(option);
myChart1.resize();
就可以正常工作了