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. [Effective Java]第五章 泛型

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  2. POJ 1979 Red and Black （红与黑）

    POJ 1979 Red and Black (红与黑) Time Limit: 1000MS    Memory Limit: 30000K Description 题目描述 There is a ...

  3. python_way day14 HTML

    python_way day 14 HTML 一,标签 二.特殊字符 三,css <!DOCTYPE html> <html lang="en"> < ...

  4. 如何在eclipse jee中创建Maven project并且转换为Dynamic web project

    如何在eclipse jee中创建Maven project并且转换为Dynamic web project 注意:该文档只针对以下eclipse版本,如图 为了方便,我将我本地的压缩包放在了微云网盘 ...

  5. [转载] 文件系统vs对象存储——选型和趋势

    原文: http://www.testlab.com.cn/Index/article/id/1082.html#rd?sukey=fc78a68049a14bb2699b479d5e730f6f45 ...

  6. [转载] 一致性问题和Raft一致性算法

    原文: http://daizuozhuo.github.io/consensus-algorithm/ raft 协议确实比 paxos 协议好懂太多了. 一致性问题 一致性算法是用来解决一致性问题 ...

  7. python利用xmlrpc方式对odoo数据表进行增删改查操作

    # -*- encoding: utf-8 -*- import xmlrpclib #导入xmlrpc库,这个库是python的标准库. username ='admin' #用户登录名 pwd = ...

  8. Javascript设计模式之创建对象的灵活性

    传统的 /* Anim class */ var Anim = function () {}; Anim.prototype.start = function () { console.log(&qu ...

  9. Object Pascal 方法与技巧

    4 方法与技巧 4.1 设置代码模板 代码模板是Delphi 的代码感知特性的一种,通过它可以快速.高效和正确地输入代码.代码模板将一些常用的语句块保存在模板中,然后程序员只要在代码编辑器中按下“Ct ...

  10. POCO C++库学习和分析——任务

    1.任务的定义 任务虽然在Poco::Foundation库的目录中被单独划出来,其实可以被看成线程的应用,放在线程章节.首先来看一下Poco中对任务的描述: *task主要应用在GUI和Sever程 ...