echarts 伪3d圆柱体堆叠柱状图效果实例，柱状图为渐变色堆叠为3d圆柱体柱状图，每个柱状图底部有个半圆效果会遮挡住下面的柱状图，柱状图顶部有一个椭圆遮挡柱状图顶部，让柱状图看起来像一个圆柱体。
实例代码
drawEcharts() {
var that = this
const imageDom = new Image();
let myChart = echarts.init(that.$refs.echarts)
let names = ["三元区", "明溪县", "清流县", "宁化县", "大田县"]
var list = names.map(name => ({
name,
value: this.getRandomInt(20, 50),
value2: this.getRandomInt(20, 50),
value3: this.getRandomInt(20, 50),
value4: 0,
value5: this.getRandomInt(20, 50),
value6: this.getRandomInt(20, 50),
}))
var option = {
grid: {
left: '20',
right: '10',
top: '60',
bottom: '10',
containLabel: true
},
legend: {
top: 0,
right: '0',
itemWidth: 8,
itemHeight: 8,
textStyle: {
color: 'rgba(157, 185, 233, 1)',
fontSize: '14'
},
icon: 'circle',
},
tooltip: {
show: true,
trigger: 'axis',
},
xAxis: {
data: list.map(obj => obj.name),
axisLine: {
lineStyle: {
color: '#1e424e',
}
},
axisTick: {
show: false
},
axisLabel: {
color: 'rgba(143, 173, 204, 1)',
fontSize: 14,
// rotate: -45
}
},
yAxis: [
{
splitNumber: 3,
nameTextStyle: {
color: 'rgba(146, 178, 215, 1)',
fontSize: 14
},
axisLine: {
show: true,
lineStyle: {
color: '#1e424e'
}
},
axisTick: {
show: false
},
axisLabel: {
color: 'rgba(146, 178, 215, 1)',
fontSize: 14
},
splitLine: {
show: true,
lineStyle: {
color: '#0d2a4d'
}
},
yAxisIndex: 0
}],
series: [
{
name: '家庭林场',
type: 'bar',
stack: '总量', // 堆叠标识符
barWidth: 20,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: 'rgba(255, 190, 60, 1)'},
{offset: 1, color: 'rgba(252, 176, 41, 1)'}
]
),
}
},
data: list.map(obj => obj.value),
markPoint: {
symbol: 'path://M112 512a400 240 0 1 0 800 0 400 240 0 1 0-800 0Z', // 使用 SVG path 绘制扁圆形状
symbolSize: [20, 8], // 设置扁圆的宽和高
itemStyle: {
color: '#ffbd3b' // 圆盘颜色
},
data: list.map((obj, index) => ({
xAxis: index, // 对应柱子的横坐标
yAxis: 0// 柱子的值加上一些偏移量
}))
}
},
{
name: '股份林场',
type: 'bar',
stack: '总量', // 堆叠标识符
barWidth: 25,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: 'rgba(17, 196, 215, 1)'},
{offset: 1, color: 'rgba(34, 237, 164, 1)'}
]
),
}
},
data: list.map(obj => obj.value2),
markPoint: {
symbol: 'path://M112 512a400 240 0 1 0 800 0 400 240 0 1 0-800 0Z', // 使用 SVG path 绘制扁圆形状
symbolSize: [20, 8], // 设置扁圆的宽和高
itemStyle: {
color: '#21e8ab' // 圆盘颜色
},
data: list.map((obj, index) => ({
xAxis: index, // 对应柱子的横坐标
yAxis: obj.value // 柱子的值加上一些偏移量
}))
}
},
{
name: '林业专业合作社',
type: 'bar',
stack: '总量', // 堆叠标识符
barWidth: 20,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#00FFF6'},
{offset: 0.5, color: '#00A8FF'},
{offset: 1, color: '#2A76FF'}
]
),
}
},
data: list.map(obj => obj.value3),
markPoint: {
symbol: 'path://M112 512a400 240 0 1 0 800 0 400 240 0 1 0-800 0Z', // 使用 SVG path 绘制扁圆形状
symbolSize: [20, 8], // 设置扁圆的宽和高
itemStyle: {
color: '#257afa' // 圆盘颜色
},
data: list.map((obj, index) => ({
xAxis: index, // 对应柱子的横坐标
yAxis: obj.value + obj.value2 // 柱子的值加上一些偏移量
}))
},
},
{
name: '林业专业合作社',
type: 'bar',
stack: '总量', // 堆叠标识符
barWidth: 20,
tooltip: {
show: false
},
legend: {
show: false
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#00FFF6'},
{offset: 0.5, color: '#00A8FF'},
{offset: 1, color: '#2A76FF'}
]
),
}
},
data: list.map(obj => obj.value4),
markPoint: {
symbol: 'path://M112 512a400 240 0 1 0 800 0 400 240 0 1 0-800 0Z', // 使用 SVG path 绘制扁圆形状
symbolSize: [20, 8], // 设置扁圆的宽和高
itemStyle: {
color: '#257afa' // 圆盘颜色
},
data: list.map((obj, index) => ({
xAxis: index, // 对应柱子的横坐标
yAxis: obj.value + obj.value2+ obj.value3 // 柱子的值加上一些偏移量
}))
},
}
]
}
myChart.clear()
myChart.resize()
myChart.setOption(option)
},
