"echarts": "^5.2.0",
<template>
<div :class="className" :style="{height:height,width:width}" id="myChart7" />
</template>
<script>
import * as echarts from 'echarts';
import resize from '@/utils/resize.js'
export var data1 = [{
value: 890,
name: '扶贫帮困'
},
{
value: 721,
name: '卫生环保'
},
{
value: 442,
name: '科学普及'
},
{
value: 466,
name: '应急事件'
},
{
value: 176,
name: '法律服务'
},
{
value: 674,
name: '邻里互助'
}
]
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '24vw'
},
height: {
type: String,
default: '20vh'
},
chartData: {
type: Array,
required: true
}
},
data() {
return {
chart: null,
timer: 0,
number: '1293',
}
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOption(val)
// this.setOptions(val)
}
}
},
mounted() {
// this.$nextTick(() => {
this.initChart();
// })
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
// clearInterval(this.timer); //销毁定时器
},
methods: {
// 清空当前实例
clearHander() {
if (this.chart) {
// clearInterval(this.timer); //销毁定时器
this.chart.dispose();
}
},
initChart() {
var myChart = echarts.init(document.getElementById('myChart7'));
var option = {
tooltip: {
trigger: 'item',
formatter: '{b}'
},
legend: {
orient: 'vertical',
right: 40,
itemHeight: 10,
itemWidth: 10,
width: 100, //图例的宽度,想要对齐这个必须要有
itemGap: 18, //各组的间距
data: ['扶贫帮困', '卫生环保', '科学普及', '应急事件', '法律服务', '邻里互助'],
// textStyle: { //图例文字的样式
// color: '#A9D5E8',
// fontSize: 12
// },
textStyle: {
rich: {
name: {
fontSize: 14,
color: "#A9D5E8",
padding: [0, 50, 0, 0]
},
num: {
fontSize: 14,
fontWeight: 500,
padding: [0, 0, 0, 0],
color: "#A9D5E8"
}
}
},
formatter: function(name) {
let tarValue;
for (let i = 0; i < data1.length; i++) {
if (data1[i].name == name) {
tarValue = data1[i].value;
}
}
return `{name|${name}}{num|${tarValue}}`;
},
},
color: ['#FE6361', '#09CCFD', '#23C343', '#89E9E0', '#A871E3', '#0095FF'],
series: [{
name: '政治面貌',
type: 'pie',
x: 'left',
radius: ['60%', '85%'],
center: ['30%', '45%'], //第一个调整左右,第二个调整上下
itemStyle: {
borderRadius: 3,
borderColor: '#0A2172',
borderWidth: 2
},
label: {
normal: {
show: true,
position: 'center',
color: '#fff',
formatter: '{total|1293}\n{active|总人数}',
rich: {
total: {
fontSize: 32,
fontWeight: 'bolder',
color: '#fff'
},
active: {
fontSize: 16,
color: '#fff',
lineHeight: 30,
},
}
}
},
emphasis: {
label: {
show: true,
fontSize: 14,
color: '#fff',
}
},
labelLine: {
normal: {
length: 4, // 改变标示线的长度
lineStyle: {
color: "#7DA4BE" // 改变标示线的颜色
}
},
},
data: data1,
},
{
name: '外边框',
type: 'pie',
clockWise: false,
radius: ['50%', '52%'], //边框大小
center: ['30%', '45%'], //边框位置
color: ['#0F2864'],
data: [{
value: 0,
itemStyle: {
normal: {
borderType: 'dotted', //dotted 虚线
borderWidth: 3, //设置边框粗细
borderColor: 'rgba(83, 144, 148, 1)', //边框颜色
// color: 'rgba(83, 144, 148, 1)',
}
}
}]
},
]
};
myChart.setOption(option);
window.addEventListener('resize', function() {
myChart.resize()
})
// window.addEventListener('resize', myChart.resize);
},
}
}
</script>