echart php多个,创建echart多个联动demo

鼠标悬浮同时触发多个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 = {

title: {

text: 'chart1'

},

tooltip: {

show: true,

trigger: 'axis',

axisPointer: {

type: 'line'

},

lineStyle: {

color: '#000',

}

},

legend: {

data: ['销量1']

},

grid:{

y2:140

},

xAxis: [{

type: 'category',

data: timearr,

axisLabel: {

interval: 0, //横轴信息全部显示

rotate: -45, //-30度角倾斜显示

}

}],

yAxis: [{

type: 'value',

}],

series: [{

name: '销量1',

type: 'line',

data: dataarr

}]

};

var option2 = {

title: {

text: 'chart2'

},

tooltip: {

show: true,

trigger: 'axis',

axisPointer: {

type: 'line'

},

lineStyle: {

color: '#000',

}

},

legend: {

data: ['销量2']

},

grid:{

y2:140

},

xAxis: [{

type: 'category',

data: timearr,

axisLabel: {

interval: 0, //横轴信息全部显示

rotate: -45, //-30度角倾斜显示

}

}],

yAxis: [{

type: 'value',

}],

series: [{

name: '销量2',

type: 'line',

data: dataarr

}]

};

// 为echarts对象加载数据

myChart1.setOption(option1);

myChart2.setOption(option2); //联动配置

// 分别设置每个实例的 group id

myChart1.group = 'group1';

myChart2.group = 'group1';

echarts.connect('group1');

// 或者可以直接传入需要联动的实例数

// echarts.connect([myChart1,myChart2]);

}

// 获取x轴时间字符串

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

// 获取两个数值

function getsel() {

$("i").on("click", function () {

var that = $(this);

var block = that.parents(".top").next();

// 点击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) {

// 获取当前日期

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)

}