这圆柱图看起来是不是很像3d的呢。但它不是真正的3d,其实是用《象形图》拼积木一样拼凑出来的。哈哈哈,vue2、vue3两种写法有兴趣就往下看,废话不多说,上代码。
clindrical-plot-3d (vue3)
<template>
<base-echarts
dom-id="testEcharts"
:option="option"
:width="200"
:height="300"
/>
</template>
<script setup>
import { reactive } from 'vue'
import BaseEcharts from '@/components/base-echarts' // 引入封装好的echarts组件
import echarts from 'echarts/lib/echarts'
const state = reactive({
xData2: ['居家隔离进度'],
schedule: 60, // 进度最大100
barWidth: 150, // 圆柱的宽度
circleHeight: 40 // 顶、中、底部圆形的高度
})
const option = reactive({
xAxis: {
data: state.xData2,
show: false
},
yAxis: {
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
formatter: function () {
return ''
}
}
},
// 提示框组件
tooltip: {
trigger: 'item', // 触发类型, 数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。
textStyle: {
color: '#fff' // 文字颜色
},
// 提示框浮层内容格式器,支持字符串模板和回调函数两种形式
// 水球图: {a}(系列名称),{b}(无),{c}(数值)
// 使用函数模板 传入的数据值 -> value: number|Array,
formatter: function (value) {
return `${state.xData2[0]}: ${state.schedule}%`
}
},
series: [
// 中间数据
{
name: '',
type: 'bar',
barWidth: state.barWidth, // 圆柱的宽度
barGap: '-100%',
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(
1,
0,
0,
0,
[
{
offset: 0.05,
color: 'rgba(15,114,190,0.9)'
},
{
offset: 0.23,
color: 'rgba(24,156,191,0.98)'
},
{
offset: 0.5,
color: 'rgba(25,98,191,1)'
},
{
offset: 0.8,
color: 'rgba(24,156,191,0.98)'
},
{
offset: 0.95,
color: 'rgba(23,151,191,.9)'
}
],
false
)
}
},
data: [state.schedule]
},
// 底部圆形
{
name: '',
type: 'pictorialBar', // 象形图
symbolSize: [state.barWidth, state.circleHeight], // 象形图大小
symbolOffset: [0, state.circleHeight / 2], // 位移
z: 0,
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(
1,
0,
0,
0,
[
{
offset: 0.05,
color: 'rgba(15,114,190,1)'
},
{
offset: 0.23,
color: 'rgba(24,156,191,1)'
},
{
offset: 0.5,
color: 'rgba(25,98,191,1)'
},
{
offset: 0.8,
color: 'rgba(24,156,191,1)'
},
{
offset: 1,
color: 'rgba(23,151,191,1)'
}
],
false
)
}
},
data: [100]
},
// 中部圆形
{
name: '',
type: 'pictorialBar',
symbolSize: [state.barWidth - 3, state.circleHeight],
symbolOffset: [0, -(state.circleHeight / 2)],
z: 12,
itemStyle: {
normal: {
opacity: 1,
color: '#189fc9',
label: {
show: true, // 开启显示
position: 'top',
offset: [0, 45],
textStyle: {
color: 'rgba(0,255,249,1)',
fontSize: 42,
fontFamily: 'DINCondensed-Bold'
},
formatter