大数据分析技术应用- 课件 第四章 ECharts地图

Echarts地图学习目标掌握地图的实现步骤掌握地图的常用属性132知识思政技能能绘制出基本地图能实现地图的常见效果培养民族自豪感培养精益求精的工匠精神一、地图的基本实现数据一、地图的基本实现数据一、地图的基本实现jquery.js一、地图的基本实现步骤：1、ECharts最基本的代码结构2、把中国地图的china.json文件放到项目3、使用Ajax获取china.json4、在回调函数中为echarts全局对象注册地图5、在geo下设置type和map属性一、地图的基本实现核心代码：3、使用Ajax获取china.json4、在回调函数中为echarts全局对象注册地图5、在geo下设置type和map属性$.get("json/map/china.json",function(ret){

//ret就是中国的各个省份矢量数据

//console.log(ret)

echarts.registerMap('chinaMap',ret)

var

option={

geo:{

type:'map',

map:'chinaMap',

}

}

myChart.setOption(option)

})一、地图的基本实现代码运行和效果：二、地图的常见效果1、地图的缩放：roam:true(geo下设置)2、地图上各省份名称的显示：label:{show:true}二、地图的常见效果3、显示地图某个区域加载该区域的矢量地图数据通过registerMap注册到echarts全局对象中指明geo配置下的type和map属性二、地图的常见效果3、显示地图某个区域核心代码如下：$.get("json/map/jiangsu.json",function(ret){

echarts.registerMap('jiangsu',ret)

var

option={

geo:{

type:'map',

map:'jiangsu',

roam:true,

label:{show:true},

zoom:1.2

}

}二、地图的常见效果4、不同城市颜色不同步骤为：1)

显示基本的中国地图2)

城市的温度数据设置给series3)

将series下的数据和geo关联起来4)

结合visualMap配合使用

二、地图的常见效果4、不同城市颜色不同2)

城市的温度数据

var

tempData=[

{name:'北京',value:-15},

{name:'天津',value:-12},

{name:'上海',value:5},

{name:'重庆',value:8},

{name:'河北',value:-10},

{name:'河南',value:-7},

{name:'云南',value:15},

{name:'辽宁',value:-25},

{name:'黑龙江',value:-30},

……

]二、地图的常见效果4、不同城市颜色不同3)设置series下的数据，并和geo关联起来

series:[

{

data:tempData,

geoIndex:0,//将温度数据和序号为0的geo关联在一起

type:'map'

}

],二、地图的常见效果4、不同城市颜色不同4)

结合visualMap配合使用

visualMap:{

min:-40,

max:30,

inRange:{

color:['blue','white']//控制颜色渐变的范围

},

calculabel:true//出现滑块效果,对数据筛选

}二、地图的常见效果4、不同城市颜色不同运行效果图二、地图的常见效果5、涟漪效果1）准备好要呈现涟漪效果的散点数据2）给series下增加新的对象data，其数值即为上一步的散点数据3）配置新对象的type:effectScatter，即涟漪效果4）让散点图使用地图坐标系统coordinateSystem:’geo’5）调整涟漪效果实现步骤：二、地图的常见效果5、涟漪效果1）准备好散点数据

var

scatterData=[{value:[118.767413,32.041544]}]二、地图的常见效果5、涟漪效果2）给series下增加新的对象data，其数值即为上一步的散点数据

{

data:scatterData

}二、地图的常见效果5、涟漪效果3）配置新对象的type:effectScatter，即涟漪效果

{

data:scatterData,

type:’effectScatter’

}二、地图的常见效果5、涟漪效果4）让散点图使用地图坐标系统coordinateSystem:’geo’

{

data:scatterData,

type:’effectScatter’,

coordinateSystem:'geo'

}二、地图的常见效果5、涟漪效果5）调整涟漪效果{

data:scatterData,//配置散点图的坐标数据

type:'effectScatter',

coordinateSystem:'geo',//指明散点使用的坐标系统为geo坐标系统。

rippleEffect:{

scale:10//调整涟漪动画的缩放比例}

}二、地图的常见效果5、涟漪效果运行效果图三、地图小结地图的绘制加载地图的矢量数据注册给echarts全局对象配置geo常见效果缩放拖动:roamvisualMap和地图的结合，不同城市不同颜色涟漪效果选中效果地图的特点：帮助用户快速看出不同地理位置上的数据的差异。谢谢3.3Echarts通用配置项title,tooltip,toolbox,legend学习目标理解title、tooltip、toolbox、legend等4个通用配置的作用132知识思政技能能会使用title、tooltip、toolbox、legend通用配置培育劳动精神对数据的严谨一、通用配置title文字样式标题边框标题位置一、通用配置title文字样式标题设置为蓝色、16磅、加灰色边框、6像素、圆角为6像素。设置title的textStyle、borderWidth、borderColor和borderRadiustextStyle:{

color:'blue',

fontSize:16

},

borderWidth:6,

borderColor:'grey’,borderRadius:6,

left:

'center'

二、通用配置tooltip提示框组件，用于配置鼠标滑过或点击图表时的提示框。主要设置：触发类型：trigger触发时机：triggerOn格式化：formatter二、通用配置tooltip

tooltip:{

trigger:'item',

triggerOn:'click',

formatter:'{b}的蜂胶产量是{c}'

},二、通用配置tooltip三、通用配置toolboxEcharts提供的工具栏,内置有导出图片，数据视图，动态类型切换、数据区域缩放，重置五个工具。toolbox:{feature:{

saveAsImage:{}}},三、通用配置toolboxEcharts提供的工具栏,内置有导出图片，数据视图，动态类型切换、数据区域缩放，重置五个工具。toolbox:{feature:{saveAsImage:{},

dataView:{}}},三、通用配置toolboxEcharts提供的工具栏,内置有导出图片，数据视图，动态类型切换、数据区域缩放，重置五个工具。三、通用配置toolboxEcharts提供的工具栏,内置有导出图片，数据视图，动态类型切换、数据区域缩放，重置五个工具。三、通用配置toolboxEcharts提供的工具栏,内置有导出图片，数据视图，动态类型切换、数据区域缩放，重置五个工具。magicType:{type:['bar','line']}三、通用配置toolboxEcharts提供的工具栏,内置有导出图片，数据视图，动态类型切换、数据区域缩放，重置五个工具。三、通用配置toolbox小结：显示工具栏按钮featuresaveAsImage,dataView,restore,dataZoom,magicType四、通用配置legendlegend作用是筛选系列，需要和series配合使用。给series的值，增加一个新的数组元素。series:[

{

name:'蜂胶产量',

type:'bar',

data:yDataArr1

},

{

name:'槐花蜜产量',

type:'bar',

data:yDataArr2

}legend:{

data:['蜂胶产量','槐花蜜产量'],

left:20

}对所有类型的图表通用。title设置图表标题,tooltip设置提示框toolbox设置工具栏legend设置图例。通用配置小结随堂测Echarts提供的工具栏toolbox,内置有导出图片、（）、（）、数据区域缩放，重置五个工具。谢谢4Echarts折线图和饼图学习目标掌握折线图的常用属性掌握饼图的常用属性132知识思政技能能绘制出折线图的常见效果能绘制出饼图的常见效果培养对数据敏感的职业素养培养科技强国的使命一、折线图的实现2023年某地蜂蜜产量（单位：公斤）：1月：16002月：25003月：32004月：33005月：38006月：35007月：39008月：41009月：280010月：250011月：280012月：2300数据一、折线图的实现varoptions={xAxis:{type:'category',data:xDataArr,name:'(月份)'},yAxis:{type:'value',name:'(公斤)'},series:[{name:'蜂蜜产量',type:'line',data:yDataArr}]}二、折线图的常见效果1、标注：最大值、最小值、平均值、区域series:[

{

name:'蜂蜜产量',

type:'line',

data:yDataArr,

markPoint:{data:[{type:'max'},{type:'min'}]},

markLine:{data:[{type:'average'}]},

markArea:{data:[[{xAxis:'1月'},{xAxis:'2月’}],

[{xAxis:'7月'},{xAxis:'8月'}]]}

}

]markArea:{data:[[{xAxis:'1月'},{xAxis:'2月’}],

[{xAxis:'7月'},{xAxis:'8月'}]]}2、折线图的平滑smooth:true二、折线图的常见效果3、折线图的线型lineStyle:{

color:'green',

type:'dotted'}//dashedsolide

}二、折线图的常见效果4、折线图的区域填充areaStyle:{color:'pink'}二、折线图的常见效果5、折线起始位置紧贴y轴二、折线图的常见效果

xAxis:{

boundaryGap:false

},6、y轴起始位置不为0设置二、折线图的常见效果当y轴数值相差很小时，比如var

yDataArr=[1600,1602,1603,1599,1601,1605,1604,1606,1603,1607,1604,1600]yAxis:{

type:'value',

name:'(公斤)',

scale:true

},7、堆叠图二、折线图的常见效果蜂胶的数据如下：varyDataArr2=[1200,3500,4200,2800,3900,4000,2800,3100,3800,3000,3800,1700]{type:'line’,data:yDataArr2}7、堆叠图二、折线图的常见效果分析两条线交叉的原因：varyDataArr1=[1600,2500,3200,3300,3800,3500,3900,4100,2800,2500,2800,2300]varyDataArr2=[1200,3500,4200,2800,3900,4000,2800,3100,3800,3000,3800,1700]两条折线参考的起始点都是y轴的0点解决方案：让第2条折线的起始点为第1条折线。给每个系列设置：stack:’all’小结：二、折线图的常见效果基本的折线图基本的代码结构X轴和y轴的数据Series中的type设置为line折线图常见效果最值平均值：markPointmarkLinemarkLine线条显示:smoothlineStyle紧挨边缘:boundaryGap脱离0值比例:scale堆叠图stack折线图的特点：用来分析数据随时间的变化趋势Echarts饼图一、饼图的基本实现2023年全国某地蜂蜜产量（单位：公斤）：广州：8600深圳：5500杭州：3100武汉：4300上海：1200北京：2500西安：3900其他：1100数据一、饼图的基本实现步骤：1、搭建起ECharts程序结构；2、准备数据varpieData=[{name:"广州",vaue:8600},{name:"深圳",value:5500},{name:"杭州",value:3100},{name:"武汉",value:4300},{name:"上海",value:1200},{name:"北京",value:2500},{name:"西安",value:3900},{name:"其他",value:1100}]3、把图表类型设置为饼图：在series下设置type：pie一、饼图的基本实现series:[

{

name:"蜂蜜销量统计",

type:'pie',

data:pieData,

}核心代码二、饼图的常见效果1、显示数值二、饼图的常见效果label.formatterlabel:{

show:true,

formatter:function(arg){？},右击网页

审查元素

控制台console.log(arg)1、显示数值二、饼图的常见效果label.formatterconsole.log(arg)

return

arg.name+arg.value+'公斤\n'+arg.percent+'%'

1、显示数值二、饼图的常见效果label.formatterlabel:{

show:true,

formatter:function(arg){

return

arg.name+arg.value+'公斤\n'+arg.percent+'%'},2、圆环二、饼图的常见效果通过设置radius的值为内外两个半径的比例达成。radius:["40%","70%"],比例的含义是：参照圆环所在容器的宽度和高度中较小的值的一半3、南丁格尔图二、饼图的常见效果饼图的每一部分半径不一样roseType:'radius'数值越大，半径越大4、选中效果二、饼图的常见效果selectedMode:'single'将选中的区域偏离圆点一小段距离selectedMode:'multiple'可同时选中多块4、选中效果二、饼图的常见效果选中之后的偏移量selectedOffset:30三、饼图小结基本的饼图基本的代码结构数据由name和value组成的对象所形成的数组Series中的type设置为pie饼图常见效果显示文字的格式化圆环南丁格尔图选中效果饼图的特点：帮助用户快速了解不同分类的数据的占比情况。谢谢3.2Echarts图表相关配置项学习目标Echarts5.0图表常用配置项Echarts5.0柱状图常用配置项132知识思政技能能主动查阅Echarts5.0官方文档解决绘制中的问题能熟练使用图表常用配置项数据兴农的责任民族自豪感一、图表相关配置项相关配置：xAxis:直角坐标系中的X轴yAxis:直角坐标系中的y轴series:系列列表。每个系列通过type决定图表类型一、图表相关配置项var

options={

title:{//标题

text:"大数据可视化成绩",

textStyle:{

color:'red',

fontSize:14

},

subtext:'大数据2302班',

subtextStyle:{

fontSize:10

},

left:'50%',

textAlign:'center'

},

xAxis:{//x轴

type:‘category’,//类目轴，需要指明类别

data:['张笑','孙康','史可']//呈现在x轴的类别

},

yAxis:{//y轴

type:‘value’//表明y轴为数值轴，设置为value后，自动从series对象的data中为x轴的类别找对应的数据

},

series:[{//给y轴提供数据的

type:‘bar’,//图表类型为柱状图，换成linepie

data:[60,100,75]//图表系列柱的数据

}]

}二、查阅官方文档官网网址：/zh/index.html二、查阅官方文档

link:"",二、查阅官方文档官方文档很重要！1、点开键，查看含义

2、看对应的值是什么类型遇到忘记的配置项，主动查阅文档，按说明编写代码。随堂测试3：ECharts数据可视化图表中______方法用于设置图表的选项Echarts柱状图基本实现和常见效果学习内容柱状图的标记柱状图的数值显示柱状图的柱子宽度横向柱状图Echarts的7大图表：柱状图折线图散点图饼图地图雷达图仪表盘图一、柱状图的基本实现和常见效果基本实现varxDataArr=['2018','2019','2020','2021','2022','2023']varyDataArr=[320,350,300,380,450,500]varoptions={xAxis:{type:'c