如果直接套用官网的效果，那么柱状图和线条的数据，都会渲染进右侧的饼图。在初始化数据时，必须根据左侧数据，重新组装右侧数据(默认右侧是统计左边，所以，要将左侧的数据进行累加)：
//左侧数据
let leftData = [
['product', '2012', '2013', '2014', '2015', '2016', '2017'],
['A', 141.1, 30.4, 265.1, 353.3, 183.8, 98.7],
['B', 86.5, 192.1, 85.7, 83.1, 73.4, 355.1],
['C', 24.1, 67.2, 179.5, 86.4, 65.2, 82.5],
['D', 55.2, 67.1, 169.2, 72.4, 253.9, 39.1],
['总计', 355.2, 267.1, 169.2, 572.4, 353.9, 239.1]
]
//右侧数据
let rightData = [];
leftData.map((item,index) => {
if(index!==0 && index!==leftData.length-1){
let total = 0;
item.map((item2,index2) => {
if(index2!==0){
total += item2;
}
})
rightData.push({
name:item[0],
value:total.toFixed(2)
})
}
})
当鼠标浮动到左边的柱状图，右侧也要进行数据更新，实现联动：
myChart.on('updateAxisPointer', function (event) {
var xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
var dimension = xAxisInfo.value+1;
let rightData = [];
leftData.map((item,index) => {
if(index!==0 && index!==leftData.length-1){
let total = item[dimension];
rightData.push({
name:item[0],
value:total
})
}
})
myChart.setOption({
series: {
id: 'pie',
data:rightData
}
});
}
});
最终代码如下：
<div id="main"></div>
<script src="echarts.min.js"></script>
<script>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
let winWidth = document.body.clientWidth;
let barWidth = winWidth*(30/1920);
let leftData = [
['product', '2012', '2013', '2014', '2015', '2016', '2017'],
['A', 141.1, 30.4, 265.1, 353.3, 183.8, 98.7],
['B', 86.5, 192.1, 85.7, 83.1, 73.4, 355.1],
['C', 24.1, 67.2, 179.5, 86.4, 65.2, 82.5],
['D', 55.2, 67.1, 169.2, 72.4, 253.9, 39.1],
['总计', 355.2, 267.1, 169.2, 572.4, 353.9, 239.1]
]
let rightData = [];
leftData.map((item,index) => {
if(index!==0 && index!==leftData.length-1){
let total = 0;
item.map((item2,index2) => {
if(index2!==0){
total += item2;
}
})
rightData.push({
name:item[0],
value:total.toFixed(2)
})
}
})
option = {
backgroundColor:'#fff',
title:{
textStyle:{
color:'#4c4c4c',
fontSize:14,
fontWeight:'normal'
},
text:'用例数',
left:0,
top:0
},
legend: {
bottom:0,
},
tooltip: {
padding: 10,
backgroundColor:'rgba(255,255,255,1)',
trigger: 'axis',
textStyle: {
color:'#333',
fontSize:16,
},
axisPointer: {
type: 'shadow',
shadowStyle: {color:'rgba(150,150,150,0.1)'}
}
},
grid: {
left: '0',
right: '40%',
top: '10%',
bottom: '20%',
containLabel: true
},
dataZoom: [
{
show: true,
realtime: true,
start: 0,
end: 60,
bottom:'12%',
}
],
dataset: {
source: leftData
},
xAxis: {
type: 'category',
//隐藏x轴刻度
axisTick: {
show: false
},
//设置x轴名称及x轴线条颜色
axisLine: {
show: true,
lineStyle: {
color: '#4d4d4d'
}
},
},
yAxis: {
gridIndex: 0,
//设置网格线颜色
splitLine: {
show: true,
lineStyle:{
color: '#f0f0f0'
}
},
axisTick: {
//隐藏x轴刻度
show: false
},
axisLine: {
//设置x轴名称及x轴线条颜色
show: false
},
},
series: [
{type: 'bar', barWidth:barWidth, seriesLayoutBy: 'row', itemStyle:{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[
{offset: 0, color: '#09c7c1'},{offset: 1, color: '#0da1d4'}
])}},
{type: 'bar', barWidth:barWidth, seriesLayoutBy: 'row', itemStyle:{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[
{offset: 0, color: '#6086fc'},{offset: 1, color: '#3555f1'}
])}},
{type: 'bar', barWidth:barWidth, seriesLayoutBy: 'row', itemStyle:{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[
{offset: 0, color: '#fbc97d'},{offset: 1, color: '#fd7e4c'}
])}},
{type: 'bar', barWidth:barWidth, seriesLayoutBy: 'row', itemStyle:{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[
{offset: 0, color: '#f85d85'},{offset: 1, color: '#eb2d6e'}
])}},
{
type: 'line', smooth: true, seriesLayoutBy: 'row', itemStyle:{
width:30,
color: '#2c63f0'
},
symbolSize:10,
lineStyle: {
width: 3,
shadowColor: 'rgba(0,0,0,0.2)',
shadowBlur: 10,
shadowOffsetY: 10,
},
areaStyle: {
normal: {
color: {
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [{
offset: 0,
color: "rgba(227,234,253,1)" // 100% 处的颜色
},{
offset: 1,
color: "rgba(227,234,253,0)" // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
},
},
{type: 'pie', id: 'pie', radius: ['45%', '70%'], center: ['80%', '45%'],
data:rightData,
label: {
formatter: '{b}: {@2012} ({d}%)'
},
itemStyle: {
emphasis: {
shadowBlur: 15,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal: {
color: function(params) {
var colorList = [
{c1: ' #09c7c1', c2: '#0da1d4'},
{c1: ' #6086fc', c2: '#3555f1'},
{c1: '#fbc97d', c2: '#fd7e4c'},
{c1: ' #f85d85', c2: '#eb2d6e'},
//{c1: ' #0a3cbd', c2: '#2c63f0'} //屏蔽 总计 的颜色
]
if(params.dataIndex<4){
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
offset: 0,
color: colorList[params.dataIndex].c1
}, {
offset: 1,
color: colorList[params.dataIndex].c2
}])
}
}
}
}
}
]
};
myChart.on('updateAxisPointer', function (event) {
var xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
var dimension = xAxisInfo.value+1;
let rightData = [];
leftData.map((item,index) => {
if(index!==0 && index!==leftData.length-1){
let total = item[dimension];
rightData.push({
name:item[0],
value:total
})
}
})
myChart.setOption({
series: {
id: 'pie',
data:rightData
}
});
}
});
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>