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員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章