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）相关推荐

万字长文 | 超全代码详解Python制作精美炫酷图表教程
本文转自『读芯术』生活阶梯(幸福指数)与人均GDP(金钱)正相关的正则图本文将探讨三种用Python可视化数据的不同方法.以可视化<2019年世界幸福报告>的数据为例,本文用Gapmi ...
echarts属性，常用图表详解
目录 a.折线图 b.柱状图 c.堆叠柱状图 d.饼图 e.南丁格尔玫瑰图 f.基础雷达图 g.数据聚合图 h.气泡图 i.k线图 j.基础盒须图 k.漏斗图 l.仪表图基础属性 // 标题配置ti ...
用Tableau实现动画数据可视化
作者|PRANAV DAR 编译|VK 来源|Analytics Vidhya 概述动画可视化是一种艺术,它很容易在Tableau中创造出来我们将在这里使用开源数据集,并在Tableau中创建自己 ...
代码详解：如何用Python快速制作美观、炫酷且有深度的图表
全文共12231字,预计学习时长35分钟生活阶梯(幸福指数)与人均GDP(金钱)正相关的正则图本文将探讨三种用Python可视化数据的不同方法. 以可视化 <2019年世界幸福报告> ...
matplotlib可视化_EDA：Geopandas，Matplotlib和Bokeh中的可视化
matplotlib可视化 Nowadays, everyone is immersed with plenty of data from news sources, cellphones, lapt ...
echarts基本图例
1.仪表盘 option = {tooltip : {formatter: "{a} <br/>{b} : {c}%"},legend: {left: 'center' ...
【3数据可视化】基于vue的动态数据低代码可视化实现
目录 1.数据科学的产业升级 2.数据可视化的痛点 2.1 数据分析师 2.2 想提升的非技术人员 3.数据可视如何简单化 3.1 数据部分 3.1.1 代码需求 3.1.2 无代码需求 3.2 图表 ...
Numpy 和Pandas进行一维数据分析笔记
Numpy and Pandas 本节课中,我们主要讨论使用Numpy和pandas分析一维数据,比如电子数据表的一个单列. 使用到的数据集:Gapminder网站提供 1.不同国家的就业数据–emp ...
优达学城Numpy与Pandas笔记
此篇为优达学城数据分析入门第二课笔记网址基本操作 import numpy as np# First 20 countries with employment data countries = np ...

76Echarts - 散点图（Life Expectancy and GDP）

效果图

源代码

76Echarts - 散点图（Life Expectancy and GDP）相关推荐

最新文章

热门文章