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(0, 239, 253, 1)',
borderWidth: 2,
borderColor: "#0633CA"
}
},
},
{
value: 43,
show: true,
name: '入境',
itemStyle: {
normal: {
color: 'rgba(38, 233, 154, 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%', '70%'],
center: ['30%', '50%'],
hoverAnimation: false,
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true
}
},
labelLine: {
show: false
},
data: dataList
},
{
type: 'pie',
zlevel: 0,
silent: true,
center: ['30%', '50%'],
radius: ['79%', '80%'],
z: 10,
itemStyle: {
normal: {
areaColor: 'rgba(137, 137, 137, .3)',
borderColor: '#4053CC',
},
emphasis: {
label: {
show: false
},
areaColor: 'rgba(255, 255, 255, .1)',
}
},
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: Pie()
},
{
type: 'pie',
zlevel: 0,
silent: true,
center: ['30%', '50%'],
radius: ['44%', '45%'],
z: 10,
itemStyle: {
normal: {
areaColor: 'rgba(137, 137, 137, .3)',
borderColor: '#4053CC',
},
emphasis: {
label: {
show: false
},
areaColor: 'rgba(255, 255, 255, .1)',
}
},
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: Pie()
},
{
type: 'pie',
name: '饼状背景',
radius: ['0%', '35%'],
center: ['30%', '50%'],
startAngle: 110,
hoverAnimation: false,
itemStyle: {
normal: {
color: new that.$echarts.graphic.RadialGradient(.5, .5, .8, [{
offset: 0,
color: 'rgba(255,255,255,0.05)'
},
{
offset: 0.5,
color: 'rgba(255,255,255,0.2)'
},
{
offset: 1,
color: 'rgba(255,255,255,0.1)'
}
], false),
}
},
tooltip: {
show: false,
},
label: {
show: false
},
data: [50]
},
]
}
myChart.clear()
myChart.resize()
myChart.setOption(option)
},
