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>
