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. [SAP ABAP开发技术总结]字段符号FIELD-SYMBOLS

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

  2. hdu 4163 Stock Prices 水

    #include<bits/stdc++.h> using namespace std; #define ll long long #define pi (4*atan(1.0)) #de ...

  3. Intel微处理器学习笔记（五） 中断

    ▼ 中断是一个由硬件激发的过程,它中断当前正在执行的任何程序. ▼ 在Intel系列微处理器中,包括INTR和NMI(Non Maskable Interrupt)两个申请中断的引脚和一个响应INTR ...

  4. Java I/O NIO学习

    给出一个学习的链接讲的很全.. http://ifeve.com/java-nio-all/ 上边的是中文翻译的这里是原地址:http://tutorials.jenkov.com/java-nio/ ...

  5. Jsoup：解决java.net.UnknownHostException的问题

    Jsoup:解决java.net.UnknownHostException的问题 时间 2013-06-20 11:23:08  CSDN博客 原文  http://blog.csdn.net/xyw ...

  6. typeof升级版，可以识别出array、object、null、nan、[]、{}

    typeof 经常混淆array.object.null等,升级处理一下. 可以将这个函数放在common.js中使用. function getTypeName(v) { var v_str = J ...

  7. Android控件之CheckBox(复选框控件)

    一.有两种状态: 选中状态(true).未选中状态(false) 二.属性 android:id = "@+id/checkbox" android:layout_width=&q ...

  8. Java跟Javac，package与import

    今天讨论一下2个指令与2个关键字. 这次的没有IDE环境,直接在txt文本里编程,在cmd里编译运行,搞清楚java的文件结构,还有怎么设置编译器查找类的路径.首先是javac,有一个可带参数java ...

  9. PacBio & BioNano (Assembly and diploid architecture of an individual human genome via single-molecule technologies)

    Assembly and diploid architecture of an individual human genome via single-molecule technologies 文章链 ...

  10. c++ string 与 char 互转 以及base64

    c++ string 与 char 互转 很简单如下 ] = {'A','B','C','D','E'}; printf("%s\n",bts); //char to string ...