Echarts实现3D柱状图
1、安装Echarts
npm i echarts
2、进行以下配置
<template>
<div class="page">
<div ref="chartDom" class="bar" id="chartOne"></div>
</div>
</template>
<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
onMounted(() => {
getEcharts3DBar();
});
function getEcharts3DBar() {
const chartDom = document.getElementById("chartOne");
const myChart = echarts.init(chartDom);
// 产值
const zzx1 = [27, 38, 41, 21, 27];
const zx = zzx1.map((item) => {
return 100 - item;
})
var barWidth = 40;
let option = {
backgroundColor: "#010243",
// tooltip: {
// trigger: "axis",
// axisPointer: {
// // 坐标轴指示器,坐标轴触发有效
// type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
// },
// formatter: function (e) {
// // console.log(e);
// var str =
// e[6].axisValue +
// "<br>" +
// "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" +
// e[6].color.colorStops[0].color +
// ";'></span>" +
// "" +
// e[6].seriesName +
// " : " +
// e[6].value +
// "%<br>" +
// "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" +
// e[8].color.colorStops[0].color +
// ";'></span>" +
// "" +
// e[8].seriesName +
// " : " +
// e[8].value +
// "%";
// return str;
// },
// },
grid: {
left: "2%",
right: "4%",
bottom: "4%",
top: "16%",
containLabel: true, // grid 区域是否包含坐标轴的刻度标签
},
legend: {
show: false,
data: ["计划产值", "实际产值"],
top: 1,
textStyle: {
color: "#00ffff",
fontSize: 14,
},
itemWidth: 12,
itemHeight: 10,
itemGap: 35,
color: "#242424",
selectedMode: false,
},
xAxis: {
type: "category",
data: [
"A",
"B",
"C",
"D",
"E",
],
axisLine: { // 坐标轴线的样式
show: true,
lineStyle: {
color: "#15205B",
},
},
axisTick: {
show: false,
},
axisLabel: {
textStyle: {
fontFamily: "Microsoft YaHei",
color: "#fff", // x轴颜色
fontWeight: "normal",
fontSize: "14",
lineHeight: 22,
},
interval: 0, //标签设置为全部显示
margin: 15,
lineHeight: 15,
formatter: function (params) {
var newParamsName = params + "\n质量合格率";
//将最终的字符串返回
return newParamsName;
},
},
},
yAxis: {
min: 0,
max: 100,
type: "value",
axisLine: {
show: true,
lineStyle: {
color: "#15205B",
},
},
splitLine: {
show: false,
lineStyle: {
color: "rgba(135,140,147,1)", //左侧显示线
},
},
axisTick: {
show: false,
},
axisLabel: {
formatter: "{value}%",
textStyle: {
color: "#c9c9c9",
fontSize: 14,
},
},
},
series: [
// 产值中间正方形
{
type: "pictorialBar",
symbol: "diamond",
symbolSize: [barWidth, 8],
symbolOffset: [9.5, -4.5],
symbolPosition: "end",
z: 12,
color: "#3185FF",
data: zzx1,
},
// 产值底部正方形
{
type: "pictorialBar",
symbol: "diamond",
symbolSize: [barWidth, 8],
// symbolOffset: [-26, 4],
symbolOffset: [9.5, 0],
z: 12,
color: "#161D6E",
data: zzx1,
},
// 产值上部正方形
{
data: [100, 100, 100, 100, 100],
type: "pictorialBar",
symbol: "diamond",
symbolSize: [barWidth, 8],
// symbolOffset: [-26, -4],
symbolOffset: [9.5, -4.5],
color: "#283190",
symbolPosition: "end",
},
// 产值进度柱子
{
name: "计划产值",
type: "bar",
barWidth: barWidth,
stack: "1",
itemStyle: {
normal: {
opacity: 0.7,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#2863D2",
},
{
offset: 1,
color: "#161D6E",
},
]),
barBorderRadius: 0,
},
},
label: {
show: true,
position: ["-18", "-18"],
color: "#00f8ff",
fontSize: 12,
},
data: zzx1,
},
// 产值进度柱子
{
name: "中间的线",
type: "bar",
barWidth: 0.5,
barGap: "-50%",
itemStyle: {
normal: {
opacity: 0.7,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#2863D2",
},
{
offset: 1,
color: "#161D6E",
},
]),
},
},
data: zzx1,
},
// 产值上面进度柱子
{
data: zx,
type: "bar",
barWidth: barWidth,
stack: "1",
zlevel: -1,
itemStyle: {
normal: {
opacity: 0.7,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#182075",
},
{
offset: 1,
color: "#182075",
},
]),
barBorderRadius: 0,
},
},
}
],
};
option && myChart.setOption(option);
}
</script>
<style lang="scss" scoped>
.page {
width: 100%;
height: 100%;
.bar {
width: 800px;
height: 800px;
}
}
</style>
3、效果图: