Echarts——按数据系列设置设置3D柱状比例图
设置3D柱状图的关键：每个3D柱状图需要分成3部分进行实现，分别是头部和底部使用type: 'pictorialBar'设置柱状图的头部及底部，然后中间主体部分使用type: 'bar'。
同时要做成显示比例的效果，这里使用的方式是通过stack参数实现。stack——数据堆叠，同个类目轴上系列配置相同的 stack 值可以堆叠放置。这个例子就是通过堆叠每个系列中的“已完成”和“未完成”的数据来实现数据的比例显示。
<template>
<div id="app">
<div class="charts" ref="charts"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
name: 'App',
mounted () {
console.log(this.init);
this.$nextTick(() => {
this.init()
})
},
methods: {
init () {
const sDataOne = [2, 3, 4]
const sDataTwo = [5, 9, 1]
const sAllData = [7, 12, 5]
const option = {
// 提示框
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (e) {
const str =
e[1].axisValueLabel + '：' +
'
' +
"" +
'' +
e[1].seriesName + '：' + e[1].data +
'
' +
"" +
'' +
e[4].seriesName + '：' + e[4].data
return str
}
},
/** 区域位置 */
grid: {
top: 10,
right: 0,
bottom: 20,
left: 20
},
// X轴
xAxis: {
data: ['数据集一', '数据集二', '数据集三'],
type: 'category',
axisLine: {
show: true,
lineStyle: {
color: '#AAB9CE'
}
},
axisLabel: {
color: '#222F40'
}
},
yAxis: {
show: true,
splitNumber: 4,
axisLine: {
show: true,
lineStyle: {
color: '#AAB9CE'
}
},
splitLine: {
show: false
},
axisLabel: {
color: '#222F40'
}
},
series: [
{
z: 3, // 图形元素间的覆盖关系，数值越大，越在层叠的上方
name: '已完成_头部',
type: 'pictorialBar',
symbolPosition: 'end', // 图形的定位位置，'start'：图形边缘与柱子开始的地方内切；'end'：图形边缘与柱子结束的地方内切；'center'：图形在柱子里居中。
symbol: 'diamond',
symbolOffset: [-22, '-50%'],
symbolSize: [22, 11],
itemStyle: {
normal: {
borderWidth: 0,
color: params => {
return params.data === 0 ? 'transparent' : '#5AC7FF'
}
}
},
data: sDataOne
},
{
type: 'bar',
name: '已完成',
barWidth: 22,
stack: '1', // 与 name: '已完成_背景_主体' 的bar堆叠
barCateGoryGap: 10,
itemStyle: {
normal: {
color: () => {
// 设置渐变色
return {
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 0, color: '#5AC7FF' // 0% 处的颜色
}, {
offset: 1, color: '#3388FF' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}
},
data: sDataOne,
label: {
show: true,
position: 'top',
textStyle: {
color: '#047bdf'
}
}
},
{
z: 3,
name: '已完成_底部',
type: 'pictorialBar',
symbol: 'diamond', // 设置图形类型为菱形
symbolOffset: [-22, '50%'], // 设置位置的偏移值，对齐主体
symbolSize: [22, 11], // 设置菱形的大小
itemStyle: {
normal: {
color: params => {
return params.data === 0 ? 'transparent' : '#5AC7FF'
}
}
},
data: sDataOne
},
{
z: 3,
name: '未完成_头部',
type: 'pictorialBar',
symbolPosition: 'end',
symbol: 'diamond',
symbolOffset: ['100%', '-50%'],
symbolSize: [22, 11],
itemStyle: {
normal: {
borderWidth: 0,
color: params => {
return params.data === 0 ? 'transparent' : '#FFC053'
}
}
},
data: sDataTwo
},
{
type: 'bar',
name: '未完成',
barWidth: 22,
stack: '2', // 与 name: '未完成_背景_主体' 的bar堆叠
itemStyle: {
normal: {
color: () => {
return {
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 0, color: '#FFC053' // 0% 处的颜色
}, {
offset: 1, color: '#FF9553' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}
},
data: sDataTwo,
barCateGoryGap: 10,
label: {
show: true,
position: 'top',
textStyle: {
color: '#ea853c'
}
}
},
{
z: 3,
name: '未完成_底部',
type: 'pictorialBar',
symbol: 'diamond',
symbolOffset: ['100%', '50%'],
symbolSize: [22, 11],
itemStyle: {
normal: {
color: params => {
return params.data === 0 ? 'transparent' : '#FFC053'
}
}
},
data: sDataTwo
},
{
z: 2,
name: '已完成_背景_头部',
type: 'pictorialBar',
symbol: 'diamond',
symbolPosition: 'end',
symbolOffset: [-22, '-50%'],
symbolSize: [22, 11],
itemStyle: {
normal: {
borderWidth: 0,
color: params => {
return sDataTwo[params.dataIndex] === 0 ? 'transparent' : 'rgba(51, 136, 255, 0.2)'
}
}
},
data: sAllData
},
{
type: 'bar',
name: '已完成_背景_主体',
barWidth: 22,
stack: '1',
itemStyle: {
color: 'rgba(51, 136, 255, 0.2)'
},
barGap: '100%',
barCateGoryGap: 10,
data: sDataTwo,
label: {
show: false,
position: [0, -42],
color: '#ffffff',
fontSize: 14,
fontStyle: 'bold',
align: 'center'
}
},
{
z: 2,
name: '已完成_背景_底部',
type: 'pictorialBar',
symbol: 'diamond',
symbolOffset: [-22, '50%'],
symbolSize: [22, 11],
itemStyle: {
normal: {
borderWidth: 0,
color: params => {
return sDataOne[params.dataIndex] === 0 ? 'rgba(51, 136, 255, 0.2)' : 'transparent'
}
}
},
data: sDataTwo
},
{
z: 2,
name: '未完成_背景_头部',
type: 'pictorialBar',
symbol: 'diamond',
symbolOffset: ['100%', '-50%'],
symbolPosition: 'end',
symbolSize: [22, 11],
itemStyle: {
normal: {
color: params => {
return sDataOne[params.dataIndex] === 0 ? 'transparent' : 'rgba(255, 149, 83, 0.2)'
}
}
},
data: sAllData
},
{
type: 'bar',
name: '未完成_背景_主体',
barWidth: 22,
stack: '2',
barGap: '100%',
barCateGoryGap: 10,
itemStyle: {
normal: {
color: 'rgba(255, 149, 83, 0.2)'
}
},
data: sDataOne,
label: {
show: false,
position: [11, -42],
color: '#ffffff',
fontSize: 14,
fontStyle: 'bold',
align: 'center'
}
},
{
z: 2,
name: '未完成_背景_底部',
type: 'pictorialBar',
symbol: 'diamond',
symbolOffset: ['-50%', '-50%'],
symbolSize: [22, 11],
itemStyle: {
normal: {
borderWidth: 0,
color: params => {
return sDataTwo[params.dataIndex] === 0 ? 'rgba(255, 149, 83, 0.2)' : 'transparent'
}
}
},
data: sDataOne
}
]
}
const chartDom = echarts.init(this.$refs.charts)
chartDom.setOption(option)
}
}
}
</script>
<style scoped>
html, body, #app {
width: 100%;
height: 100%;
}
.charts {
width: 100%;
height: 300px;
}
</style>
效果图：
