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