需求：把同一时间轴上的不同数据展示出来
如果是两种数据可以加一个series把两种数据展示在同一个图上，如果是三种及以上数据一个图就不够展示了（一个图只有两个y轴），这就需要做多图联动。
多图联动的核心就是把图关联后隐藏相同组件，相同的组件比如：x轴，图例，滚动条，工具栏
以三图联动为例：
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="canvasContent">
<div id="main" style="width: 100%; height: 300px"></div>
<div id="main2" style="width: 100%; height: 150px"></div>
<div id="main3" style="width: 100%; height: 250px"></div>
</div>
<script src="js/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: './js'
}
});
//到后台获取到的数据
var yAxisTotalcount = [10,12,13,14,8,6,7,9];
var yAxisSuccessPercent = [100,90,80,78,86,97,79,80];
var yAxisAvgtime = [11,21,23,14,25,16,17,18];
var xAxisTimeData = ['16-02-15 09:55:11','16-02-15 09:55:12','16-02-15 09:55:13','16-02-15 09:55:14','16-02-15 09:55:15','16-02-15 09:55:16','16-02-15 09:55:17','16-02-15 09:55:18'];
// 使用
require(
[
'echarts',
'echarts/chart/line',
'echarts/chart/bar'
],
function (echarts) {
option = {
title : {
text: '数据统计'
},
tooltip : {
trigger: 'axis',
formatter: "{b}<br> 次数：{c}次",
showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
},
legend: {
data:['总量','成功率','时间']//图例，后面关联的两个会隐藏
},
toolbox: {//右上角的工具栏，后面关联的两个会隐藏
show : true,
feature : {
mark : {show: true},
dataZoom : {show: true},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: false}
}
},
dataZoom : {//滑动条，联动关联
backgroundColor: 'rgba(0,0,0,0)',
dataBackgroundColor: 'rgba(0,0,0,0)',
handleColor: 'rgba(70,130,180,0.8)',
fillerColor: 'rgba(144,197,237,0.6)',
handleSize: 7,
show : false,//不显示，已经做关联，由最后一个图显示
realtime: true,
start : 0,
end : 100
},
grid: {//直角坐标系
x: 60,
y: 45,
x2:20,
y2:25
},
xAxis : [//第一幅图x轴
{
type : 'category',
boundaryGap : true,
axisTick: {onGap:false},
splitLine: {show:false},
axisLabel:{show:false,rotate: 45},//不显示
data : xAxisTimeData
}
],
yAxis : [//第一幅图y轴
{
type : 'value',
name : '次数',
scale:true,
axisLabel : {
formatter: '{value} 次'
},
splitNumber: 5,
splitArea : {show : true}
}
],
series : [
{//第一幅图的数据
name:'总量',
type:'value',
type:'line',
data:yAxisTotalcount,
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
},
{//用于关联后面两幅图
name:'成功率',
type:'line',
symbol: 'none',
data:[]
},
{
name:'时间',
type:'bar',data:[]
}
]
};
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
option2 = {
tooltip : {
trigger: 'axis',
formatter: "{b}<br> 成功率：{c}%",
showDelay: 0 // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
},
legend: {
y : -30,//隐藏,跟第一幅图关联了，所以不需要显示
data:['总量','成功率','时间']
},
toolbox: {
y : -30,//隐藏
show : true,
feature : {
mark : {show: true},
dataZoom : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: false}
}
},
dataZoom : {
backgroundColor: 'rgba(0,0,0,0)',
dataBackgroundColor: 'rgba(0,0,0,0)',
handleColor: 'rgba(70,130,180,0.8)',
fillerColor: 'rgba(144,197,237,0.6)',
handleSize: 7,
show : false,
realtime: true,
start : 0,
end : 100
},
grid: {
x: 60,
y:5,
x2:20,
y2:25
},
xAxis : [
{
type : 'category',
boundaryGap : true,
axisLabel:{show:false,rotate: 45},
axisTick: {onGap:false},
splitLine: {show:false},
data : xAxisTimeData
}
],
yAxis : [
{
type : 'value',
name : '成功率',
scale:true,
axisLabel : {
formatter: '{value} %'
},
//boundaryGap: [0.05, 0.05],
splitNumber: 4,
splitArea : {show : true}
}
],
series : [
{
name:'成功率',
type:'line',
symbol: 'true',
data:yAxisSuccessPercent,
markLine : {
symbol : 'none',
itemStyle : {
normal : {
color:'#1e90ff',
label : {
show:false
}
}
},
data : [
{type : 'average', name: '平均值'}
]
}
}
]
};
var myChart2 = echarts.init(document.getElementById('main2'));
myChart2.setOption(option2);
option3 = {
tooltip : {
trigger: 'axis',
formatter: "{b}<br> 时间：{c}ms",
showDelay: 0 // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
},
legend: {
y : -30,
data:['总量','成功率','时间']
},
toolbox: {
y : -30,
show : true,
feature : {
mark : {show: true},
dataZoom : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: false}
}
},
dataZoom : {
//y:350,
backgroundColor: 'rgba(0,0,0,0)',
dataBackgroundColor: 'rgba(0,0,0,0)',
handleColor: 'rgba(79,130,180,0.8)',
fillerColor: 'rgba(144,197,237,0.6)',
handleSize: 17,
show : true,//显示
realtime: true,
start : 0,
end : 100
},
grid: {
x: 60,
y:5,
x2:20,
y2:120
},
xAxis : [
{
type : 'category',
position:'bottom',
boundaryGap : true,
axisLabel: {rotate: 45,show:true},
axisTick: {onGap:false},
splitLine: {show:false},
data : xAxisTimeData
}
],
yAxis : [
{
type : 'value',
name : '时间',
scale:true,
axisLabel : {
formatter: '{value} ms'
},
//boundaryGap: [0.05, 0.05],
splitNumber: 4,
splitArea : {show : true}
}
],
series : [
{
name:'时间',
type:'line',
symbol: 'true',
data:yAxisAvgtime,
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
symbol : 'none',
itemStyle : {
normal : {
color:'#1e90ff',
label : {
show:false
}
}
},
data : [
{type : 'average', name: '平均值'}
]
}
}
]
};
var myChart3 = echarts.init(document.getElementById('main3'));
myChart3.setOption(option3);
//三幅图关联
myChart.connect([myChart2, myChart3]);
myChart2.connect([myChart, myChart3]);
myChart3.connect([myChart, myChart2]);
}
);
</script>
412
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
