echarts三图联动
需求：把同一时间轴上的不一样数据展现出来javascript
若是是两种数据能够加一个series把两种数据展现在同一个图上，若是是三种及以上数据一个图就不够展现了（一个图只有两个y轴），这就须要作多图联动。java
多图联动的核心就是把图关联后隐藏相同组件，相同的组件好比：x轴，图例，滚动条，工具栏canvas
以三图联动为例：echarts
<!-- 为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>
相关文章
- 1. Echarts地图与图表联动
- 2. echarts折线图联动的坑
- 3. ECharts 联动效果
- 4. echarts多图表级联之一，图表之间联动
- 5. Echarts柱形图（三）
- 6. Echarts使用二：全国地图与各省市地图联动
- 7. 图表联动——三个图表的联动
- 8. echarts（三）--缩放，滚动
- 9. Echarts 之三 —— 地市联动数据统计二
- 10. echarts图表平移动画
- 更多相关文章...
- • R 绘图 - 饼图 - R 语言教程
- • MyBatis级联查询 - MyBatis教程
- • 算法总结-滑动窗口
- • 互联网组织的未来：剖析GitHub员工的任性之源
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章