鼠标移上去突出放大hoverAnimation: true
drawLine() {
var that = this
window.addEventListener('resize', this.drawLine)
let myChart = this.$echarts.init(this.$refs.echarts)
function Pie() {
let dataArr = [];
for (var i = 0; i < 150; i++) {
if (i % 2 === 0) {
dataArr.push({
name: (i + 1).toString(),
value: 25,
itemStyle: {
normal: {
color: 'rgba(255,255,255,0.2)',
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
})
} else {
dataArr.push({
name: (i + 1).toString(),
value: 10,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
})
}
}
return dataArr
}
const dataList = [
{
value: 75,
show: true,
name: '男性',
itemStyle: {
normal: {
color: '#007EFF',
borderWidth: 2,
borderColor: "#0633CA"
}
}
},
{
value: 63,
show: true,
name: '女性',
itemStyle: {
normal: {
color: 'rgba(255, 163, 0, 1)',
borderWidth: 2,
borderColor: "#0633CA"
}
},
}
]
var option = {
legend: {
selectedMode: false, // 取消图例上的点击事件
type: 'plain',
orient: 'vertical',
left: '63%',
top: 'center',
align: 'left',
itemGap: 15,
itemWidth: 15, // 设置宽度
itemHeight: 15, // 设置高度
symbolKeepAspect: false,
textStyle: {
color: '#000',
rich: {
name: {
verticalAlign: 'right',
align: 'left',
width: 90,
fontSize: 14,
color: '#D8DDE3',
},
value: {
align: 'left',
width: 50,
fontSize: 14,
padding: [5, 5, 5, -0],
color: '#D8DDE3',
}
}
},
data: dataList.map(item => {
if (item.show) {
return item.name
}
}),
formatter: function (name) {
if (dataList && dataList.length) {
for (var i = 0; i < dataList.length; i++) {
if (name === dataList[i].name) {
return (
'{name| ' + name + '} \n' + '{value| ' + dataList[i].value + '%}'
)
}
}
}
}
},
series: [
{
name: '',
type: 'pie',
radius: ['60%', '74%'],
center: ['30%', '50%'],
hoverAnimation: true,
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false
}
},
labelLine: {
show: false
},
data: dataList
},
]
}
myChart.clear()
myChart.resize()
myChart.setOption(option)
},