echarts柱状图和饼图通过鼠标点击实现数据联动
案例的gif展示图如下:
echarts两个柱状图和饼图echarts联动.gif
所有实现功能源码如下,注意在写js前引入包含所有echarts功能的插件api地址:
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<!-- 此处注意插件script引入 -->
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
legend: {},
tooltip: {
trigger: 'axis',
showContent: true,
},
dataset: {
source: [
['product', '2012', '2013', '2014', '2015', '2016', '2017'],
['aa', 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'
},
yAxis: {
gridIndex: 0
},
grid: {
top: '20%',
right: "36%",
},
series: [{
type: 'bar',
stack: '总量',
smooth: true,
seriesLayoutBy: 'row'
},
{
type: 'bar',
smooth: true,
stack: '总量',
seriesLayoutBy: 'row'
},
{
type: 'bar',
smooth: true,
stack: '总量',
seriesLayoutBy: 'row'
},
{
type: 'bar',
smooth: true,
stack: '总量',
seriesLayoutBy: 'row'
},
{
type: 'pie',
id: 'pie',
radius: '40%',
center: ['86%', '50%'],
label: {
formatter: '{b}: {@2012} ({d}%)'
},
encode: {
itemName: 'product',
value: '2012',
tooltip: '2012'
}
}
]
};
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
}
}
});
}
});
myChart.setOption(option);
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
网友评论