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=" 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 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 '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>
