vue3+Echarts实现立体柱状图的示例代码
更新时间：2025年07月13日 09:11:10 作者：天使的同类
本文介绍了使用Echarts实现立体柱状图的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
Echarts柱状图中文网：https://echarts.apache.org/examples/zh/index.html#chart-type-bar
效果展示：
主要实现过程是三部分的组合，最上面是一个椭圆，中间是正常的柱子，下方再加上一个椭圆，就出来立体的效果。
分别展示三段组合代码：
顶部的椭圆形(象形柱图):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
{
type: "pictorialBar",
symbolSize: [20, 10],
symbolOffset: [0, -5],
z: 12,
symbolPosition: "end",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#17A8A0",
},
{
offset: 1,
color: "#5AEA80",
},
]),
},
data: columnData.value,
},
整体代码如下：
<template>
<div
id="stereoscopicChart"
style="width: 100%; height: 270px"
></div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
// 横坐标data数据
const xData = ref([
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
]);
// 柱状data数据
const columnData = ref([
394, 194, 287, 189, 139, 420, 385, 239, 279, 379, 277, 237,
]);
let myStereoscopicChart: echarts.ECharts | null = null;
const showStereoscopicEcharts = () => {
if (!myStereoscopicChart) {
const stereoscopicChartDom = document.getElementById("stereoscopicChart");
myStereoscopicChart = echarts.init(stereoscopicChartDom);
}
const stereoscopicOption = {
tooltip: {
trigger: "axis",
formatter: "{b}
发电量 {c}kWh",
type: "line",
axisPointer: {
lineStyle: {
color: "#17A8A0",
},
},
backgroundColor: "rgba(7,18,26, 1)",
borderWidth: 0,
textStyle: {
color: "#fff",
fontSize: 14,
align: "left",
},
},
// 图例
legend: {
show: false,
},
// 图表位置
grid: {
left: "5%",
right: "5%",
top: "18%",
bottom: "0%",
containLabel: true,
},
xAxis: [
{
type: "category",
axisLine: {
lineStyle: {
color: "#415264",
width: 1,
type: "solid",
},
},
axisLabel: {
color: "rgba(255,255,255,0.6)",
fontSize: 12,
},
axisTick: {
show: false,
},
data: xData.value,
},
],
yAxis: [
{
name: "发电量（kWh）",
type: "value",
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,0.2)",
},
},
axisLabel: {
color: "rgba(255,255,255,0.2)",
fontSize: 12,
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.2)",
type: "dashed",
},
},
},
],
series: [
// 底部的椭圆形(象形柱图):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,
},
{
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,
},
},
{
type: "pictorialBar",
symbolSize: [20, 10],
symbolOffset: [0, -5],
z: 12,
symbolPosition: "end",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#17A8A0",
},
{
offset: 1,
color: "#5AEA80",
},
]),
},
data: columnData.value,
},
],
};
stereoscopicOption && myStereoscopicChart.setOption(stereoscopicOption);
};
const resizeChart = () => {
if (myStereoscopicChart) {
myStereoscopicChart.resize();
}
};
onMounted(() => {
showStereoscopicEcharts();
window.addEventListener("resize", resizeChart);
});
</script>
到此这篇关于vue3+Echarts实现立体柱状图的示例代码的文章就介绍到这了,更多相关vue3 Echarts 立体柱状图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了vue3 Vite 进阶rollup命令行使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
vue.js中v-on:textInput无法执行事件问题的解决过程
大家都知道vue.js通过v-on完成事件处理与绑定，但最近使用v-on的时候遇到了一个问题，所以下面这篇文章主要给大家介绍了关于vue.js中v-on:textInput无法执行事件问题的解决过程，需要的朋友可以参考下。2017-07-07
这篇文章主要为大家详细介绍了Vue实现动态显示textarea剩余文字数量，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
这篇文章主要介绍了Vue2.0+Vux搭建一个完整的移动webApp项目的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
Vue 解决在element中使用$notify在提示信息中换行问题
这篇文章主要介绍了Vue 解决在element中使用$notify在提示信息中换行问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要为大家介绍了VUE Token的失效处理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
这篇文章主要为大家介绍了Vue.js中安装一个路由器demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
vue源码学习之Object.defineProperty对象属性监听
这篇文章主要介绍了vue源码学习之Object.defineProperty对象属性监听，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
elementUi vue el-radio 监听选中变化的实例代码
这篇文章主要介绍了elementUi vue el-radio 监听选中变化，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-06-06
今天小编就为大家分享一篇对VUE中的对象添加属性，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论