<!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div></div> <div></div> <div></div> <div></div> <!-- ECharts单文件引入 --> <script src="https://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) { // 基于准备好的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: '纯属虚构' }, tooltip : { trigger: 'axis' }, legend: { data:['设定温度','进水温度','出水温度','环境温度'] }, 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轴为类目类型 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轴为值类型 } ], series : [{ name:'设定温度', type:'line', smooth:true, data:[55,55,55,55,55,55,55,55,55,55] }] } var option2 = { tooltip : { trigger: 'axis' }, legend: { y:-30, data:['设定温度','进水温度','出水温度','环境温度'] }, 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轴为类目类型 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轴为值类型 } ], series : [{ name:'进水温度', type:'line', smooth:true, data:[15,15,16,18,18,19,19,19,19,19] }] } var option3 = { tooltip : { trigger: 'axis' }, legend: { y : -30, data:['设定温度','进水温度','出水温度','环境温度'] }, 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轴为类目类型 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轴为值类型 } ], 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:['设定温度','进水温度','出水温度','环境温度'] }, 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轴为类目类型 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轴为值类型 } ], series : [{ name:'环境温度', type:'line', smooth:true, data:[15,15,15,15,15,15,15,15,15,15] }] } // 为echarts对象加载数据 myChart1.setOption(option1); myChart2.setOption(option2); myChart3.setOption(option3); myChart4.setOption(option4); //联动配置 myChart1.connect([myChart2, myChart3,myChart4]); myChart2.connect([myChart1, myChart3,myChart4]); myChart3.connect([myChart2, myChart1,myChart4]); myChart4.connect([myChart2, myChart3,myChart1]); } ); </script> </body>
创建echart多个联动的示例代码(2)
内容版权声明：除非注明，否则皆为本站原创文章。
转载注明出处：http://www.heiqu.com/f7686337a734bad5c98f2492c7e38c01.html