数据可视化——ECharts笔记整理

1.1 ECharts的介绍 Echarts是一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

1.2 ECharts的特点

丰富的可视化类型

折线图、柱状图、饼图、K线图只有你想不到，没有它做不到

多种数据格式支持

key-value数据格式二维表TypedArray格式

流数据的支持

流数据的动态渲染增量渲染技术

移动端优化 跨平台使用 绚丽的特性 三维可视化 ……

小结 ECharts能满足绝大多数可视化图表实现

兼容性强使用方便功能强大

实现数据可视化的最佳选择之一

2.1 ECharts的基本使用

5分钟上手ECharts

步骤1：引入echarts.js文件步骤2：准备一个呈现图表的盒子步骤3：初始化echarts实例对象步骤4：准备配置项步骤5：将配置项设置给echarts实例对象 <!--步骤2：准备一个呈现图表的盒子--> <div style="width: 600px;height: 400px;"> </div> <!--步骤1：引入echarts.js文件--> <script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //步骤3：初始化echarts实例对象 //参数，dom，决定图表最终呈现的位置 var mCharts = echarts.init(document.querySelector('div')); //步骤4：准备配置项 var option = { xAxis:{ type:'category', data:['小橙','小蓝','小青'], }, yAxis:{ type:'value' }, series:[ { name:'数学', type:'bar', data:[70,90,87] } ] } //步骤5：将配置项设置给echarts实例对象 mCharts.setOption(option); </script>

2.3 小结 快速上手ECharts的步骤

引入准备设置

配置项的使用

除了配置项会变化之外，其他的代码都是固定的配置项的学习和使用应该参照官方文档和示例

2.4 ECharts的基本使用

相关配置

xAxis:直角坐标系中的x轴yAxis：直角坐标系中的y轴series：系列列表。每个系列通过type决定自己的图表类型 //参数，dom，决定图表最终呈现的位置 var mCharts = echarts.init(document.querySelector('div')); //步骤4：准备配置项 var option = { title:{ text:'成绩', link:'https://www.baidu.com', textStyle:{ color:'red' } }, xAxis:{ type:'category',//类目轴 data:['小橙','小蓝','小青'], }, yAxis:{ type:'value' //数值轴 }, series:[ { name:'数学', type:'line', data:[70,90,87] } ] } //步骤5：将配置项设置给echarts实例对象 mCharts.setOption(option);

3. ECharts常用图表

7大图表

图表1：柱状图图表2：折线图图表3：散点图图表4：饼图图表5：地图图表6：雷达图图表7：仪表盘图

3.1 柱状图 图表1：柱状图 期末数学成绩如下： 小红：88 小橙：92 小黄：63 小绿：77 小青：94 小蓝：80 小紫：72

实现步骤

Echarts最基本的代码结构： 引入js文件，DOM容器，初始化对象，设置option

x轴数据 数组1：[‘小红’,‘小橙’,‘小黄’,‘小绿’,‘小青’,‘小蓝’,‘小紫’]

y轴数据： 数组2：[88,92,63,77,94,80,72]

图标类型： 在series下设置type:bar

//步骤3：初始化echarts实例对象 //参数，dom，决定图表最终呈现的位置 var mCharts = echarts.init(document.querySelector('div')); var xDataArr = ['小红','小橙','小黄','小绿','小青','小蓝','小紫']; var yDataArr = [88,92,63,77,94,80,72,86]; //步骤4：准备配置项 var option = { xAxis:{ type:'category',//类目轴 data:xDataArr, }, yAxis:{ type:'value' //数值轴 }, series:[ { name:'数学', type:'bar', data:yDataArr } ] } //步骤5：将配置项设置给echarts实例对象 mCharts.setOption(option);

常见效果

标记：最大值 最小值 平均值 MarkPoint markLine

显示：数值显示 柱宽度 横向柱状图 label barWidth 更改x轴和y轴的角色

var option = { xAxis:{ type:'value', }, yAxis:{ type:'category' , data:xDataArr }, series:[ { name:'数学', type:'bar', markPoint:{ data:[ { type:'max',name:'最大值' }, { type:'min',name:'最小值' } ] }, markLine:{ data:[ { type:'average',name:'平均值' } ] }, label:{ show:true, rotate:60, position:'top' }, barWidth:'30%', data:yDataArr } ] }

小结

基本的柱状图

基本的代码结构x轴和y轴的数据series中的type设置为bar

柱状图常见效果

最大值\最小值 MarkPoint平均值 markLine数值的显示 label柱的宽度 barWidth

柱状图的特点

柱状图描述的是分类数据，呈现的是每一个分类中有多少，通过柱状图，可以很清晰的看出每个分类数据的排名情况。

通用配置

通用配置指的就是任何一种类型的图表都能使用的配置

标题：titile提示：tooltip工具按钮：toolbox图例：legend

通用配置titile

文字样式

textStyle

标题边框 borderWidth、borderColor、borderRadius

标题位置 left 、 top 、 right 、 bottom

var option = { title:{ text:'成绩展示', textStyle:{ color:'red' }, borderWidth:5, borderColor:'pink', borderRadius:5, left:50, top:10 }, xAxis:{ type:'category' , data:xDataArr }, yAxis:{ type:'value', }, series:[ { name:'数学', type:'bar', data:yDataArr } ] }

通用配置tooltip       tooltip：提示框组件，用于配置鼠标滑过或点击图表时的显示框

触发类型：trigger item 、 axis触发时机：triggerOn mouseover 、 click格式化：formatter 字符串模板 、 回调函数 var option = { title:{ text:'成绩展示', textStyle:{ color:'red' }, borderWidth:5, borderColor:'pink', borderRadius:5, left:50, top:10 }, tooltip:{ // trigger:'item' trigger:'axis', triggerOn:'click', // formatter:'{b} 的成绩是{c}' formatter:function(arg){ return arg[0].name +' 的分数是：'+ arg[0].data; } }, xAxis:{ type:'category' , data:xDataArr }, yAxis:{ type:'value', }, series:[ { name:'数学', type:'bar', data:yDataArr } ] }

通用配置toolbox       toolbox：ECharts提供的工具栏

内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具显示工具栏按钮feature saveAsImage 、 dataView 、 restore 、 dataZoom、magicType var option = { title:{ text:'成绩展示', textStyle:{ color:'red' }, borderWidth:5, borderColor:'pink', borderRadius:5, left:50, top:10 }, tooltip:{ // trigger:'item' trigger:'axis', triggerOn:'click', // formatter:'{b} 的成绩是{c}' formatter:function(arg){ return arg[0].name +' 的分数是：'+ arg[0].data; } }, toolbox:{ feature:{ saveAsImage:{},//导出图片 dataView:{},//数据视图 restore:{}, //重置 dataZoom:{}, //区域缩放 magicType:{ type:['bar','line'] }//动态图表类型的切换 } }, xAxis:{ type:'category' , data:xDataArr }, yAxis:{ type:'value', }, series:[ { name:'数学', type:'bar', data:yDataArr } ] }

通用配置legend       legend：图例，用于筛选系列，需要和series配合使用

legend中的data是一个数组legend中的data的值需要和series数组中某组数据的name值一致 var mCharts = echarts.init(document.querySelector('div')); var xDataArr = ['小红','小橙','小黄','小绿','小青','小蓝','小紫']; var yDataArr1 = [88,92,63,77,94,80,72,86]; var yDataArr2 = [93,60,85,90,77,92,75,88]; //步骤4：准备配置项 var option = { title:{ text:'成绩展示', textStyle:{ color:'red' }, borderWidth:5, borderColor:'pink', borderRadius:5, left:50, top:10 }, tooltip:{ // trigger:'item' trigger:'axis', triggerOn:'click', // formatter:'{b} 的成绩是{c}' formatter:function(arg){ return arg[0].name +' 的分数是：'+ arg[0].data; } }, toolbox:{ feature:{ saveAsImage:{},//导出图片 dataView:{},//数据视图 restore:{}, //重置 dataZoom:{}, //区域缩放 magicType:{ type:['bar','line'] }//动态图表类型的切换 } }, legend:{ data:['数学','语文'] }, xAxis:{ type:'category' , data:xDataArr }, yAxis:{ type:'value', }, series:[ { name:'数学', type:'bar', data:yDataArr1 }, { name:'语文', type:'bar', data:yDataArr2 } ] }

3.2 折线图

图表2：折线图 方便面销量如下： 1月：3000 2月：2800 3月：900 4月：1000 5月：800 6月：700 7月：1400 8月：1300 9月：900 10月：1000 11月：800 12月：600

实现步骤

Echarts最基本的代码结构： 引入js文件，DOM容器，初始化对象，设置option

x轴数据 数组1：[‘1月’,‘2月’,‘3月’,‘4月’,‘5月’,‘6月’,‘7月’,‘8月’,‘9月’,‘10月’,‘11月’,‘12月’]

y轴数据： 数组2：[3000,2800,900,1000,800,700,1400，1300,900，1000，800,600]

图标类型： 在series下设置type:line

var mCharts = echarts.init(document.querySelector('div')); var xDataArr = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']; var yDataArr = [3000,2800,900,1000,800,700,1400,1300,900,1000,800,600]; //步骤4：准备配置项 var option = { xAxis:{ type:'category' , data:xDataArr }, yAxis:{ type:'value', }, series:[ { name:'方便面', type:'line', data:yDataArr } ] } //步骤5：将配置项设置给echarts实例对象 mCharts.setOption(option);

常见效果

标记：最大值 最小值 平均值 标注区间 markPoint 、 markLine 、 markArea

线条控制：平滑 风格 smooth 、 lineStyle

填充风格 areaStyle

紧挨边缘 boundaryGap

缩放：脱离0值比例 scale

堆叠图

3.3 散点图

图表3：散点图

散点图可以帮助我们推断出变量间的相关性 比如身高和体重的关系

实现步骤

ECharts最基本的代码结构： 引入js文件，DOM容器，初始化对象，设置optionx轴数据和y轴的数据：二维数组 数组1：[[身高1，体重1],[身高2,体重2],[身高3,体重3]…]图表类型： 在series下设置type：scatter xAxis和yAxis的type都要设置为value调整： 将坐标轴都设置为脱离0值比例，scale var data = [ {"sex":"female","height":162.2,"weight":59}, {"sex":"male","height":178.8,"weight":75}, {"sex":"female","height":158.3,"weight":45}, {"sex":"female","height":156.8,"weight":38}, {"sex":"male","height":123.5,"weight":32}, {"sex":"male","height":188.8,"weight":80}, {"sex":"female","height":185.3,"weight":76}, {"sex":"male","height":159.2,"weight":46}, {"sex":"female","height":177.2,"weight":56}, ]; var axisData = []; for(var i=0;i<data.length;i++){ var height = data[i].height; var weight = data[i].weight; var newArr = [height,weight]; axisData.push(newArr); } var mCharts = echarts.init(document.querySelector("div")); var option ={ xAxis:{ type:'value', scale:true }, yAxis:{ type:'value', scale:true }, series:[ { type:'scatter', data:axisData } ] } mCharts.setOption(option);

常见效果

气泡图效果 散点的大小不同 symbolSize 散点的颜色不同 itemStyle.color var data = [ {"sex":"female","height":162.2,"weight":59}, {"sex":"male","height":178.8,"weight":75}, {"sex":"female","height":158.3,"weight":45}, {"sex":"female","height":156.8,"weight":38}, {"sex":"male","height":123.5,"weight":32}, {"sex":"male","height":188.8,"weight":80}, {"sex":"female","height":185.3,"weight":76}, {"sex":"male","height":159.2,"weight":46}, {"sex":"female","height":177.2,"weight":56}, {"sex":"male","height":178.8,"weight":100}, {"sex":"female","height":152.3,"weight":45}, {"sex":"female","height":126.8,"weight":38}, {"sex":"male","height":193.5,"weight":120}, {"sex":"male","height":155.8,"weight":80}, {"sex":"female","height":165.3,"weight":76}, {"sex":"male","height":159.2,"weight":46}, {"sex":"female","height":167.2,"weight":88}, ]; var axisData = []; for(var i=0;i<data.length;i++){ var height = data[i].height; var weight = data[i].weight; var newArr = [height,weight]; axisData.push(newArr); } var mCharts = echarts.init(document.querySelector("div")); var option ={ xAxis:{ type:'value', scale:true }, yAxis:{ type:'value', scale:true }, series:[ { type:'scatter', data:axisData, //symbolSize:20 symbolSize:function(arg){ var height = arg[0]/100; var weight = arg[1]; //bmi = 体重kg/(身高m*身高m) 大于28，就代表肥胖 var bmi = weight / (height * height); if(bmi > 28){ return 20; } return 5 }, itemStyle:{ color:function(arg){ var height = arg.data[0]/100; var weight = arg.data[1]; //bmi = 体重kg/(身高m*身高m) 大于28，就代表肥胖 var bmi = weight / (height * height); if(bmi > 28){ return 'red'; } return 'gold' } } } ] } mCharts.setOption(option);

涟漪动画效果 type:effectScatter showEffectOn:‘emphasis’ rippleEffect:{} var data = [ {"sex":"female","height":162.2,"weight":59}, {"sex":"male","height":178.8,"weight":75}, {"sex":"female","height":158.3,"weight":45}, {"sex":"female","height":156.8,"weight":38}, {"sex":"male","height":123.5,"weight":32}, {"sex":"male","height":188.8,"weight":80}, {"sex":"female","height":185.3,"weight":76}, {"sex":"male","height":159.2,"weight":46}, {"sex":"female","height":177.2,"weight":56}, {"sex":"male","height":178.8,"weight":100}, {"sex":"female","height":152.3,"weight":45}, {"sex":"female","height":126.8,"weight":38}, {"sex":"male","height":193.5,"weight":120}, {"sex":"male","height":155.8,"weight":80}, {"sex":"female","height":165.3,"weight":76}, {"sex":"male","height":159.2,"weight":46}, {"sex":"female","height":167.2,"weight":88}, ]; var axisData = []; for(var i=0;i<data.length;i++){ var height = data[i].height; var weight = data[i].weight; var newArr = [height,weight]; axisData.push(newArr); } var mCharts = echarts.init(document.querySelector("div")); var option ={ xAxis:{ type:'value', scale:true }, yAxis:{ type:'value', scale:true }, series:[ { type:'effectScatter', showEffectOn:'emphasis',//render emphasis rippleEffect:{ scale:8 }, data:axisData, //symbolSize:20 symbolSize:function(arg){ var height = arg[0]/100; var weight = arg[1]; //bmi = 体重kg/(身高m*身高m) 大于28，就代表肥胖 var bmi = weight / (height * height); if(bmi > 28){ return 20; } return 10; }, itemStyle:{ color:function(arg){ var height = arg.data[0]/100; var weight = arg.data[1]; //bmi = 体重kg/(身高m*身高m) 大于28，就代表肥胖 var bmi = weight / (height * height); if(bmi > 28){ return 'red'; } return 'pink' } } } ] } mCharts.setOption(option);

小结 基本的散点图

基本的代码结构x轴和y轴的数据，是一个二维数组series中的type设置为scatterxAxis和yAxis中的type设置为value

散点图常见效果

气泡图涟漪效果

散点图特点

散点图可以帮助我们推断出不同维度数据之间的相关性散点图也经常用在地图的标注上

3.4 饼图

图表4：饼图 小明今年在各个网购平台的消费金额： 淘宝：11231 京东：22673 唯品会：6123 1号店：8989 聚美优品：6700

实现步骤

ECharts最基本的代码结构： 引入js文件，DOM容器，初始化对象，设置option数据准备： {name:“淘宝”,value:11231}, {name:“京东”,value:22673}, {name:“唯品会”,value:6123}, {name:“1号店”,value:8989}, {name:“聚美优品”,value:6700}图表类型： 在series下设置type：pie var mCharts = echarts.init(document.querySelector("div")); //pieData就是需要设置给饼图的数据，数组，数组中包含一个又一个对象，每一个对象中，需要有name和value var pieData =[ {name:'淘宝',value:11231}, {name:'京东',value:22673}, {name:'唯品会',value:6123}, {name:'1号店',value:8989}, {name:'聚美优品',value:6700}, ]; var option = { series:[ { type:'pie', data:pieData } ] } mCharts.setOption(option);

常见效果

显示数值 label.formatter圆环 设置两个半径 radius:[‘50%’,‘75%’]南丁格尔图 roseType:‘radius’选中效果 选中模式selectedMode:single\multiple 选中偏移量 selectedOffset：30 var mCharts = echarts.init(document.querySelector("div")); //pieData就是需要设置给饼图的数据，数组，数组中包含一个又一个对象，每一个对象中，需要有name和value var pieData =[ {name:'淘宝',value:11231}, {name:'京东',value:22673}, {name:'唯品会',value:6123}, {name:'1号店',value:8989}, {name:'聚美优品',value:6700}, ]; var option = { series:[ { type:'pie', data:pieData, label:{//饼图文字的显示 show:true,//显示文字 //formatter:'hehe'//决定文字显示的内容 formatter:function(arg){ // console.log(arg) return arg.name + '平台' + arg.value +'元\n' + arg.percent +'%'; } }, //radius:20 //饼图的半径 //radius:'20%' //百分比参照的是宽度和高度中较小的那一部分的一半来进行百分比设置 //radius:['50%','75%'] //第0个元素代表的是内圆的半径 第一个元素外圆的半径 roseType:'radius', //南丁格尔图 饼图的每一个区域的半径是不同的 //selectedMode:'single' //选中的效果，能够将选中的区域偏离圆点一小段距离 selectedMode:'multiple', selectedOffset:30 } ] } mCharts.setOption(option);

小结 基本的饼图

基本的代码结构数据是有name和value组成的对象所形成的数组series中的type设置为pie无须配置xAxis和YAxis

饼图常见效果

显示文字的格式化圆环南丁格尔图选中效果

饼图特点

饼图可以很好地帮助用户快速了解不同分类的数据的占比情况

3.5 地图

图表5：地图

地图图表的使用方式

百度地图API 需要申请百度地图ak矢量地图 需要准备矢量地图数据

矢量地图的实现步骤

ECharts最基本的代码结构 引入js文件，DOM容器，初始化对象，设置option准备中国的矢量地图json文件，放到json/map/的目录下 china.json使用Ajax获取china.json $.get(‘json/map/china.json’,function(chinaJson){})在回调函数中往echarts全局对象注册地图的json数据 echarts.registerMap(‘chinaMap’,chinaJson);在geo下设置 type:‘map’ map:‘chinaMap’

常见配置

缩放拖动 roam名称显示 label初始缩放比例 zoom地图中心点 center <div style="width: 600px;height: 400px;"></div> <script type="text/javascript"> // 1.ECharts最基本的代码结构 // 2.准备中国的矢量地图json文件，放到json/map/的目录下 // 3.使用Ajax获取china.json // 4.在回调函数中往echarts全局对象注册地图的json数据 echarts.registerMap('chinaMap',矢量地图数据) // 5.在geo下设置typee:'map' ,map:'chinaMap' var mCharts = echarts.init(document.querySelector("div")); $.get('json/map/china.json',function(ret){ //ret就是中国的各个省份的矢量地图数据 echarts.registerMap('chinaMap',ret); var option ={ geo:{ type:'map', map:'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致 roam:true, //设置允许缩放以及拖动的效果 label:{ show:true //展示标签 }, zoom:1, //设置初始化的缩放比例 center:[87.617733,43.792818] //设置地图中心点的坐标 } } mCharts.setOption(option); })

常见效果

显示某个区域 1.加载改区域的矢量地图数据 2.通过registerMap注册到echarts全局对象中 3.指明geo配置下的type和map属性 4.通过zoom放大该区域 5.通过center定位中心点 // 1.ECharts最基本的代码结构 // 2.准备中国的矢量地图json文件，放到json/map/的目录下 // 3.使用Ajax获取china.json // 4.在回调函数中往echarts全局对象注册地图的json数据 echarts.registerMap('chinaMap',矢量地图数据) // 5.在geo下设置typee:'map' ,map:'chinaMap' var mCharts = echarts.init(document.querySelector("div")); $.get('json/map/hunan.json',function(ret){ //ret就是中国的各个省份的矢量地图数据 console.log(ret) echarts.registerMap('hunan',ret); var option ={ geo:{ type:'map', map:'hunan', //chinaMap需要和registerMap中的第一个参数保持一致 label:{ show:true //展示标签 }, zoom:1, //设置初始化的缩放比例 // center:[111.608019,26.434516] //设置地图中心点的坐标 } } mCharts.setOption(option); })

不同城市颜色不同 1.显示基本的中国地图 2.城市的空气质量数据设置给series 3.将series下的数据和geo关联起来      geoIndex:0、type:‘map’ 4.结合visualMap配合使用      min 、max 、inRange 、calculable var airData = [ { name: '北京', value: 39.92 }, { name: '天津', value: 39.13 }, { name: '上海', value: 31.22 }, { name: '重庆', value: 66 }, { name: '河北', value: 147 }, { name: '河南', value: 113 }, { name: '云南', value: 25.04 }, { name: '辽宁', value: 50 }, { name: '黑龙江', value: 114 }, { name: '湖南', value: 175 }, { name: '安徽', value: 117 }, { name: '山东', value: 92 }, { name: '新疆', value: 84 }, { name: '江苏', value: 67 }, { name: '浙江', value: 84 }, { name: '江西', value: 96 }, { name: '湖北', value: 273 }, { name: '广西', value: 59 }, { name: '甘肃', value: 99 }, { name: '山西', value: 39 }, { name: '内蒙古', value: 58 }, { name: '陕西', value: 61 }, { name: '吉林', value: 51 }, { name: '福建', value: 29 }, { name: '贵州', value: 71 }, { name: '广东', value: 38 }, { name: '青海', value: 57 }, { name: '西藏', value: 24 }, { name: '四川', value: 58 }, { name: '宁夏', value: 52 }, { name: '海南', value: 54 }, { name: '台湾', value: 88 }, { name: '香港', value: 66 }, { name: '澳门', value: 77 }, { name: '南海诸岛', value: 55 } ]; var mCharts = echarts.init(document.querySelector("div")); $.get('json/map/china.json',function(ret){ //ret就是中国的各个省份的矢量地图数据 echarts.registerMap('chinaMap',ret); var option ={ geo:{ type:'map', map:'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致 roam:true, //设置允许缩放以及拖动的效果 label:{ show:true //展示标签 }, }, series:[ { data:airData, geoIndex:0,//将空气质量的数据和第0个geo配置关联在一起 type:'map' } ], visualMap:{ min:0, max:300, inRange:{ color:['white','gold'] //控制颜色渐变的范围 }, calculable:true //出现滑块 } } mCharts.setOption(option); })

地图和散点图结合 1.给series下增加新的对象 2.准备好散点数据，设置给新的对象的data 3.配置新对象的type      type:effectScatter 4.让散点图使用地图坐标系统      coordinateSystem:‘geo’ 5.让涟漪的效果更加明显      rippleEffect:{           scale:10       } var airData = [ { name: '北京', value: 39.92 }, { name: '天津', value: 39.13 }, { name: '上海', value: 31.22 }, { name: '重庆', value: 66 }, { name: '河北', value: 147 }, { name: '河南', value: 113 }, { name: '云南', value: 25.04 }, { name: '辽宁', value: 50 }, { name: '黑龙江', value: 114 }, { name: '湖南', value: 175 }, { name: '安徽', value: 117 }, { name: '山东', value: 92 }, { name: '新疆', value: 84 }, { name: '江苏', value: 67 }, { name: '浙江', value: 84 }, { name: '江西', value: 96 }, { name: '湖北', value: 273 }, { name: '广西', value: 59 }, { name: '甘肃', value: 99 }, { name: '山西', value: 39 }, { name: '内蒙古', value: 58 }, { name: '陕西', value: 61 }, { name: '吉林', value: 51 }, { name: '福建', value: 29 }, { name: '贵州', value: 71 }, { name: '广东', value: 38 }, { name: '青海', value: 57 }, { name: '西藏', value: 24 }, { name: '四川', value: 58 }, { name: '宁夏', value: 52 }, { name: '海南', value: 54 }, { name: '台湾', value: 88 }, { name: '香港', value: 66 }, { name: '澳门', value: 77 }, { name: '南海诸岛', value: 55 } ]; var scatterData = [ { value: [117.283042, 31.86119] } ]; var mCharts = echarts.init(document.querySelector("div")); $.get('json/map/china.json',function(ret){ //ret就是中国的各个省份的矢量地图数据 echarts.registerMap('chinaMap',ret); var option ={ geo:{ type:'map', map:'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致 roam:true, //设置允许缩放以及拖动的效果 label:{ show:true //展示标签 }, }, series:[ { data:airData, geoIndex:0,//将空气质量的数据和第0个geo配置关联在一起 type:'map' }, { data:scatterData,//配置散点的坐标数据 type:'effectScatter', coordinateSystem:'geo', //指明散点使用的坐标系统 geo的坐标系统 rippleEffect:{ scale:10 //设置涟漪动画的缩放比例 } } ], visualMap:{ min:0, max:300, inRange:{ color:['white','gold'] //控制颜色渐变的范围 }, calculable:true //出现滑块 } } mCharts.setOption(option); })

小结

地图图表的两种使用方式

百度地图API矢量地图数据

地图的绘制

加载数据将数据注册给echarts全局对象配置geo

常见效果

缩放拖动/初始缩放比例/中心点visualMap和地图的结合散点图和地图的结合

地图特点

地图主要可以帮助我们从宏观的角度快速看出不同地理位置上数据的差异

3.6 雷达图

图表6：雷达图 有两台手机在5个方面的打分数据如下： 手机1 易用性80、功能90、拍照80、跑分82、续航90 手机2 易用性70、功能82、拍照75、跑分70、续航78

实现步骤

ECharts最基本的代码结构： 引入js文件，DOM容器，初始化对象，设置option定义各个维度的最大值 indicator：[{name:‘易用性’,max:100},…]准备具体产品的数据 data:[{name:‘手机1’,value:[80,90,80,82,90]},…]图表类型： 在series下设置type:radar var mCharts = echarts.init(document.querySelector("div")); // 各个维度的最大值 var dataMax = [ { name: '易用性', max: 100 }, { name: '功能', max: 100 }, { name: '拍照', max: 100 }, { name: '跑分', max: 100 }, { name: '续航', max: 100 } ]; var option ={ radar:{ indicator:dataMax//配置各个维度的最大值 }, series:[ { type:'radar', data:[ { name:'手机1', value:[80,90,80,82,90] }, { name:'手机2', value:[70,82,75,70,78] } ] } ] } mCharts.setOption(option);

常用配置

显示数值： label区域面积 areaStyle绘制类型 shape var mCharts = echarts.init(document.querySelector("div")); // 各个维度的最大值 var dataMax = [ { name: '易用性', max: 100 }, { name: '功能', max: 100 }, { name: '拍照', max: 100 }, { name: '跑分', max: 100 }, { name: '续航', max: 100 } ]; var option ={ radar:{ indicator:dataMax,//配置各个维度的最大值 shape:'polygon' //配置雷达图最外层的图形 circle polygon }, series:[ { type:'radar', label:{ show:true }, areaStyle:{}, data:[ { name:'手机1', value:[80,90,80,82,90] }, { name:'手机2', value:[70,82,75,70,78] } ] } ] } mCharts.setOption(option);

小结

雷达图的实现步骤

定义各个维度的最大值定义图表的类型

雷达图的特点

雷达图可以用来分析多个维度的数据与标准数据的对比情况

3.7 仪表盘

图表7：仪表盘图

仪表盘主要用在进度把控以及数据范围的监测

实现步骤

ECharts最基本的代码结构： 引入js文件，DOM容器，初始化对象，设置option准备数据，设置给series下的data data：[{value:97}]图表类型： 在series下设置type:gauge var mCharts = echarts.init(document.querySelector("div")); var option ={ series:[ { type:'gauge', data:[ { value:97 }//每一个对象就代表一个指针 ] } ] } mCharts.setOption(option);

常见效果

数值范围： max 、min多个指针： 增加data中的数组元素多个指针颜色差异 itemStyle var mCharts = echarts.init(document.querySelector("div")); var option ={ series:[ { type:'gauge', data:[ { value:97, itemStyle:{//指针的样式 color:'gold' //指针的颜色 } },//每一个对象就代表一个指针 { value:85, itemStyle:{ color:'gray' } } ], min:50 //min max 控制仪表盘数值范围 } ] } mCharts.setOption(option);

小结 仪表盘的实现步骤

准备数据定义图表的类型

仪表盘的特点

仪表盘可以更直观的表现出某个指标的进度或实际情况

3.8 七个图表小结 小结 各个图表的英文单词

barlinescatter/effectScatterpiemapradargauge

使用场景

柱状图：柱状图描述的是分类数据，呈现的是每一个分类中有多少折线图：折线图常用来分析数据随时间的变化趋势散点图：散点图可以帮助我们推断出不同维度数据之间的相关性饼图：饼图可以很好地帮助用户快速了解不同分类的数据的占比情况地图：地图主要可以帮助我们从宏观的角度快速看出不同地理位置上数据的差异雷达图：雷达图可以用来分析多个维度的数据与标准数据的对比情况仪表盘：仪表盘可以更直观的表现出某个指标的进度或实际情况