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. Dreamweaver学习笔记---2016.08.17

    静态网页:不访问数据库,直接写入HTML. 动态网页:在网上发布好的,我们可以通过网页预览到的,具有访问数据库的过程. HTML:Hyper Text Markup Language,超文本语音标记. ...

  2. mysql数据小姿势

    CREATE TABLE `information` (  `NUMBER` bigint(20) NOT NULL AUTO_INCREMENT,//将number设为自增字段  `USER_NAM ...

  3. CUBRID学习笔记 9 创建示例数据库

    如果你安装的时候没有装数据库,可以后期装 其实和上文基本差不多. cd ~ mkdir CUBRID_databases cd CUBRID_databases mkdir demodb cd dem ...

  4. android上让我放弃使用wstring来操作中英文字符串 转

    android上让我放弃使用wstring来操作中英文字符串 2013-08-07 16:37:24|  分类: cocos2d|举报|字号 订阅     项目需要,需要对中英文字符串进行遍历修改等, ...

  5. ZOJ-2342 Roads 二分图最小权值覆盖

    题意:给定N个点,M条边,M >= N-1.已知M条边都有一个权值,已知前N-1边能构成一颗N个节点生成树,现问通过修改这些边的权值使得最小生成树为前N条边的最小改动总和为多少? 分析:由于计算 ...

  6. iOS - UIActivityViewController

    前言 NS_CLASS_AVAILABLE_IOS(6_0) __TVOS_PROHIBITED @interface UIActivityViewController : UIViewControl ...

  7. RFC总结-SD模块

    1.客户主数据1.1 创建.修改客户主数据*该函数更新所有字段,X表用来新增和修改,Y表为删除  CALL FUNCTION 'SD_CUSTOMER_MAINTAIN_ALL'   EXPORTIN ...

  8. ip地址的组成（网络位+主机位）

    IP地址子网掩码都是32位的2进制,为了方便记忆转成10进制,通过子网掩码来区分网络位和主机位,子网掩码跟IP地址一一对应,子网掩码为1的是网络位,为0的是主机位.如:192.168.1.2 掩码25 ...

  9. MVC中Html.Listbox的用法实例

    要绑定listbox或dropdownlist前提是:必须是SelectItem类,例如: 因为Html.ListBox第二个绑定数据的参数要得类型为SelectList第一种:因为listbox可以 ...

  10. mybatis动态sql中的trim标签的使用

    trim标记是一个格式化的标记,可以完成set或者是where标记的功能,如下代码: 1. select * from user <trim prefix="WHERE" p ...