Echarts双环饼状图
Echarts官网:https://www.echartsjs.com/examples/zh/index.html
<template>
<div :id="id" :style="chartSize" ref="chart"></div>
</template>
<script>
// eslint-disable-next-line
/* eslint-disable */
import echarts from "echarts";
export default {
name: "hzyhChart",
props: {
className: {
type: String,
default: "chart"
},
id: {
type: String
},
width: {
type: String,
default: "100%"
},
height: {
type: String,
default: "400px"
},
tzhyList:{
},
},
data() {
return {
chartSize: {},
};
},
created() {
this.chartSize = {
width: this.width,
height: this.height
};
},
mounted() {
this.initChart();
},
methods: {
initChart() {
// this.chart = echarts.init(document.getElementById(this.id));
this.chart = echarts.init(this.$refs.chart);
let option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical', //horizontal
// backgroundColor:'#fff',
color: '#fff',
//bottom: '0%',
x: 'right',
data: ['data1', 'data2', 'data3']
},
series: [
//内圈
{
name: '单位数',
type: 'pie',
roseType: 'area', //area比例缩放 ,radius
radius: ['20%', '40%'],
center: ['50%', '55%'], //位置
color: [ '#078686', '#00d0d0', '#034079', '#6f81da', '#00ffb4'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'inner', //center
formatter: '{d}%', //{d}
textStyle: {
color: '#fff',
fontWeight: 'bold',
fontSize: 14
}
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: 11100,
name: '物业服务'
}, {
value: 2220,
name: '机关团体'
}, {
value: 3303,
name: '事业单位'
}, {
value: 4404,
name: '企业单位'
}]
}, //外圈
{
name: '人员数',
type: 'pie',
radius: ['50%', '80%'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'inner', //center
formatter: function(param) {
return param.name + ':\n' + Math.round(param.percent) + '%';
},
textStyle: {
color: '#fff',
fontWeight: 'bold',
fontSize: 14
}
},
emphasis: {
show: false,
}
},
labelLine: {
normal: {
smooth: true,
lineStyle: {
width: 2
}
}
},
itemStyle: {
normal: {
shadowBlur: 30,
shadowColor: 'rgba(0, 0, 0, 0.4)'
}
},
data: [{
value: 21321,
name: '物业服务'
}, {
value: 1212,
name: '机关团体'
}, {
value: 121,
name: '事业单位'
}, {
value: 1212,
name: '企业单位'
}]
}
]
};
this.chart.setOption(option);
}
}
};
</script>
<style scoped>
div {
margin: 0 auto;
}
</style>