1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的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) {
                // 基于准备好的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多图联动的更多相关文章

  1. echarts 点击方法总结，点任意一点获取点击数据，在多图联动中用生成标线举例

    关于点击(包括左击,双击,右击等)echarts图形任意一点,获取相关的图形数据,尤其是多图,我想部分人遇到这个问题一直很头大.下面我用举例说明,如何在多图联动基础上,我们点击点击任意一个图上任意一点 ...

  2. echarts 点击方法总结，点任意一点获取点击数据，举例说明:在多图联动中点击绘制标线

    关于点击(包括左击,双击,右击等)echarts图形任意一点,获取相关的图形数据,尤其是多图,我想部分人遇到这个问题一直很头大.下面我用举例说明,如何在多图联动基础上,我们点击任意一个图上任意一点,在 ...

  3. 微信小程序echart 折线图legend不显示的问题

    最近使用小程序echart折线图,遇到表头一直不显示问题,查询之后解决方案:

  4. 用echartsjs 实现动态绘制折线、柱状等图形，并实现多图联动效果

    echarts对于大数据处理后绘制折线图,柱形图等等的效果和速度都很好.下面我们介绍 怎么把封装的数据列表解析出来,动态绘图,并且实现鼠标联动效果引入js文件: <script type=&qu ...

  5. 百度的echart环形图颜色动态设置

    自己参与的有一个项目需要用到环行图,考虑到百度的echart功能很强大兼容性又挺好就使用了这个插件,但是在颜色配置的时候出现了问题按照参考文档的方法是用color:Array这样的形式,但是不知道在哪 ...

  6. echart折线图，柱状图，饼图设置颜色

    转载: 之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: xAxis: { type: 'category ...

  7. echart 折线图、柱状图、饼图、环形图颜色修改

    之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: xAxis: { type: 'category', b ...

  8. echart——关系图graph详解

    VueEchart组件见上一篇 <template> <VueEcharts :options="options" auto-resize /> </ ...

  9. echart折线图小知识

    1)在折线图中,有时我们不想让太多折线显示,那么就隐藏,点击legend区域文字再显示. 比如我们要隐藏的折线叫"联盟广告",代码如下 var selected = {}; sel ...

随机推荐

  1. Beaglebone Black 和树莓派

    我不是创客.我买了个 Beaglebone Black 来玩,主要是拿来学习. 入手前,看过好几个树莓派 (Raspi - 2 Model B)和 Beaglebone Black (BBB) 比较, ...

  2. JS学习笔记（三） 对象

    参考资料: 1. http://www.w3school.com.cn/js/js_objects.asp ☂ 知识点: ☞ Javascript中的所有事物都是对象. ☞ Javascript是基于 ...

  3. li下沉 margin-top越界 浮动带来的影响

    使用li嵌套实现的二级导航菜单,在IE浏览器下显示正常,而在谷歌及360极速模式下最后的几个li标签下沉了,其实在webkit内核的浏览器中都会有这种情况,如下图: 出现此种状况,有两种可能: 1.导 ...

  4. iOS - OC NSValue 值

    前言 @interface NSValue : NSObject <NSCopying, NSSecureCoding> 将任意数据类型包装成 OC 对象 1.比较两个 NSValue 类 ...

  5. Connection的使用

    package com.cz.test.util.collection; import java.util.ArrayList;import java.util.Collection;import j ...

  6. linux2.6内核compat_ioctl函数

    一.内核原型(linux2.6.28-7) long (*compat_ioctl)(struct tty_struct *tty, struct file * file,               ...

  7. 动态替换fragment

    // [1]获取手机的宽和高 windommanager WindowManager wm = (WindowManager) getSystemService(WINDOW_SERVICE); in ...

  8. [css] 自适应布局 移动端自适应

    一.宽度自适应 三列布局左右固定.中间不固定或者两列布局,左边固定右边不固定 原文链接:http://www.cnblogs.com/2050/archive/2012/07/30/2614852.h ...

  9. maven实战_01_搭建maven开发环境

    一 下载maven 在maven官网上可下载maven:http://maven.apache.org/download.cgi 下载好后,解压.我的解压到了:D:\maven\apache-mave ...

  10. vi编辑器简单应用（摘抄）

    摘抄于 vi编辑器的使用 (2) (3) 1 vi编辑器的基本使用 1.1 vi的启动 打开: $ vi example.c 只读打开 $ vi –R example.c 1.2 vi的工作模式 1. ...