python echarts 多图联动,创建echart多个联动的示例代码

鼠标悬浮同时触发多个echart

效果如下

html代码

选择时间间隔

one second

one second

one minute

one hour

one day

one week

one month

one year

选择数据个数

5

5

10

15

20

25

30

35

确定

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) {

// 基于准备好的dom，初始化echarts实例

var myChart1 = echarts.init(document.getElementById('main'));

var myChart2 = echarts.init(document.getElementById('main2'));

// 指定图表的配置项和数据

var option1 = {