echarts的时间线图表 

  1 <!DOCTYPE html>
  2     <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <script src="jquery.js"></script>
  6         <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
  7     </head>
  8     <body>
  9     <div id="main" style="width: 600px;height:400px;"></div>
 10     <script>
 11         var myChart = echarts.init(document.getElementById('main'));
 12         myChart.showLoading();
 13         $.ajax({
 14             url:'./data1.json',
 15             dataType:'json',
 16             success:function (data) {
 17                 myChart.hideLoading()
 18                 var itemStyle = {
 19                     normal: {
 20                         opacity: 0.8,
 21                         shadowBlur: 10,
 22                         shadowOffsetX: 0,
 23                         shadowOffsetY: 0,
 24                         shadowColor: 'rgba(0, 0, 0, 0.5)'
 25                     }
 26                 };
 27 
 28 
 29                 var sizeFunction = function (x) {
 30                     var y = Math.sqrt(x / 5e8) + 0.1;
 31                     return y * 80;
 32                 };
 33 
 34 
 35                 // Schema:
 36                 var schema = [
 37                     {name: 'Income', index: 0, text: '人均收入', unit: '美元'},
 38                     {name: 'LifeExpectancy', index: 1, text: '人均寿命', unit: '岁'},
 39                     {name: 'Population', index: 2, text: '总人口', unit: ''},
 40                     {name: 'Country', index: 3, text: '国家', unit: ''}
 41                 ];
 42 
 43                 option = {
 44                     baseOption: {
 45                         timeline: {//时间线
 46                             axisType: 'category',//轴的类型，value是数值轴；category是类目轴；
 47                             orient: 'vertical',//摆放方式；vertical/horizontal
 48                             autoPlay: true,//自动播放
 49                             inverse: false,//是否反方向放置timeline;//时间轴从下往上了
 50                             playInterval: 1000,//播放跳动的间隔
 51                             left: null,//timeline组件离容器左侧的距离
 52                             right: 0,
 53                             top: 20,
 54                             bottom: 20,
 55                             width: 55,//timeline的宽度；
 56                             height: null,//timeline的高度；
 57                             label: {//轴的文本标签；
 58                                 normal: {
 59                                     textStyle: {
 60                                         color: '#999'
 61                                     }
 62                                 },
 63                                 emphasis: {//文本高亮的样式：如鼠标悬浮的时候；
 64                                     textStyle: {
 65                                         color: '#fff'
 66                                     }
 67                                 }
 68                             },
 69                             symbol: 'diamond',//timeline标记的图形；包括circle,rect,roundRect,triangle,diamond,pin,arrow,none;可以通过‘image://url"设置为图片
 70                             lineStyle: {
 71                                 color:'yellow'
 72                             },
 73                             checkpointStyle: {//当前项的checkpoint的样式，包括circle,rect,roundRect,triangle,diamond,pin,arrow,none
 74                                 color: '#bbb',
 75                                 borderColor: '#777',
 76                                 borderWidth: 2
 77                             },
 78                             controlStyle: {//控制按钮的样式；包括播放/前进/后退按钮
 79                                 showNextBtn: false,//是否显示播放按钮；
 80                                 showPrevBtn: false,//是否显示后退按钮；
 81                                 showPlayBtn:true,//是否显示播放按钮
 82                                 normal: {
 83                                     color: '#666',
 84                                     borderColor: '#666'
 85                                 },
 86                                 emphasis: {
 87                                     label:false,
 88                                     color: '#666',
 89                                     borderColor: '#aaa'
 90                                 }
 91                             },
 92                             data: []//timeline的数据；Array的每一项，可以是直接的数值。如果需要对每个数据项单独进行样式定义，则数据项写成object;
 93                         },
 94                         backgroundColor: '#404a59',
 95                         title: [{
 96                             text: data.timeline[0],
 97                             textAlign: 'center',
 98                             left: '63%',
 99                             top: '55%',
100                             textStyle: {
101                                 fontSize: 100,
102                                 color: 'rgba(255, 255, 255, 0.7)'
103                             }
104                         }, {
105                             text: '各国人均寿命与GDP关系演变',
106                             left: 'center',
107                             top: 10,
108                             textStyle: {
109                                 color: '#aaa',
110                                 fontWeight: 'normal',
111                                 fontSize: 20
112                             }
113                         }],
114                         tooltip: {//提示框组件；提示框组件可以设置在很多地方；
115                             //设置全局：tooltop;设置坐标系中grid.tooltip.polar.tooltip/single.tooltop;
116                             // 设置在系列中：series.tooltip；可以设置在系列的每个数据项中series.data.tooltip
117                             show:true,//是否显示
118                             trigger:'item',//触发方式。item是数据项图形触发；axis坐标轴触发；none什么都不触发；
119                             padding: 5,
120                             backgroundColor: '#222',
121                             borderColor: '#777',
122                             borderWidth: 1,
123                             formatter: function (obj) {
124                                 var value = obj.value;
125                                 return schema[3].text + '：' + value[3] + '<br>'
126                                     + schema[1].text + '：' + value[1] + schema[1].unit + '<br>'
127                                     + schema[0].text + '：' + value[0] + schema[0].unit + '<br>'
128                                     + schema[2].text + '：' + value[2] + '<br>';
129                             }
130                         },
131                         grid: {//直角坐标系中绘图网格；
132                             show:false,//
133                             zlevel:1,//所有图形的分层；
134                             top: 200,
135                             containLabel: true,//grid区域是否包含坐标轴的刻度标签；
136                             left: 30,//grid组件离容器左侧的距离，可以百分比，可以30这样的像素；可以top/middle/bottom
137                             right: '110',
138                             width:'auto',//宽度默认自适应
139                         },
140                         xAxis: {//grid坐标系中的x轴；
141                             type: 'log',//value:数值轴；category:类目轴；time时间轴； log:对数轴
142                             name: '人均收入',//名字
143                             max: 100000,
144                             min: 300,//坐标轴刻度最小值。
145                             nameGap: 45,//坐标轴名称与轴线之间的距离；
146                             nameLocation: 'middle',//名字位置
147                             nameTextStyle: {//坐标轴名字的文字样式
148                                 fontSize: 18
149                             },
150                             splitLine: {//坐标轴在grid区域中的分割线；
151                                 show: false,
152                             },
153                             axisLine: {//坐标轴刻度标签的相关设置；
154                                 inside:false,//刻度标签是否朝内；
155                                 rotate:0,//刻度标签旋转的角度
156                                 margin:8,//刻度标签与轴线之间的距离；
157                                 // formatter:'{value} kg',刻度标签的内容格式，支持模板字符串和回掉函数两种格式；
158                                 lineStyle: {
159                                     color: '#ccc'
160                                 }
161                             },
162                             axisLabel: {//标签
163                                 formatter: '{value} $'
164                             }
165                         },
166                         yAxis: {
167                             type: 'value',
168                             name: '平均寿命',
169                             max: 100,
170                             nameTextStyle: {
171                                 color: '#ccc',
172                                 fontSize: 18
173                             },
174                             axisLine: {//坐标轴的刻度线
175                                 lineStyle: {
176                                     color: '#ccc'
177                                 }
178                             },
179                             splitLine: {//在grid中的分割线
180                                 show: false
181                             },
182                             axisLabel: {//标签
183                                 formatter: '{value} 岁'
184                             }
185                         },
186                         visualMap: [//visualMap是视觉映射组件，用于进行视觉编码，视觉元素可以是：
187                             {
188                                 type:'piecewise',//piecewise是分段型的，continuoous是连续型的；
189                                 show: false,
190                                 dimension: 3,//seires.data的第四个维度，即value[3]被映射；
191                                 categories: data.counties,
192                                 calculable: true,
193                                 precision: 0.1,//数据展示的小数精度
194                                 textGap: 30,//两端文字主题之间的距离；
195                                 textStyle: {
196                                     color: '#ccc'
197                                 },
198                                 inRange: {// 选中范围中的视觉配置
199                                     color: (function () {
200                                         var colors = ['#bcd3bb', '#e88f70', '#edc1a5', '#9dc5c8', '#e1e8c8', '#7b7c68', '#e5b5b5', '#f0b489', '#928ea8', '#bda29a'];//定义了图形颜色映射的颜色列表，数据最小映射到#bcd3bb上，最大映射到#bda29a'上，其余的自动先行计算
201                                         return colors.concat(colors);
202                                     })()
203                                 }
204                             }
205                         ],//视觉映射
206                         series: [//系列列表，每个系列通过type决定自己的图表类型；
207                             {
208                                 type: 'bar',
209                                 itemStyle: itemStyle,
210                                 data: data.series[0],
211                                 symbolSize: function(val) {
212                                     return sizeFunction(val[2]);
213                                 }
214                             }
215                         ],
216                         animationDurationUpdate: 1000,//动画更新时间
217                         animationEasingUpdate: 'quinticInOut'//初始动画的缓动效果
218                     },
219                     options: []
220                 };
221 
222 
223 
224 
225 
226 
227 
228                 for (var n = 0; n < data.timeline.length; n++) {
229                     option.baseOption.timeline.data.push(data.timeline[n]);
230 
231 
232 
233 
234                     option.options.push({//timeline需要操作多个option,传入echarts的option是一个集合多个原子的option的复合option;
235                         title: {//标题
236                             show: true,
237                             'text': data.timeline[n] + ''
238                         },
239                         series: {//系列，可以有多尔芬系列；
240                             name: data.timeline[n],
241                             type: 'scatter',
242                             itemStyle: itemStyle,
243                             data: data.series[n],
244                             symbolSize: function(val) {
245                                 return sizeFunction(val[2]);
246                             }
247                         }
248                     });
249 
250                 }
251 
252 
253                 myChart.setOption(option);
254             },
255             error:function () {
256                 console.log('ajax请求出现错误了')
257             }
258         })
259     </script>
260     </body>
261     </html>

 

 

posted @ 2018-09-19 10:01  前端极客  阅读(15932)  评论(0)  编辑  收藏  举报