廊坊网站排名优化公司,企业网站模板用哪个,免费管理软件开发平台,常州设计网站在之前的文章中#xff0c;我们学习了如何创建简单的折线图#xff0c;条形图#xff0c;柱形图并实现动态触发#xff0c;最大最小平均值。想了解的朋友可以查看这篇文章。同时#xff0c;希望我的文章能帮助到你#xff0c;如果觉得我的文章写的不错#xff0c;请留下… 在之前的文章中我们学习了如何创建简单的折线图条形图柱形图并实现动态触发最大最小平均值。想了解的朋友可以查看这篇文章。同时希望我的文章能帮助到你如果觉得我的文章写的不错请留下你宝贵的点赞谢谢。
数据可视化-ECharts Html项目实战1-CSDN博客文章浏览阅读858次点赞32次收藏23次。在之前的文章中我们学习了如何安装Visual Studio Code并下载插件想了解的朋友可以查看这篇文章。安装 Visual Studio Code今天的文章我会从基础案例开始带着大家在VS code中绘制ECharts里的折线图、条形图与柱形图并实现动态触发以及最大、最小、平均值。https://blog.csdn.net/qq_49513817/article/details/136665547?spm1001.2014.3001.5501 今天的文章我会从上一篇结尾的案例开始带着大家在VS code中绘制ECharts里的堆积折线图、瀑布图、饼图。并实现图表标题的设置。
目录
一、知识回顾
二、项目实战
1.堆积折线图
2.瀑布图
3.饼图
三、标题设置
拓展-标题设置常用属性 一、知识回顾 在上一篇文章中我们学习了如何创建一个基本的图表也学习了一些基本的图表类型。
更改图表类型的方法学习能力强的朋友应该已经知道了。 就是更改这个type中文意思就是“类型”很好理解。 常见的图表类型也告诉大家了那么我想今天的学习任务对于大家应该都很简单吧
在后面的动态触发和最大值最小值平均值中的代码我用到了几个陌生的东西。 一个是toolbox一个是tooltip分别是提示框组件和工具箱在后面的文章中我会告诉大家它的用法大家现在只用知道它是什么它的作用就行。
现在开始今天的学习吧。 二、项目实战
1.堆积折线图
想要实现堆积折线图其实并不复杂只需要两句简单的代码但是有很多人不会用它的关键在于放的位置。 stack:all,
//stack 属性通常用于堆叠多个系列的数据。当设置为 all 时意味着图表上的所有系列都将被堆叠在一起。areaStyle:{}
//areaStyle 属性用于定义区域填充的样式。当这个属性为空对象 {} 时//它通常意味着默认样式将被应用。但是你可以在这个对象中添加各种属性来定制区域的填充颜色、透明度、边框等。现在我们把它放到代码里试试 可以看到我们想要的堆积效果出现了。
!DOCTYPE html
htmlheadmeta charsetutf-8script srcjs/echarts.js/script
/headbodydiv idmain stylewidth: 800px; height: 400px/divscript typetext/javascriptvar myChart echarts.init(document.getElementById(main));var option {title: {text: 红红成绩表,subtext: 成绩来源于辅导员,},tooltip: {trigger: axis,},legend: {data: [2023年, 2024年],},toolbox: {show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },magicType: { show: true, type: [line, bar] },restore: { show: true },saveAsImage: { show: true },},},calculable: true,xAxis: [{type: category, data:[2月,4月,6月,9月,11月,1月]},],yAxis: [{type: value,data: [红红],},],series: [{name: 2023年,type: line,data: [65,75,66,80,90,73],stack:all,areaStyle:{}},{name: 2024年,type: line,data: [65,88,75,40,60,72],stack:all,areaStyle:{}},],};//使用刚指定的配置项和数据显示图表myChart.setOption(option);/script
/body/html
现在我们把昨天学的最大最小平均值加进去试试。 !DOCTYPE html
htmlheadmeta charsetutf-8script srcjs/echarts.js/script
/headbodydiv idmain stylewidth: 800px; height: 400px/divscript typetext/javascriptvar myChart echarts.init(document.getElementById(main));var option {title: {text: 红红成绩表,subtext: 成绩来源于辅导员,},tooltip: {trigger: axis,},legend: {data: [2023年, 2024年],},toolbox: {show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },magicType: { show: true, type: [line, bar] },restore: { show: true },saveAsImage: { show: true },},},calculable: true,xAxis: [{type: category, data:[2月,4月,6月,9月,11月,1月]},],yAxis: [{type: value,data: [红红],},],series: [{name: 2023年,type: line,data: [65,75,66,80,90,73],stack:all,areaStyle:{},markPoint: { // 标记点data: [{type: max, name: 最大值},{type: min, name: 最小值}]},markLine: { // 标记线data: [{type: average, name: 平均值}]},},{name: 2024年,type: line,data: [65,88,75,40,60,72],stack:all,areaStyle:{},markPoint: { // 标记点data: [{type: max, name: 最大值},{type: min, name: 最小值}]},markLine: { // 标记线data: [{type: average, name: 平均值}]},},],};//使用刚指定的配置项和数据显示图表myChart.setOption(option);/script
/body/html
可以看到最大值都超过我们需要的100了这是因为堆积折线图数据会堆积起来设平均值并不是一个很好的选择。 2.瀑布图 在这里就有一些难度了在 ECharts 中并没有瀑布图这种类型需要我们运用一些技巧达到这种效果。使用serise中的type:bar条形图来模拟瀑布图。
在 ECharts 中设置非数值部分例如瀑布图的起始和结束部分透明你需要在 itemStyle 中针对这些特定数据点设置透明颜色。
这里的数值是我为了演示随机输入的大家在实战中的数值一定要严谨。 !DOCTYPE html
htmlheadmeta charsetutf-8script srcjs/echarts.js/script
/headbodydiv idmain stylewidth: 800px; height: 400px/divscript typetext/javascriptvar myChart echarts.init(document.getElementById(main));var option {title: {//设置标题text: 红消费表表,subtext: 数据来源于账单,},tooltip: {//动态触发trigger: axis,axisPointer:{type:shadow},},toolbox: {x:462,show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },magicType: { show: true, type: [line, bar] },restore: { show: true },saveAsImage: { show: true },},},calculable: true,xAxis: [ { type: category, spliLine:{show:false}, data: [总费用, 吃饭, 喝水洗澡,网购费, 网费, 日用品]//定义数据 }, ], yAxis: [ { type: value }, ], series: [ { name: 辅助, type: bar, stack: total, itemStyle: { normal:{barBorderColor:rgba(0,0,0,0),//barBorderColor:20,20,0,0.5,备用颜色更好可视化barBorderWidth:5,color:rgba(0,0,0,0)//color:rgba(0,220,0,0.8),备用颜色更好可视化},emphasis:{barBorderColor:rgba(0,0,0,0),barBorderWidth:25,color:rgba(0,0,0,0),}},data:[0, 700, 400, 300, 200, 50]}, {name:生活费,type:bar,stack:total,itemStyle:{normal:{label:{show:true,positon:inside}}},data:[1500, 800, 350, 100, 150, 100],}],
};myChart.setOption(option);/script
/body/html
快去试试吧 3.饼图
变为饼图。你需要做这些
将 xAxis 和 yAxis 配置项移除因为饼图不需要坐标轴。移除 series 中的 type: line改为 type: pie。饼图通常不需要 tooltip 的 trigger: axis 配置因为它基于整个饼图的数据点触发提示框。添加饼图特有的配置项比如 radius饼图的半径、center饼图的中心位置等。 !DOC!DOCTYPE html
htmlheadmeta charsetutf-8script srcjs/echarts.js/script
/headbodydiv idmain stylewidth: 800px; height: 400px/divscript typetext/javascriptvar myChart echarts.init(document.getElementById(main));var option { title: { text: 成绩表, subtext: 总分706, left: center }, tooltip: { trigger: item, formatter: {a}br/{b}: {c} ({d}%)br/成绩: {e} }, legend: { orient: vertical, left: left, top: center, data: [数学, 语文, 外语, 理科, 文科] }, toolbox: { show: true, left: right, top: top, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, magicType: { show: true, type: [pie, funnel], option: { funnelAlign: left, max: 1548 } }, restore: { show: true }, saveAsImage: { show: true } } }, series: [ { name: 成绩, type: pie, radius: 66%, center: [50%, 50%], clockWise: true, data: [ {value: 17, name: 语文, }, {value: 13, name: 数学, }, {value: 12, name: 外语, }, {value: 21, name: 物理化学, }, {value: 37, name: 生物地理历史, },], scoreData: [123, 95, 88, 150, 250] } ]
}; option.tooltip.formatter function (params) { var seriesData option.series[0].data; var scoreData option.series[0].scoreData; var index params.dataIndex; return params.seriesName br/ params.name : params.value ( params.percent %)br/成绩: scoreData[index];
}; myChart.setOption(option);/script
/body/html 三、标题设置
在ECharts中title组件用于显示图表的标题。 title: {text: 红红成绩表,borderWidth:2,//边框宽度 borderColor:#00FF00,//边框颜色subtext: 成绩来源于辅导员,//副标题textAlign:,//left:center,//水平居中top:,},把他加到堆积折线图试试效果 可以看到图表标题以及设置到了最中间了并且加上了绿色的边框。
!DOCTYPE html
htmlheadmeta charsetutf-8script srcjs/echarts.js/script
/headbodydiv idmain stylewidth: 800px; height: 400px/divscript typetext/javascriptvar myChart echarts.init(document.getElementById(main));var option {title: {text: 红红成绩表,borderWidth:2,//边框宽度 borderColor:#00FF00,//边框颜色subtext: 成绩来源于辅导员,//副标题textAlign:,//left:center,//水平居中top:,},tooltip: {trigger: axis,},legend: {data: [2023年, 2024年],top:bottom,},toolbox: {show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },magicType: { show: true, type: [line, bar] },restore: { show: true },saveAsImage: { show: true },},},calculable: true,xAxis: [{type: category, data:[2月,4月,6月,9月,11月,1月]},],yAxis: [{type: value,data: [红红],},],series: [{name: 2023年,type: line,data: [65,75,66,80,90,73],stack:all,areaStyle:{},markPoint: { // 标记点data: [{type: max, name: 最大值},{type: min, name: 最小值}]},markLine: { // 标记线data: [{type: average, name: 平均值}]},},{name: 2024年,type: line,data: [65,88,75,40,60,72],stack:all,areaStyle:{},markPoint: { // 标记点data: [{type: max, name: 最大值},{type: min, name: 最小值}]},markLine: { // 标记线data: [{type: average, name: 平均值}]},},],};//使用刚指定的配置项和数据显示图表myChart.setOption(option);/script
/body/html 拓展-标题设置常用属性
属性名类型默认值说明textstring主标题文本支持使用 \n 换行。subtextstring副标题文本支持使用 \n 换行。leftstring / numberauto标题组件离容器左侧的距离。topstring / numberauto标题组件离容器上侧的距离。textAlignstringleft主标题的水平对齐方式可选值为left、center、right。textVerticalAlignstringtop垂直对齐方式可选值为top、middle、bottom。textStyleobject{}主标题样式包括颜色、字体、对齐方式等。subtextStyleobject{}副标题样式包括颜色、字体、对齐方式等。paddingnumber / array0内边距单位是像素可以是单一数字也可以是数组分别表示上、右、下、左的内边距。itemStyleobject{}标题标记的图形样式例如颜色、边框等。backgroundColorstringtransparent标题背景色默认为透明。borderColorstring#ccc标题边框颜色。borderWidthnumber0标题边框线宽。padding[number, number, number, number][0, 0, 0, 0]标题内边距单位px默认各方向内边距为0顺序为上、右、下、左。shadowBlurnumber0图形阴影的模糊大小。shadowColorstringrgba(0, 0, 0, 0.5)图形阴影的颜色。shadowOffsetXnumber0图形阴影在水平方向上的偏移距离。shadowOffsetYnumber0图形阴影在垂直方向上的偏移距离。textBorderColorstring#000文本边框颜色。textBorderWidthnumber0文本边框线宽。zlevelnumber0所有图形的 zlevel 值。znumber2组件的所有图形的 z 值。
