創(chuàng)建echart多個(gè)聯(lián)動(dòng)的示例代碼
更新時(shí)間：2018年11月23日 11:24:07 作者：神膘護(hù)體小月半
這篇文章主要介紹了創(chuàng)建echart多個(gè)聯(lián)動(dòng)的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
鼠標(biāo)懸浮同時(shí)觸發(fā)多個(gè)echart
效果如下
html代碼
<div class="contain">
<div class="sel">
<div class="sel1">
<div class="top">
<span>選擇時(shí)間間隔</span>
<div class="show">
<span>one second</span>
<i class="glyphicon glyphicon-chevron-right"></i>
</div>
</div>
<div class="block">
<div leap="second">one second</div>
<div leap="minute">one minute</div>
<div leap="hour">one hour</div>
<div leap="day">one day</div>
<div leap="week">one week</div>
<div leap="month">one month</div>
<div class="active" leap="year">one year</div>
</div>
</div>
<div class="sel2">
<div class="top">
<span>選擇數(shù)據(jù)個(gè)數(shù)</span>
<div class="show">
<span>5</span>
<i class="glyphicon glyphicon-chevron-right"></i>
</div>
</div>
<div class="block">
<div leap="5">5</div>
<div leap="10">10</div>
<div leap="15">15</div>
<div leap="20">20</div>
<div leap="25">25</div>
<div leap="30">30</div>
<div leap="35">35</div>
</div>
</div>
<div class="zybtn">確定</div>
</div>
<!-- 為ECharts準(zhǔn)備一個(gè)具備大?。▽捀撸┑腄om -->
<div id="main" style="width: 1000px;height:300px;margin-top:45px;"></div>
<div id="main2" style="width: 1000px;height:300px;"></div>
</div>
css代碼
body {
margin: 0;
padding: 0;
background-color: #eee;
}
.contain {
padding: 10px;
}
.sel {
position: absolute;
height: 250px;
z-index: 10;
}
.sel>div {
float: left;
margin-right: 10px;
}
.top span {
display: inline-block;
width: 100px;
height: 30px;
}
.top .show {
width: 125px;
height: 25px;
float: right;
border: 1px solid #444;
padding-left: 5px;
position: relative;
}
.block {
float: right;
position: relative;
border-radius: 5px;
padding: 5px;
width: 120px;
box-shadow: 1px 1px 5px #444;
display: none;
background-color: #fff;
}
.block>div {
height: 25px;
line-height: 25px;
padding-left: 5px;
border-radius: 5px;
cursor: pointer;
}
.block>div:hover {
background-color: #D3E3E5;
}
.block>div.active {
background-color: #087C90;
color: #fff;
}
.zybtn {
width: 80px;
height: 30px;
border-radius: 5px;
background-color: #46AD08;
line-height: 30px;
text-align: center;
color: #fff;
cursor: pointer;
}
i.glyphicon {
top: 3px;
right: 5px
}
js代碼
function drawchart(timearr, dataarr) {
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart1 = echarts.init(document.getElementById('main'));
var myChart2 = echarts.init(document.getElementById('main2'));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option1 = {
title: {
text: 'chart1'
},
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'line'
},
lineStyle: {
color: '#000',
}
},
legend: {
data: ['銷(xiāo)量1']
},
grid:{
y2:140
},
xAxis: [{
type: 'category',
data: timearr,
axisLabel: {
interval: 0, //橫軸信息全部顯示
rotate: -45, //-30度角傾斜顯示
}
}],
yAxis: [{
type: 'value',
}],
series: [{
name: '銷(xiāo)量1',
type: 'line',
data: dataarr
}]
};
var option2 = {
title: {
text: 'chart2'
},
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'line'
},
lineStyle: {
color: '#000',
}
},
legend: {
data: ['銷(xiāo)量2']
},
grid:{
y2:140
},
xAxis: [{
type: 'category',
data: timearr,
axisLabel: {
interval: 0, //橫軸信息全部顯示
rotate: -45, //-30度角傾斜顯示
}
}],
yAxis: [{
type: 'value',
}],
series: [{
name: '銷(xiāo)量2',
type: 'line',
data: dataarr
}]
};
// 為echarts對(duì)象加載數(shù)據(jù)
myChart1.setOption(option1);
myChart2.setOption(option2); //聯(lián)動(dòng)配置
// 分別設(shè)置每個(gè)實(shí)例的 group id
myChart1.group = 'group1';
myChart2.group = 'group1';
echarts.connect('group1');
// 或者可以直接傳入需要聯(lián)動(dòng)的實(shí)例數(shù)
// echarts.connect([myChart1,myChart2]);
}
// 獲取x軸時(shí)間字符串
function gettimestr(tseconds) {
var str = '';
var year = new Date(tseconds).getFullYear();
var month = new Date(tseconds).getMonth() + 1;
var date = new Date(tseconds).getDate();
var hour = new Date(tseconds).getHours();
var minute = new Date(tseconds).getMinutes();
var second = new Date(tseconds).getSeconds();
if (month < 10) {
month = "0" + month
}
if (date < 10) {
date = "0" + date
}
if (hour < 10) {
hour = "0" + hour
}
if (minute < 10) {
minute = "0" + minute
}
if (second < 10) {
second = "0" + second
}
str += year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
return str;
}
getsel()
// 獲取兩個(gè)數(shù)值
function getsel() {
$("i").on("click", function () {
var that = $(this);
var block = that.parents(".top").next();
// 點(diǎn)擊i觸發(fā)函數(shù)，判斷類(lèi)型
if ($(this).hasClass("glyphicon-chevron-right")) {
$(this).removeClass("glyphicon-chevron-right");
$(this).addClass("glyphicon-chevron-down")
block.children("div").each(function () {
$(this).removeClass("active")
});
block.slideDown();
} else if ($(this).hasClass("glyphicon-chevron-down")) {
$(this).removeClass("glyphicon-chevron-down");
$(this).addClass("glyphicon-chevron-right")
block.slideUp()
}
block.children("div").on("click", function () {
$(this).addClass("active");
that.prev("span").html($(this).html())
that.removeClass("glyphicon-chevron-down");
that.addClass("glyphicon-chevron-right")
block.slideUp()
});
});
var val1 = 1000;
var val2 = 5;
$(".zybtn").on("click", function () {
switch ($(".sel1 .show span").html()) {
case 'one second':
val1 = 1000;
break;
case 'one minute':
val1 = 1000 * 60;
break;
case 'one hour':
val1 = 1000 * 3600;
break;
case 'one day':
val1 = 1000 * 3600 * 24;
break;
case 'one week':
val1 = 1000 * 3600 * 24 * 7;
break;
case 'one month':
val1 = 1000 * 3600 * 24 * 30;
break;
case 'one year':
val1 = 1000 * 3600 * 24 * 365;
break;
}
switch ($(".sel2 .show span").html()) {
case '5':
val2 = 5;
break;
case '10':
val2 = 10;
break;
case '15':
val2 = 15;
break;
case '20':
val2 = 20;
break;
case '25':
val2 = 25;
break;
case '30':
val2 = 30;
break;
case '35':
val2 = 35;
break;
}
changedata(val1, val2)
})
changedata(val1, val2)
}
function changedata(sel1, sel2) {
// 獲取當(dāng)前日期
var getdate = new Date();
var tseconds = getdate.getTime();
var timearr = [];
var dataarr = [];
for (var i = 0; i < sel2; i++) {
timearr.push(gettimestr(tseconds - sel1 * i))
dataarr.push(Math.ceil(Math.random() * 10))
}
drawchart(timearr, dataarr)
}
PS：echart多表聯(lián)動(dòng)
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的Dom -->
<div id="main1" style="height:200px"></div>
<div id="main2" style="height:200px"></div>
<div id="main3" style="height:200px"></div>
<div id="main4" style="height:200px"></div>
<!-- ECharts單文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路徑配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar', // 使用柱狀圖就加載bar模塊，按需加載
'echarts/chart/line'
],
function (ec) {
// 基于準(zhǔn)備好的dom，初始化echarts圖表
var myChart1 = ec.init(document.getElementById('main1'));
var myChart2 = ec.init(document.getElementById('main2'));
var myChart3 = ec.init(document.getElementById('main3'));
var myChart4 = ec.init(document.getElementById('main4'));
myChart1.setTheme("macarons");
myChart2.setTheme("macarons");
myChart3.setTheme("macarons");
myChart4.setTheme("macarons");
var option1 = {
title : {
text: '溫度狀況',
subtext: '純屬虛構(gòu)'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['設(shè)定溫度','進(jìn)水溫度','出水溫度','環(huán)境溫度']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
xAxis : [
{
type : 'category', //x軸為類(lèi)目類(lèi)型
axisLabel:{
show:true,
interval:0,
rotate:45
},
data : ['00:00:00','00:05:00','00:10:00','00:15:00','00:20:00','00:25:00','00:30:00','00:35:00','00:40:00','00:45:00']
}],
yAxis : [
{
type : 'value' //y軸為值類(lèi)型
}
],
series : [{
name:'設(shè)定溫度',
type:'line',
smooth:true,
data:[55,55,55,55,55,55,55,55,55,55]
}]
}
var option2 = {
tooltip : {
trigger: 'axis'
},
legend: {
y:-30,
data:['設(shè)定溫度','進(jìn)水溫度','出水溫度','環(huán)境溫度']
},
toolbox: {
y : -30,
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
xAxis : [
{
type : 'category', //x軸為類(lèi)目類(lèi)型
axisLabel:{
show:true,
interval:0,
rotate:45
},
data : ['00:00:00','00:05:00','00:10:00','00:15:00','00:20:00','00:25:00','00:30:00','00:35:00','00:40:00','00:45:00']
}],
yAxis : [
{
type : 'value' //y軸為值類(lèi)型
}
],
series : [{
name:'進(jìn)水溫度',
type:'line',
smooth:true,
data:[15,15,16,18,18,19,19,19,19,19]
}]
}
var option3 = {
tooltip : {
trigger: 'axis'
},
legend: {
y : -30,
data:['設(shè)定溫度','進(jìn)水溫度','出水溫度','環(huán)境溫度']
},
toolbox: {
y : -30,
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
xAxis : [
{
type : 'category', //x軸為類(lèi)目類(lèi)型
axisLabel:{
show:true,
interval:0,
rotate:45
},
data : ['00:00:00','00:05:00','00:10:00','00:15:00','00:20:00','00:25:00','00:30:00','00:35:00','00:40:00','00:45:00']
}],
yAxis : [
{
type : 'value' //y軸為值類(lèi)型
}
],
series : [{
name:'出水溫度',
type:'line',
smooth:true,
data:[20,25,30,35,38,44,46,48,53,56]
}]
}
var option4 = {
tooltip : {
trigger: 'axis'
},
legend: {
y : -30,
data:['設(shè)定溫度','進(jìn)水溫度','出水溫度','環(huán)境溫度']
},
toolbox: {
y : -30,
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
xAxis : [
{
type : 'category', //x軸為類(lèi)目類(lèi)型
axisLabel:{
show:true,
interval:0,
rotate:45
},
data : ['00:00:00','00:05:00','00:10:00','00:15:00','00:20:00','00:25:00','00:30:00','00:35:00','00:40:00','00:45:00']
}],
yAxis : [
{
type : 'value' //y軸為值類(lèi)型
}
],
series : [{
name:'環(huán)境溫度',
type:'line',
smooth:true,
data:[15,15,15,15,15,15,15,15,15,15]
}]
}
// 為echarts對(duì)象加載數(shù)據(jù)
myChart1.setOption(option1);
myChart2.setOption(option2);
myChart3.setOption(option3);
myChart4.setOption(option4);
//聯(lián)動(dòng)配置
myChart1.connect([myChart2, myChart3,myChart4]);
myChart2.connect([myChart1, myChart3,myChart4]);
myChart3.connect([myChart2, myChart1,myChart4]);
myChart4.connect([myChart2, myChart3,myChart1]);
}
);
</script>
</body>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了VsCode插件整理（小結(jié)），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
JavaScript中日常收集常見(jiàn)的10種錯(cuò)誤(推薦)
本文是小編給大家日常收集整理的js中常見(jiàn)的10種錯(cuò)誤，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-01-01
總結(jié)JavaScript中布爾操作符||與&&的使用技巧
這篇文章主要介紹了總結(jié)JavaScript中布爾操作符||與&&的使用技巧,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-11-11
微信小程序出現(xiàn)wx.navigateTo頁(yè)面不跳轉(zhuǎn)問(wèn)題的解決方法
這篇文章主要介紹了微信小程序出現(xiàn)wx.navigateTo頁(yè)面不跳轉(zhuǎn)問(wèn)題的解決方法,簡(jiǎn)單分析了微信小程序出現(xiàn)wx.navigateTo頁(yè)面不跳轉(zhuǎn)情況的原因及相應(yīng)的解決方法,需要的朋友可以參考下2017-12-12
javascript中Class(類(lèi))的介紹和使用方法
在JavaScript中類(lèi)(Class)是一種創(chuàng)建對(duì)象的模板,它可以用來(lái)定義對(duì)象的屬性和方法,這篇文章主要給大家介紹了關(guān)于javascript中Class(類(lèi))的介紹和使用方法的相關(guān)資料,需要的朋友可以參考下2024-05-05
Webpack 5 是一款強(qiáng)大的模塊打包工具,可用于將許多分散的模塊按照依賴(lài)關(guān)系打包成一個(gè)（或多個(gè)）bundle,這篇文章給大家介紹webpack 5 mode的作用和區(qū)別解析,感興趣的朋友跟隨小編一起看看吧2024-01-01
微信小程序?qū)崙?zhàn)教程之WXS語(yǔ)法詳解
WXS是小程序的一套腳本語(yǔ)言,結(jié)合 WXML,wxs類(lèi)似js和js又不一樣,好多js語(yǔ)法能在js使用不能在wxs使用可以構(gòu)建出頁(yè)面的結(jié)構(gòu),這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崙?zhàn)教程之WXS語(yǔ)法詳解的相關(guān)資料,需要的朋友可以參考下2024-09-09
Js實(shí)現(xiàn)動(dòng)態(tài)添加刪除Table行示例
這篇文章主要介紹了Js動(dòng)態(tài)添加刪除Table行的具體實(shí)現(xiàn),需要的朋友可以參考下2014-04-04
Bootstrap導(dǎo)航條可點(diǎn)擊和鼠標(biāo)懸停顯示下拉菜單
這篇文章主要為大家詳細(xì)介紹了Bootstrap導(dǎo)航條可點(diǎn)擊和鼠標(biāo)懸停顯示下拉菜單,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
基于Cesium實(shí)現(xiàn)繪制圓形,正方形,多邊形,橢圓圖形標(biāo)注
這篇文章主要介紹了如何利用Cesium實(shí)現(xiàn)繪制圓形、正方形、多邊形、橢圓等形狀的圖形標(biāo)注，文中的示例代碼講解詳細(xì)，需要的可以參考一下2022-06-06