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}<br/> 发电量 {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>
🌻 Everyday is a second chance.