76Echarts - 散点图（Life Expectancy and GDP）
生活随笔
收集整理的這篇文章主要介紹了
76Echarts - 散点图（Life Expectancy and GDP）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果圖
源代碼
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="js/echarts.min.js"></script></head><body><!-- 為ECharts準備一個具備大小（寬高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById('main'));var option;myChart.showLoading();$.get('data/asset/data/life-expectancy.json', function(data) {myChart.hideLoading();var itemStyle = {normal: {opacity: 0.8,shadowBlur: 10,shadowOffsetX: 0,shadowOffsetY: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}};var sizeFunction = function(x) {var y = Math.sqrt(x / 5e8) + 0.1;return y * 80;};// Schema:var schema = [{name: 'Income',index: 0,text: '人均收入',unit: '美元'},{name: 'LifeExpectancy',index: 1,text: '人均壽命',unit: '歲'},{name: 'Population',index: 2,text: '總人口',unit: ''},{name: 'Country',index: 3,text: '國家',unit: ''}];option = {baseOption: {timeline: {axisType: 'category',orient: 'vertical',autoPlay: true,inverse: true,playInterval: 1000,left: null,right: 0,top: 20,bottom: 20,width: 55,height: null,label: {normal: {textStyle: {color: '#999'}},emphasis: {textStyle: {color: '#fff'}}},symbol: 'none',lineStyle: {color: '#555'},checkpointStyle: {color: '#bbb',borderColor: '#777',borderWidth: 2},controlStyle: {showNextBtn: false,showPrevBtn: false,normal: {color: '#666',borderColor: '#666'},emphasis: {color: '#aaa',borderColor: '#aaa'}},data: []},backgroundColor: '#404a59',title: [{text: data.timeline[0],textAlign: 'center',left: '63%',top: '55%',textStyle: {fontSize: 100,color: 'rgba(255, 255, 255, 0.7)'}}, {text: '各國人均壽命與GDP關系演變',left: 'center',top: 10,textStyle: {color: '#aaa',fontWeight: 'normal',fontSize: 20}}],tooltip: {padding: 5,backgroundColor: '#222',borderColor: '#777',borderWidth: 1,formatter: function(obj) {var value = obj.value;return schema[3].text + '：' + value[3] + '<br>' +schema[1].text + '：' + value[1] + schema[1].unit + '<br>' +schema[0].text + '：' + value[0] + schema[0].unit + '<br>' +schema[2].text + '：' + value[2] + '<br>';}},grid: {top: 100,containLabel: true,left: 30,right: '110'},xAxis: {type: 'log',name: '人均收入',max: 100000,min: 300,nameGap: 25,nameLocation: 'middle',nameTextStyle: {fontSize: 18},splitLine: {show: false},axisLine: {lineStyle: {color: '#ccc'}},axisLabel: {formatter: '{value} $'}},yAxis: {type: 'value',name: '平均壽命',max: 100,nameTextStyle: {color: '#ccc',fontSize: 18},axisLine: {lineStyle: {color: '#ccc'}},splitLine: {show: false},axisLabel: {formatter: '{value} 歲'}},visualMap: [{show: false,dimension: 3,categories: data.counties,calculable: true,precision: 0.1,textGap: 30,textStyle: {color: '#ccc'},inRange: {color: (function() {var colors = ['#bcd3bb', '#e88f70', '#edc1a5', '#9dc5c8', '#e1e8c8', '#7b7c68', '#e5b5b5', '#f0b489', '#928ea8', '#bda29a'];return colors.concat(colors);})()}}],series: [{type: 'scatter',itemStyle: itemStyle,data: data.series[0],symbolSize: function(val) {return sizeFunction(val[2]);}}],animationDurationUpdate: 1000,animationEasingUpdate: 'quinticInOut'},options: []};for(var n = 0; n < data.timeline.length; n++) {option.baseOption.timeline.data.push(data.timeline[n]);option.options.push({title: {show: true,'text': data.timeline[n] + ''},series: {name: data.timeline[n],type: 'scatter',itemStyle: itemStyle,data: data.series[n],symbolSize: function(val) {return sizeFunction(val[2]);}}});}myChart.setOption(option);});myChart.setOption(option);</script></body></html>總結
以上是生活随笔為你收集整理的76Echarts - 散点图（Life Expectancy and GDP）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 市场调研-全球与中国Mini-USB数据
- 下一篇： jmeter基础之MD5加密