发布于2021-03-10 18:53 阅读(1207) 评论(0) 点赞(7) 收藏(1)
Echarts.js目前已经提供了connect功能,只要图标的legend一样,那么就能实现联动。
下面两个链接是介绍Echarts connect的用法的。
在这个样例中,随着鼠标在坐标轴上的移动,饼图会不断的变化,其关键在于这一段代码。
myChart.on('updateAxisPointer', function (event) {
var xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
var dimension = xAxisInfo.value + 1;
myChart.setOption({
series: {
id: 'pie',
label: {
formatter: '{b}: {@[' + dimension + ']} ({d}%)'
},
encode: {
value: dimension,
tooltip: dimension
}
}
});
}
});
本质上是通过鼠标事件,不断获取xAxisInfo,然后根据获取到的xAxisInfo.value(dimension)重新绘制饼图。这个可视化过程中数据是以数据集形式呈现的,所以用的encode,具体介绍可以在如何使用 dataset 管理数据看到。
如果要看event都有什么,通过console.log(event)即可获取,比如一道第一个横轴坐标2012时,输出内容如下,其value为0.
其关键在于
myEcart.dispatchAction({
type:'highlight',
seriesIndex:0,
dataIndex:app.currentIndex
});
Echarts的action还有很多,在echarts官网的API中可以输入action进行检索。
之所以可以使用这个实现多图的联动,实质是一个图上发生鼠标移动事件后,调用另一个图,使其产生动作。比如myechart1和myechart2,如果获取到了myechart1的params信息,通过这些信息可以对应到myechart2的dataIndex、SeriesIndex,那么,就可以使用这样的形式实现联动。
记住这两个东西就好
myEchart.setOption \\ 重新绘制
myEchart.dispatchAction \\echarts action
以下是一个对原始例子进行的一些改进之后的效果图:
全部源码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 900px;height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
legend: {},
tooltip: {
//trigger: 'axis',
showContent: false,
},
dataset: {
source: [
['product', '2012', '2013', '2014', '2015', '2016', '2017'],
['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
]
},
xAxis: {type: 'category',
triggerEvent: true,
//axisPointer: {show:true}
},
yAxis: {gridIndex: 0},
grid: {top: '55%'},
series: [ {type: 'line', smooth: true, seriesLayoutBy: 'row', symbolSize: 10}, {type: 'line', smooth: true, seriesLayoutBy: 'row', symbolSize: 10}, {type: 'line', smooth: true, seriesLayoutBy: 'row', symbolSize: 10}, {type: 'line', smooth: true, seriesLayoutBy: 'row', symbolSize: 10}, { type: 'pie', id: 'pie', radius: '30%', center: ['50%', '25%'],
label: {
formatter: '{b}: {@[2012]} ({d}%)'
},
encode: {
itemName: 'product',
value: '2012',
tooltip: '2012'
}
}
]
};
setTimeout(function () {
myChart.on('mouseover',function(params){
if(params.componentType == "xAxis"){
var xAxisInfo = params.value;
myChart.setOption({
series: {
id: 'pie',
label: {
formatter: '{b}: {@[' + xAxisInfo + ']} ({d}%)'
},
encode: {
value: xAxisInfo,
tooltip: xAxisInfo
}
}
});
}
if(params.componentType == "series" && params.seriesType == 'line'){
var xAxisInfo = params.value[0];
myChart.setOption({
series: {
id: 'pie',
label: {
formatter: '{b}: {@[' + xAxisInfo + ']} ({d}%)'
},
encode: {
value: xAxisInfo,
tooltip: xAxisInfo
}
}
});
}
setTimeout(function(){
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 4,
dataIndex: params.seriesIndex
});
},300);
});
myChart.on('mouseout',function(params){
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 4,
dataIndex: params.seriesIndex
});
});
},0);
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
那两个if主要是用于获取信息,如果不是两个图画在同一个myEchart里其实没有那么麻烦,实际上可以忽略不看。鼠标移动到某一和线图的点的时候,并图中对应的块将会高亮。
实现的关键在于通过鼠标事件,获取到了params的相关信息,通过
myChart.dispatchAction({
type:'highlight',
seriesIndex:'4',
dataIndex:params.seriesIndex
});
实现饼图部分的高亮。这个例子中两个图是在同一个myechart中,如果我们画在两个不同的图像中如何实现高亮呢?
简化来写就是这样
myChart1.on('mouseover',function(params){
myChart2.dispatchAction({
type:'highlight',
seriesIndex:4,
dataIndex:params.seriesIndex
});
});
具体需要根据params的对应情况来实行高亮。
原文链接:https://www.cnblogs.com/orint/p/14499333.html
作者:大哥你来啦
链接:http://www.qianduanheidong.com/blog/article/34345/17bf3a1ec41e387592b9/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!