ECharts折线图和饼图

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:'mu