ECharts各类炫酷图表/3D柱形图
一、前言
最近鸡米花实现了各类的炫酷的图表，有3D柱形图、双边柱形图以及异形柱形图，好了，直接上图：
二、效果图
一个个来吧，下面就是代码啦，注意，一下图表展示的宽高均为800px*300px
三、异形横向柱形图
<template>
<div class="charts" ref="charts"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
let myChart = echarts.init(this.$refs.charts);
let richData = {
height: 35,
width: 60,
color: "#fff",
align: "center",
};
let data = [4, 13, 25, 29, 38];
var option = {
backgroundColor: "#061E42",
grid: {
left: 40,
top: "0%",
right: 20,
bottom: "0%",
containLabel: true,
},
xAxis: [
{
show: false,
},
],
yAxis: [
{
axisTick: "none",
axisLine: "none",
offset: "15",
axisLabel: {
textStyle: {
color: "#ffffff",
fontSize: "16",
},
},
data: ["衢州市", "温州市", "绍兴市", "台州市", "金华市"],
},
{
axisTick: "none",
axisLine: "none",
axisLabel: {
textStyle: {
color: "#ffffff",
fontSize: "12",
fontWeight: "bold",
},
},
data: [
" 114 16.12%",
" 30 14.25%",
" 123 13.15%",
" 102 26.12%",
" 10 6.12%",
].reverse(),
},
{
nameGap: "50",
nameTextStyle: {
color: "#ffffff",
fontSize: "16",
},
axisLine: {
lineStyle: {
color: "rgba(0,0,0,0)",
},
},
data: [],
},
],
series: [
{
name: "条",
type: "bar",
yAxisIndex: 0,
data,
barWidth: 12,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
1,
0,
0,
0,
[
{
offset: 0,
color: "#76D8FD",
},
{
offset: 1,
color: "#025389",
},
]
),
},
},
z: 4,
},
{
name: "背景色",
type: "bar",
yAxisIndex: 1,
barGap: "-100%",
data: [99.5, 99.5, 99.5, 99.5, 99.5],
barWidth: 12,
itemStyle: {
color: "#064976",
},
z: 1,
},
{
name: "背景三角",
type: "scatter",
hoverAnimation: false,
data: [99.5, 99.5, 99.5, 99.5, 99.5],
symbol: "triangle",
yAxisIndex: 2,
symbolSize: 12,
symbolRotate: 180,
itemStyle: {
normal: {
color: "#064976",
opacity: 1,
},
},
z: 2,
},
{
name: "底部三角",
type: "scatter",
hoverAnimation: false,
data,
symbol: "triangle",
yAxisIndex: 2,
symbolSize: 12,
symbolRotate: 180,
itemStyle: {
normal: {
color: "#76D8FD",
opacity: 1,
},
},
z: 4,
},
{
name: "底部白色斜杠",
type: "scatter",
hoverAnimation: false,
data,
yAxisIndex: 2,
symbolSize: [12, 16],
symbolKeepAspect: true,
symbol: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALkAAADTCAYAAADdwrJgAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFyWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDIgNzkuYTFjZDEyZiwgMjAyNC8xMS8xMS0xOTowODo0NiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI2LjIgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyNS0wMy0wN1QxNDo1MjowNSswODowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjUtMDMtMDdUMTQ6NTQ6MzErMDg6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjUtMDMtMDdUMTQ6NTQ6MzErMDg6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmNiMjYxYjRlLWE2OWItMjE0NS04ZTI5LTgxNmM5NWMyYzRjNiIgeG1wTU06RG9jdW1lbnRJRD0i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",
symbolOffset: [5, 0],
itemStyle: {
normal: {
color: "#76D8FD",
opacity: 1,
},
},
z: 4,
},
{
name: "底部深色背影斜杠",
type: "scatter",
hoverAnimation: false,
data,
yAxisIndex: 2,
symbolSize: [10, 12],
symbolKeepAspect: true,
symbol: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADNCAYAAADqt6/kAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFyWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDIgNzkuYTFjZDEyZiwgMjAyNC8xMS8xMS0xOTowODo0NiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI2LjIgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyNS0wMy0wN1QxNTowNDoxMSswODowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjUtMDMtMDdUMTU6MDY6MDArMDg6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjUtMDMtMDdUMTU6MDY6MDArMDg6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmQxOTgzODE4LWY0ZDUtYzY0Ni1iZDI3LTk2ZDkyNGRhNzMzYSIgeG1wTU06RG9jdW1lbnRJRD0i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",
symbolOffset: [9, 0],
itemStyle: {
normal: {
color: "#76D8FD",
opacity: 1,
},
},
z: 3,
},
{
name: "头部三角",
type: "scatter",
hoverAnimation: false,
data: [0, 0, 0, 0, 0],
symbol: "triangle",
yAxisIndex: 2,
symbolSize: 12,
itemStyle: {
normal: {
color: "#025389",
opacity: 1,
},
},
z: 4,
},
// 以下为斜杠代码
{
name: "头部三角",
type: "scatter",
hoverAnimation: false,
data: [0, 0, 0, 0, 0],
symbol: "triangle",
yAxisIndex: 2,
symbolSize: 20,
itemStyle: {
normal: {
color: "#061E42",
opacity: 1,
},
},
symbolOffset: [-2, 0],
z: 3,
},
{
name: "头部三角",
type: "scatter",
hoverAnimation: false,
data: [0, 0, 0, 0, 0],
symbol: "rect",
yAxisIndex: 2,
symbolSize: 12,
itemStyle: {
normal: {
color: "#fff",
opacity: 1,
},
},
z: 2,
symbolOffset: [-7, 0],
},
{
name: "头部三角",
type: "scatter",
hoverAnimation: false,
data: [0, 0, 0, 0, 0],
symbol: "triangle",
yAxisIndex: 2,
symbolSize: 12,
symbolRotate: 180,
itemStyle: {
normal: {
color: "#061E42",
opacity: 1,
},
},
z: 3,
symbolOffset: [-13, 0],
},
],
};
myChart.setOption(option);
},
};
</script>
<style scoped>
.charts {
width: 100%;
height: 100%;
}
</style>
四、双边横向柱形图
<template>
<div class="charts" ref="charts"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
let myChart = echarts.init(this.$refs.charts);
var myData = [
{
value: "100岁以上",
textStyle: {
fontSize: 12,
align: "center",
},
},
{
value: "60岁以上",
textStyle: {
fontSize: 12,
align: "center",
},
},
{
value: "35~59",
textStyle: {
fontSize: 12,
align: "center",
},
},
{
value: "18~34",
textStyle: {
fontSize: 12,
align: "center",
},
},
{
value: "7~17",
textStyle: {
fontSize: 12,
align: "center",
},
},
{
value: "学龄前",
textStyle: {
fontSize: 12,
align: "center",
},
},
];
var databeast = [200, 259, 262, 324, 232, 176];
var databeauty = [121, 368, 233, 309, 133, 308];
let max = Math.max(...databeast, ...databeauty);
max = Math.ceil(max / 100) * 100;
var width = 320; //根据盒子宽度 计算两边数值的距离，比如说这里是800的盒子，宽度就是800/2左右
var maxList = databeast.map((item) => max);
var option = {
backgroundColor: "#061E42",
grid: [
{
show: false,
left: 50,
top: 28,
bottom: 15,
containLabel: true,
width: "35%", //如果挡住中间的文字了，适当将宽度调小，同时上面的width=400也要调整一下
},
{
show: false,
left: "51%", //调整中间文字的位置
top: 28,
bottom: 15,
width: "0%",
},
{
show: false,
right: 50,
top: 28,
bottom: 15,
containLabel: true,
width: "35%",
},
],
xAxis: [
{
type: "value",
inverse: true,
max: max,
axisLine: {
show: true,
},
axisTick: {
show: false,
},
position: "top",
name: "女",
nameTextStyle: {
color: "rgba(255, 255, 255, 1)",
fontWeight: "bold",
align: "right",
verticalAlign: "bottom",
lineHeight: 20,
padding: [0, 15],
},
nameLocation: "start",
axisLabel: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: "#666",
type: "dashed",
},
},
},
{
gridIndex: 1,
show: false,
},
{
gridIndex: 2,
max: max,
type: "value",
name: "男",
nameLocation: "start",
nameTextStyle: {
color: "rgba(255, 255, 255, 1)",
fontWeight: "bold",
align: "left",
verticalAlign: "bottom",
lineHeight: 20,
padding: [0, 15],
},
axisLine: {
show: true,
},
axisTick: {
show: false,
},
position: "top",
axisLabel: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: "#666",
type: "dashed",
},
},
},
],
yAxis: [
{
type: "category",
inverse: true,
position: "right",
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
margin: 8,
textStyle: {
color: "#fff",
fontSize: 12,
},
},
data: myData,
},
{
gridIndex: 1,
type: "category",
inverse: true,
position: "left",
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: "#fff",
fontSize: 12,
},
},
data: myData,
},
{
gridIndex: 2,
type: "category",
inverse: true,
position: "left",
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
textStyle: {
color: "#9D9EA0",
fontSize: 12,
},
},
data: myData,
},
],
series: [
{
name: "帅哥",
type: "bar",
barWidth: 14,
label: {
show: true,
offset: [-width, 0],
position: "right",
fontWeight: "bold",
color: "#fff",
},
itemStyle: {
show: true,
color: "#FC8404",
label: {
show: true,
position: [-40, 5],
formatter: function (v) {
return v.value * -1;
},
},
},
data: databeast,
},
{
name: "背景",
type: "bar",
barWidth: 18,
barGap: "-100%",
data: maxList,
itemStyle: {
color: "#393237",
shadowColor: "#393237",
shadowOffsetX: 0,
shadowOffsetY: -3,
},
z: 1,
emphasis: {
disabled: true,
},
},
{
name: "女性三角",
type: "scatter",
hoverAnimation: false,
data: databeast,
symbol: "triangle",
symbolSize: [14, 10],
symbolRotate: 90,
symbolOffset: [-7, -2],
itemStyle: {
color: "#FC8404",
opacity: 1,
},
z: 3,
emphasis: {
disabled: true,
},
},
{
name: "男性三角",
type: "scatter",
hoverAnimation: false,
data: databeauty,
symbol: "triangle",
xAxisIndex: 2,
yAxisIndex: 2,
symbolSize: 12,
symbolSize: [14, 10],
symbolOffset: [7, -2],
symbolRotate: 270,
clip: false,
itemStyle: {
color: "#01DDF7",
opacity: 1,
},
z: 3,
emphasis: {
disabled: true,
},
},
{
name: "美女",
type: "bar",
barWidth: 14,
xAxisIndex: 2,
yAxisIndex: 2,
label: {
show: true,
offset: [width, 0],
position: "left",
fontWeight: "bold",
color: "#fff",
},
itemStyle: {
show: true,
color: "#01DDF7",
},
data: databeauty,
},
{
name: "背景",
type: "bar",
barWidth: 18,
barGap: "-100%",
data: maxList,
xAxisIndex: 2,
yAxisIndex: 2,
itemStyle: {
color: "#064668",
shadowColor: "#064668",
shadowOffsetX: 0,
shadowOffsetY: -3,
},
z: 1,
emphasis: {
disabled: true,
},
},
],
};
myChart.setOption(option);
},
};
</script>
<style scoped>
.charts {
width: 100%;
height: 100%;
}
</style>
五、3D横向柱形图
<template>
<div style="width: 100%; height: 100%" ref="chartDom"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
this.initChart();
},
methods: {
initChart() {
let myChart = echarts.init(this.$refs.chartDom);
let width = 12; //柱形图的单面的宽度，这里单面宽度为12，则柱形图实际宽度为24
let diamondAngl = 9; //0为0度 数值越大角度越大
const CubeLeft = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint;
const c0 = [shape.x - diamondAngl, shape.y];
const c1 = [shape.x, shape.y - width];
const c2 = [xAxisPoint[0] + 5, xAxisPoint[1] - width];
const c3 = [xAxisPoint[0] + 1, xAxisPoint[1]];
ctx.moveTo(c0[0], c0[1])
.lineTo(c1[0], c1[1])
.lineTo(c2[0], c2[1])
.lineTo(c3[0], c3[1])
.closePath();
},
});
const CubeRight = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint;
const c1 = [shape.x, shape.y + width];
const c2 = [xAxisPoint[0] + 5, xAxisPoint[1] + width];
const c3 = [xAxisPoint[0] + 1, xAxisPoint[1] + 0.05];
const c4 = [shape.x - diamondAngl, shape.y + 0.05];
ctx.moveTo(c1[0], c1[1])
.lineTo(c2[0], c2[1])
.lineTo(c3[0], c3[1])
.lineTo(c4[0], c4[1])
.closePath();
},
});
const CubeTop = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
const c1 = [shape.x - diamondAngl, shape.y];
const c2 = [shape.x, shape.y + width];
const c3 = [shape.x + diamondAngl, shape.y - 0.05];
const c4 = [shape.x, shape.y - width + 0.05];
ctx.moveTo(c1[0], c1[1])
.lineTo(c2[0], c2[1])
.lineTo(c3[0], c3[1])
.lineTo(c4[0], c4[1])
.closePath();
},
});
echarts.graphic.registerShape("CubeLeft", CubeLeft);
echarts.graphic.registerShape("CubeRight", CubeRight);
echarts.graphic.registerShape("CubeTop", CubeTop);
const VALUE = [13, 25, 18, 19, 34, 24];
let fill = new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{
offset: 0,
color: "#37C5F6",
},
{
offset: 0.9,
color: "#0B1B3E",
},
{
offset: 1,
color: "rgba(6,23,53,0.2)",
},
]);
var option = {
backgroundColor: "#010d3a",
grid: {
left: 10,
right: 30,
bottom: 5,
top: 5,
containLabel: true,
},
xAxis: {
type: "value",
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
splitLine: {
show: false,
},
},
yAxis: {
type: "category",
data: [
"测试1",
"测试2",
"测试3",
"测试4",
"测试5",
"测试6",
],
axisLine: {
show: true,
lineStyle: {
color: "#113B5E",
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
fontSize: 12,
color: "#C3EAFF",
},
splitLine: {
show: false,
},
},
series: [
{
type: "custom",
renderItem: (params, api) => {
const location = api.coord([
api.value(0),
api.value(1),
]);
return {
type: "group",
children: [
{
type: "CubeLeft",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([
0,
api.value(1),
]),
},
style: {
fill: fill,
},
},
{
type: "CubeRight",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([
0,
api.value(1),
]),
},
style: {
fill: fill,
},
},
{
type: "CubeTop",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([
api.value(0),
api.value(0),
]),
},
style: {
fill: new echarts.graphic.LinearGradient(
1,
0,
0,
0,
[
{
offset: 0,
color: "#fff",
},
{
offset: 1,
color: "#4CD2FF",
},
]
),
},
},
],
};
},
data: VALUE,
},
{
type: "bar",
label: {
show: true,
position: "right",
fontSize: 12,
color: "#4DA6FF",
offset: [10, 1],
},
itemStyle: {
color: "transparent",
},
data: VALUE,
},
],
};
option && myChart.setOption(option);
},
},
};
</script>六、3D垂直柱形图
<template>
<div style="width: 100%; height: 100%" ref="chartDom"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
this.initChart();
},
methods: {
initChart() {
let myChart = echarts.init(this.$refs.chartDom);
const CubeLeft = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint;
const c0 = [shape.x - 9, shape.y - 3];
const c1 = [shape.x + 9, shape.y - 3];
const c2 = [xAxisPoint[0] + 9, xAxisPoint[1]];
const c3 = [xAxisPoint[0] - 9, xAxisPoint[1]];
ctx.moveTo(c0[0], c0[1])
.lineTo(c1[0], c1[1])
.lineTo(c2[0], c2[1])
.lineTo(c3[0], c3[1])
.closePath();
},
});
const CubeRight = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint;
const c1 = [shape.x + 9, shape.y - 3];
const c2 = [xAxisPoint[0] + 9, xAxisPoint[1]];
const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 6];
const c4 = [shape.x + 18, shape.y - 9];
ctx.moveTo(c1[0], c1[1])
.lineTo(c2[0], c2[1])
.lineTo(c3[0], c3[1])
.lineTo(c4[0], c4[1])
.closePath();
},
});
const CubeTop = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
const c1 = [shape.x - 9, shape.y - 3];
const c2 = [shape.x + 9, shape.y - 3];
const c3 = [shape.x + 18, shape.y - 9];
const c4 = [shape.x, shape.y - 9];
ctx.moveTo(c1[0], c1[1])
.lineTo(c2[0], c2[1])
.lineTo(c3[0], c3[1])
.lineTo(c4[0], c4[1])
.closePath();
},
});
echarts.graphic.registerShape("CubeLeft", CubeLeft);
echarts.graphic.registerShape("CubeRight", CubeRight);
echarts.graphic.registerShape("CubeTop", CubeTop);
const VALUE = [2012, 1230, 3790, 2349, 1654, 1230];
let fill = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#367EEF",
},
{
offset: 0.5,
color: "#12A8C1",
},
{
offset: 1,
color: "rgba(6,23,53,0.2)",
},
]);
var option = {
backgroundColor: "#010d3a",
grid: {
left: 20,
right: 20,
bottom: 10,
top: 20,
containLabel: true,
},
xAxis: {
type: "category",
data: ["2019", "2020", "2021", "2022", "2023", "2024"],
axisLine: {
show: true,
lineStyle: {
color: "#4E7AA0",
},
},
offset: 0,
axisTick: {
show: false,
},
axisLabel: {
fontSize: 10,
color: "#92A0BD",
},
},
yAxis: {
type: "value",
axisLine: {
show: true,
lineStyle: {
color: "#4E7AA0",
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
fontSize: 10,
color: "#92A0BD",
},
boundaryGap: ["20%", "20%"],
},
series: [
{
type: "custom",
renderItem: (params, api) => {
const location = api.coord([
api.value(0),
api.value(1),
]);
return {
type: "group",
children: [
{
type: "CubeLeft",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([
api.value(0),
0,
]),
},
style: {
fill: fill,
},
},
{
type: "CubeRight",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([
api.value(0),
0,
]),
},
style: {
fill: fill,
},
},
{
type: "CubeTop",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([
api.value(0),
0,
]),
},
style: {
fill: "#A8DBE5",
},
},
],
};
},
data: VALUE,
},
{
type: "bar",
label: {
normal: {
show: true,
position: "top",
fontSize: 10,
color: "#3679BF",
offset: [4, -25],
},
},
itemStyle: {
color: "transparent",
},
data: VALUE,
},
],
};
option && myChart.setOption(option);
},
},
};
</script>七、象形柱形图
<template>
<div class="charts" ref="charts"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
let myChart = echarts.init(this.$refs.charts);
var option = {
backgroundColor: "#061E42",
grid: {
left: "50",
top: "20",
right: "10",
bottom: "30",
},
tooltip: {
position: "top",
},
xAxis: {
type: "category",
data: ["1月", "2月", "3月", "4月", "5月", "6月"],
axisLabel: {
show: true,
color: "#5A7FB3",
fontSize: 12,
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "#5A7FB3",
},
},
splitLine: {
show: false,
},
},
yAxis: {
type: "value",
axisLabel: {
show: true,
color: "#5A7FB3",
fontSize: 12,
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "#5A7FB3",
},
},
splitLine: {
show: false,
},
},
series: [
{
name: "1月",
data: [0, 0, 0, 0, 0, 0, 0],
stack: "a",
type: "bar",
},
{
name: "1月",
data: [0, 0, 0, 0, 0, 0, 0],
stack: "a",
type: "bar",
},
{
name: "2月",
data: [0, 0, 0, 0, 0, 0, 0],
stack: "a",
type: "bar",
},
{
name: "3月",
data: [0, 0, 0, 0, 0, 0, 0],
stack: "a",
type: "bar",
},
{
name: "4月",
data: [0, 0, 0, 0, 0, 0, 0],
stack: "a",
type: "bar",
},
{
name: "5月",
data: [0, 0, 0, 0, 0, 0, 0],
stack: "a",
type: "bar",
},
{
name: "6月",
data: [0, 0, 0, 0, 0, 0, 0],
stack: "a",
type: "bar",
},
{
type: "pictorialBar",
label: {
show: true,
position: "top",
color: "#A6CCFF",
fontSize: 10,
},
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#23EA5A",
},
{
offset: 1,
color: "rgba(59,113,215,0.2)",
},
],
global: false,
},
},
data: [2000, 3209, 4328, 3409, 5677, 3562],
stack: "a",
barCategoryGap: "-100%",
symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
},
],
};
myChart.setOption(option);
},
};
</script>
<style scoped>
.charts {
background-color: #fff;
width: 100%;
height: 100%;
}
</style>
好啦，以上就是鸡米花分享的所有内容了，如果觉得写的还不错的话，记得给我一个三连哦！