echarts 3D圓柱圖

小小强学习网發表於2024-05-22
Echarts3D

mounted() {
  this.$nextTick(() => {
      let d={
                color:"#FDB358",
                rbg:"253,179,88",
                rbg2:"253,227,100",
                pos:"contc1",
                barWidth:75,//柱子寬度
                schedule:70,//百分比
                circleHeight:30,// 頂、中、底部圓形的高度
     }    
        this.optionFn(d); //民主生活會進度 charts3        
       
   });
}
optionFn (data) {
let myChart = echarts.init(document.getElementById(data.pos));
this.option = {
xAxis: {
data:10,
show: false
},
yAxis: {
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
formatter: () => {
return ''
}
}
},
series: [
// 中間資料
{
name: '',
type: 'bar',
barWidth: data.barWidth, // 圓柱的寬度
barGap: '-100%',
itemStyle: {
color: (params) => {
return new echarts.graphic.LinearGradient(
1,
0,
0,
0,
[
{
offset: 0.05,
color: 'rgba('+data.rbg+',0.9)'
},
{
offset: 0.23,
color: 'rgba('+data.rbg+',0.98)'
},
{
offset: 0.5,
color: 'rgba('+data.rbg2+',1)'
},
{
offset: 0.8,
color: 'rgba('+data.rbg2+',0.98)'
},
{
offset: 0.95,
color: 'rgba('+data.rbg+',0.9)'
}
],
false
)
}
},
data: [data.schedule]
},
// 底部圓形
{
name: '',
type: 'pictorialBar', // 象形圖
symbolSize: [data.barWidth, data.circleHeight], // 象形圖大小
symbolOffset: [0, data.circleHeight / 2], // 位移
z: 0,
itemStyle: {
color: (params) => {
return new echarts.graphic.LinearGradient(
1,
0,
0,
0,
[
{
offset: 0.05,
color: 'rgba('+data.rbg+',1)'
},
{
offset: 0.23,
color: 'rgba('+data.rbg+',1)'
},
{
offset: 0.5,
color: 'rgba('+data.rbg2+',1)'
},
{
offset: 0.8,
color: 'rgba('+data.rbg2+',1)'
},
{
offset: 0.95,
color: 'rgba('+data.rbg+',1)'
}
],
false
)
}
},
data: [100]
},
// 中部圓形
{
name: '',
type: 'pictorialBar',
symbolSize: [data.barWidth - 3, data.circleHeight],
symbolOffset: [0, -(data.circleHeight / 2)],
z: 12,
itemStyle: {
normal: {
opacity: 1,
color: data.color,
label: {
show: true, // 開啟顯示
position: 'top',
offset: [0,10],
textStyle: {
color: '#fff',
fontSize: 18,
fontFamily: 'DINCondensed-Bold'
},
formatter: (param) => {
return param.data + '%'
}
},
borderWidth: 1,
borderType: 'solid',
borderColor: '#000'
}
},
symbolPosition: 'end',
data: [data.schedule]
},
// 頂部圓形
{
name: '',
type: 'pictorialBar',
symbolSize: [data.barWidth - 3, data.circleHeight],
symbolOffset: [0, -(data.circleHeight / 2)],
z: 12,
symbolPosition: 'end',
itemStyle: {
color: (params) => {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba('+data.rbg+',0.2)'
},
{
offset: 0.3,
color: 'rgba('+data.rbg+',0.2)'
},
{
offset: 1,
color: 'rgba('+data.rbg+',0.2)'
}
],
false
)
},
borderWidth: 1.5,
borderType: 'solid',
opacity: 1,
borderColor: '#0085c3'
},
data: [100]
},
// 剩餘的背景
{
name: '',
type: 'bar',
barWidth: data.barWidth,
barGap: '-100%',
z: 0,
itemStyle: {
color: (params) => {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba('+data.rbg+',0)'
},
{
offset: 0.08,
color: 'rgba('+data.rbg+',0.1)'
},
{
offset: 1,
color: 'rgba('+data.rbg+',0.5)'
}
],
false
)
}
},
data: [100]
},
// 左邊邊框
{
name: '',
type: 'bar',
barWidth: data.barWidth,
barGap: '-100%',
z: 0,
itemStyle: {
color: (params) => {
return new echarts.graphic.LinearGradient(
1,
0,
0,
0,
[
{
offset: 0,
color: 'rgba('+data.rbg+',1)'
},
{
offset: 0.015,
color: 'rgba('+data.rbg+',0)'
}
],
false
)
}
},
data: [100]
},
// 右邊邊框
{
name: '',
type: 'bar',
barWidth: data.barWidth,
barGap: '-100%',
z: 0,
itemStyle: {
color: (params) => {
return new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 0,
color: 'rgba('+data.rbg+',1)'
},
{
offset: 0.015,
color: 'rgba('+data.rbg+',0)'
}
],
false
)
}
},
data: [100]
}
]
}
myChart.setOption(this.option);
},



學習網址網址：

https://blog.csdn.net/qq_42669897/article/details/126409288

相關文章