echarts 时间曲线图_echarts的时间线图表

1

2

3

4

5

6

7

8

9

10

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] + '
'

126 + schema[1].text + '：' + value[1] + schema[1].unit + '
'

127 + schema[0].text + '：' + value[0] + schema[0].unit + '
'

128 + schema[2].text + '：' + value[2] + '
';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 returncolors.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

260

261