vue3+Echarts实现立体柱状图的示例代码_vue.js
分别展示三段组合代码:
顶部的椭圆形(象形柱图):pictorialBar
{ type: "pictorialBar", // pictorialBar(象形柱图) symbolSize: [20, 5], // 图形的大小用数组分别比表示宽和高,也乐意设置成10相当于[10,10] symbolOffset: [0, 3], // 图形相对于原本位置的偏移 z: 12, // 象形柱状图组件的所有图形的 z 值.控制图形的前后顺序.z 值小的图形会被 z 值大的图形覆盖. itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#17A8A0", }, { offset: 1, color: "#5AEA80", }, ]), }, data: columnData.value, },
中间的柱子:bar
{ name: "发电量", type: "bar", barWidth: 20, itemStyle: { color: { x: 0, y: 0, x2: 0, y2: 1, type: "linear", global: false, colorStops: [ { offset: 0, color: "#17A8A0", }, { offset: 1, color: "#5AEA80", }, ], }, }, data: columnData.value, label: { show: true, position: "top", color: "#FFFFFF", fontSize: 14, }, },
底部的椭圆形(象形柱图):pictorialBar
到此这篇关于vue3+Echarts实现立体柱状图的示例代码的文章就介绍到这了,更多相关vue3 Echarts 立体柱状图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
本文地址: https://www.earthnavs.com/jishuwz/7d6f04a11631a19a2d0b.html
爱测-测试人社区隶属于测吧(北京)科技有限公司,是一个软件测试爱好者的技术交流社区,主要做:软件测试、软件测试入门、自动化测试、性能测试、测试开发、接口测试、测试开发培训、自动化测试培训、python自动化测试、java自动化测试、测试教程、全栈测试、测试面试题、appium、selenium、jmeter、jenkins、loadrunner、测试平台、开源测试。关于霍格沃兹测试开发学社霍格沃兹测试开发学社,隶属于测吧(北京)科技有限公司,是一个面向软件测试爱好者的技术交流社区,聚焦软件测试、软件测试入门、自动化测试、性能测试、接口测试、测试开发、全栈测试,以及人工智能测试(AI测试)等方向。学社内容覆盖Python自动化测试、Java自动化测试、Web自动化、App自动化(Appium)、Selenium、JMeter、LoadRunner、Jenkins等测试技术与工具,同时关注AI在测试设计、用例生成、自动化执行、质量分析与测试平台建设中的应用,以及开源测试相关实践。在人才培养方面,学社建设并运营高校测试实训平台,组织“火焰杯”软件测试相关技术赛事,探索面向高校学员的实践型培养模式,包括先学习、就业后付款等能力导向路径。此外,学社还提供面向测试工程师的能力提升支持,包括名企大厂1v1私教服务,用于结合个人背景的定向指导与工程能力提升。




















