效果圖：
思路是：
通過(guò)數(shù)組循環(huán)生成多個(gè)echarts實(shí)例盒子，生成的柱形圖只有一條數(shù)據(jù)，是由多個(gè)圖表設(shè)置barGap: '-100%'實(shí)現(xiàn)重疊，并通過(guò)設(shè)置柱形圖中間顏色到邊上顏色的漸變形成類似3d的視覺(jué)效果，實(shí)際每一個(gè)柱形圖是由以下幾個(gè)圖表實(shí)現(xiàn)的：??
- 內(nèi)層背景的body（bar）
- 內(nèi)層背景的頂部圓圈 （pictorialBar）
- 外層綠色的實(shí)際值柱形圖 （bar）
- 外層頂部的圓圈 （pictorialBar）
- 外層底部的圓圈 （pictorialBar）
以及底部的圓盤是一個(gè)切圖??
技術(shù)棧
vue3 TypeScript echarts
準(zhǔn)備：
需要安裝echarts和echarts-gl
yarn add echarts
yarn add echarts-gl
代碼：
template:
<div class="bottom-bar">
<div v-for="item, index in barList" :key="index" class="bottom-item">
<img class="bar-bottom" src="@/assets/images/fiveWater/bar-bottom.png" alt="">
<div class="top-rate num-18 mgb12">
{{ item.rate }}%
</div>
<div :ref="ref => item.dom = ref" class="bar-box mgb12" />
<div class="bottom-name pang-18">
{{ item.name }}
</div>
</div>
</div>
javascript:文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-611801.html
import 'echarts-gl'
import * as echarts from 'echarts'
const barList = reactive([
{ name: '基本能力', rate: 98, total: 100, done: 98, dom: ref() },
{ name: '考核情況', rate: 100, total: 100, done: 100, dom: ref() },
{ name: '推進(jìn)情況', rate: 90, total: 100, done: 90, dom: ref() },
])
onMounted(() => {
initBar()
})
const initBar = () => {
data.barList.forEach((item) => {
const series = [item.done]
const staticData = toRaw(item)
const output_3DBarCharts = echarts.init(item.dom)
const options = get3DOptions(staticData, series)
output_3DBarCharts.setOption(options)
window.addEventListener('resize', () => {
output_3DBarCharts.resize()
})
})
}
const get3DOptions = (xData: { name: string; rate: number; total: number; done: number }, seriesData: number[]) => {
const { total, done } = xData
const options = {
grid: {
left: 0,
right: 0,
top: 7,
bottom: 20
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line' // 默認(rèn)為直線，可選為：'line' | 'shadow'
},
textStyle: {
fontFamily: 'TRENDS'
},
formatter: (params: any[]) => {
let str = `<div>${params[0].axisValue}:</div>`
str += `<div>完成數(shù)：${done}個(gè)</div>`
str += `<div>總數(shù)：${total}個(gè)</div>`
return str
}
},
legend: {
show: true,
icon: 'circle',
orient: 'horizontal',
top: '90.5%',
right: 'center',
itemWidth: 16.5,
itemHeight: 6,
textStyle: {
color: '#C9C8CD',
fontSize: 14
}
},
xAxis: [{
show: false,
data: [xData.name],
axisLabel: {
show: true,
textStyle: {
color: '#aaaaaa',
fontSize: 12
},
margin: 30, // 刻度標(biāo)簽與軸線之間的距離。
},
axisLine: {
show: false // 不顯示x軸
},
axisTick: {
show: false // 不顯示刻度
},
boundaryGap: true,
splitLine: {
show: false,
width: 1,
lineStyle: {
type: 'solid',
color: '#03202E'
}
}
}],
yAxis: [{
show: false,
axisLabel: {
interval: 'auto',
show: true,
textStyle: {
fontSize: 14,
color: '#fff',
},
},
splitLine: {
show: false,
lineStyle: {
color: 'rgba(49,176,255,0.05)',
},
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(49,176,255,0.5)',
},
},
}],
series: [
// 柱頂圓片 背景
{
name: '',
type: 'pictorialBar',
symbolSize: [52, 20], // 調(diào)整截面形狀
symbolOffset: [0, -6],
z: 12,
symbolPosition: 'end',
label: {
show: false,
position: 'top',
textStyle: {
color: '#fff'
}
},
itemStyle: {
normal: {
color: () => {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(0, 58, 77, 1)' },
{ offset: 1, color: 'rgba(0, 158, 209, 1)' },
])
},
}
},
data: [total]
},
// 柱體 背景
{
name: '',
type: 'bar',
barWidth: '100%',
itemStyle: {
color: () => {
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: 'rgba(0, 58, 77, 1)' },
{ offset: 0.5, color: 'rgba(0, 58, 77, 0)' },
{ offset: 1, color: 'rgba(0, 58, 77, 1)' },
])
},
opacity: 1
},
data: [total]
},
{ // 頂部園片 數(shù)據(jù)實(shí)體
name: '',
type: 'pictorialBar',
symbolSize: [52, 20], // 調(diào)整截面形狀
symbolOffset: [0, -6],
z: 13,
symbolPosition: 'end',
itemStyle: {
normal: {
color: () => {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(159, 255, 224, 0.8)' },
{ offset: 1, color: 'rgba(75, 210, 187, 0.8)' },
])
},
}
},
data: seriesData || []
},
{ // 柱體 數(shù)據(jù)實(shí)體
name: '',
type: 'bar',
barWidth: '100%',
barGap: '-100%',
itemStyle: {
normal: {
color: () => {
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: 'rgba(0, 58, 77, 1)' },
{ offset: 0.5, color: 'rgba(113,286,181, .7)' },
{ offset: 1, color: 'rgba(0, 58, 77, 1)' },
])
},
}
},
data: seriesData || []
},
{ // 柱底圓片
name: '',
type: 'pictorialBar',
symbolSize: [58, 18], // 調(diào)整截面形狀
symbolOffset: [0, 8],
z: 12,
itemStyle: {
color: () => {
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: 'rgba(0, 58, 77, 1)' },
{ offset: 0.5, color: 'rgba(113,286,181, .7)' },
{ offset: 1, color: 'rgba(0, 58, 77, 1)' },
])
},
},
data: seriesData || []
},
]
}
return options
}
css樣式文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-611801.html
.bottom-bar {
display: flex;
justify-content: space-between;
margin-top: 25px;
.bar-bottom {
position: absolute;
bottom: 27px;
left: 50%;
z-index: -1;
width: 80px;
transform: translateX(-50%);
}
.bottom-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.bar-box {
width: 52px;
height: 80px;
}
}
到了這里，關(guān)于echarts實(shí)現(xiàn)一個(gè)3d效果柱形圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
