echarts餅狀圖引導線左右對稱漸變、引導線上文字左右對齊（Vue實現）
阿新 • • 發佈：2021-01-13
效果圖：
大致思路：
平時看echart是官網的例子大多數都是在option裡面直接新增屬性，但是如果想要達到每一條資料的樣式都不一樣採用這種方式是無法實現的。
其實可以通過series.data等於一個屬性的物件來實現。
提示:該demo資料最多8條
option：
var option = {
tooltip: {},
series: [
{
type: 'pie',
radius: [45, 75],
roseType: 這部分主要功能是設定了一些公共的屬性以及預設的引導線樣式
dataObj：
this.dataObj = []
var num = this.data.length
var line = Math.ceil(num / 2)
this.length = this.lengthArr[num - 1]
for (var i = 0; i < this.data.length; i++) {
var temp = {}
if (i < line) {
temp = {
value: this.data[i],
name: this.name[i],
labelLine: {
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [{
offset: 1, color: 'rgba(255,255,255,0.6)' // 0% 處的顏色
}, {
offset: 0.8, color: 'rgba(255,255,255,0.3)' // 100% 處的顏色
}, {
offset: 0.4, color: 'rgba(255,255,255,0.1)' // 100% 處的顏色
}, {
offset: 0.2, color: this.endColor[i] // 100% 處的顏色
}, {
offset: 0, color: this.endColor[i] // 100% 處的顏色
}],
global: false // 預設為 false
}
}
},
label: {
rich: {
a: {
color: '#ffffff',
fontWeight: 14,
fontFamily: 'SegoeUI-Semibold',
width: 1,
align: 'center',
padding: [0, 0, 5, 0]
},
b: {
color: '#ffffff',
fontWeight: 12,
fontFamily: 'SegoeUI',
align: 'left',
width: 1,
padding: [5, 0, 0, -20]
}
}
}
}
} else {
temp = {
value: this.data[i],
name: this.name[i],
labelLine: {
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [{
offset: 1, color: this.endColor[i] // 0% 處的顏色
}, {
offset: 0.8, color: this.endColor[i] // 100% 處的顏色
}, {
offset: 0.6, color: 'rgba(255,255,255,0.1)' // 100% 處的顏色
}, {
offset: 0.2, color: 'rgba(255,255,255,0.3)' // 100% 處的顏色
}, {
offset: 0, color: 'rgba(255,255,255,0.6)' // 100% 處的顏色
}],
global: false // 預設為 false
}
}
},
label: {
rich: {
a: {
color: '#ffffff',
fontWeight: 14,
fontFamily: 'SegoeUI-Semibold',
width: 1,
align: 'center',
padding: [0, 0, 5, 0]
},
b: {
color: '#ffffff',
fontWeight: 12,
fontFamily: 'SegoeUI',
align: 'right',
width: 1,
padding: [5, -20, 0, 0]
}
}
}
}
}
this.dataObj.push(temp)
}
這部分主要是通過總數來判斷資料的引導線會出現在左側還是右側，然後賦予不同的樣式。
完整程式碼:
<template>
<div id="illegalActivitiesEcharts" style="width: 110%;height:280px;" class="echarts"></div>
</template>
<script>
export default {
arr: 'illegalActivitiesStatisticsForm',
data () {
return {
color: ['#D4302F', '#81DFEA', '#4DD0E2', '#29B6F7', '#06A9F4', '#029CE5', '#0388D2', '#01579B'], // 第一個是紅色，代表數量最多的違法行為
endColor: ['#F44336', '#81DFEA', '#4DD0E2', '#29B6F7', '#06A9F4', '#029CE5', '#0388D2', '#01579B'], // 末端的顏色
length: 118, // 不同數量下的引導線長度
lengthArr: [100, 110, 123, 135, 115, 110, 110, 118],
dataObj: [] // series資料
}
},
props: {
data: Array,
name: Array
},
watch: {
data () {
this.getData()
this.drawLine()
}
},
methods: {
drawLine () {
var echarts = require('echarts')
// 基於準備好的dom，初始化echarts例項
var myChart = echarts.init(document.getElementById('illegalActivitiesEcharts'))
// 指定圖表的配置項和資料
var option = {
tooltip: {},
series: [
{
type: 'pie',
radius: [45, 75],
roseType: 'area',
height: '205px',
clockwise: false,
data: this.dataObj,
label: { // 文字
color: '#ffffff',
fontWeight: 12,
fontFamily: 'SegoeUI',
// align: 'right',
alignTo: 'labelLine',
// formatter: '{d}%\n{b}',
padding: [0, -30],
formatter: [
'{a|{d}%}',
'{b|{b}}'
].join('\n'),
rich: {
a: {
color: '#ffffff',
fontWeight: 14,
fontFamily: 'SegoeUI-Semibold',
width: 1,
align: 'center',
padding: [0, 0, 5, 0]
},
b: {
color: '#ffffff',
fontWeight: 12,
fontFamily: 'SegoeUI',
align: 'center',
width: 1,
padding: [5, 0, 0, 0]
}
}
},
labelLine: { // 引導線
length2: this.length,
lineStyle: {
// color: '#ffffff',
width: 1,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [{
offset: 0, color: '#FFFFFF' // 0% 處的顏色
}, {
offset: 0.5, color: 'rgba(255,255,255,0.2)' // 100% 處的顏色
}, {
offset: 1, color: '#FFFFFF' // 100% 處的顏色
}],
global: false // 預設為 false
},
opacity: 0.5
}
},
itemStyle: { // 餅狀部分
color: (seriesIndex) => {
return this.color[seriesIndex.dataIndex]
}
}
}
]
}
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option)
},
getData () {
this.dataObj = []
var num = this.data.length
var line = Math.ceil(num / 2)
this.length = this.lengthArr[num - 1]
for (var i = 0; i < this.data.length; i++) {
var temp = {}
if (i < line) {
temp = {
value: this.data[i],
name: this.name[i],
labelLine: {
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [{
offset: 1, color: 'rgba(255,255,255,0.6)' // 0% 處的顏色
}, {
offset: 0.8, color: 'rgba(255,255,255,0.3)' // 100% 處的顏色
}, {
offset: 0.4, color: 'rgba(255,255,255,0.1)' // 100% 處的顏色
}, {
offset: 0.2, color: this.endColor[i] // 100% 處的顏色
}, {
offset: 0, color: this.endColor[i] // 100% 處的顏色
}],
global: false // 預設為 false
}
}
},
label: {
rich: {
a: {
color: '#ffffff',
fontWeight: 14,
fontFamily: 'SegoeUI-Semibold',
width: 1,
align: 'center',
padding: [0, 0, 5, 0]
},
b: {
color: '#ffffff',
fontWeight: 12,
fontFamily: 'SegoeUI',
align: 'left',
width: 1,
padding: [5, 0, 0, -20]
}
}
}
}
} else {
temp = {
value: this.data[i],
name: this.name[i],
labelLine: {
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [{
offset: 1, color: this.endColor[i] // 0% 處的顏色
}, {
offset: 0.8, color: this.endColor[i] // 100% 處的顏色
}, {
offset: 0.6, color: 'rgba(255,255,255,0.1)' // 100% 處的顏色
}, {
offset: 0.2, color: 'rgba(255,255,255,0.3)' // 100% 處的顏色
}, {
offset: 0, color: 'rgba(255,255,255,0.6)' // 100% 處的顏色
}],
global: false // 預設為 false
}
}
},
label: {
rich: {
a: {
color: '#ffffff',
fontWeight: 14,
fontFamily: 'SegoeUI-Semibold',
width: 1,
align: 'center',
padding: [0, 0, 5, 0]
},
b: {
color: '#ffffff',
fontWeight: 12,
fontFamily: 'SegoeUI',
align: 'right',
width: 1,
padding: [5, -20, 0, 0]
}
}
}
}
}
this.dataObj.push(temp)
}
}
},
mounted () {
this.getData()
this.drawLine()
}
}
</script>
<style scoped>
.echarts {
position: relative;
top: 24px;
right: 20px;
}
</style>