<template> <div :class="className" :style="{ height: height, width: width }" /> </template> <script> import echarts from 'echarts'; require('echarts/theme/macarons'); // echarts theme import resize from './mixins/resize'; export default { mixins: [resize], props: { className: { type: String, default: 'chart' }, width: { type: String, default: '150px' }, height: { type: String, default: '150px' }, autoResize: { type: Boolean, default: true }, chartData: { type: Object, required: true } }, data() { return { chart: null }; }, watch: { chartData: { deep: true, handler(val) { this.setOptions(val) } } }, mounted() { this.$nextTick(() => { this.initChart(); }); console.log(this.chartData,58) }, beforeDestroy() { if (!this.chart) { return; } this.chart.dispose(); this.chart = null; }, methods: { initChart() { this.chart = echarts.init(this.$el, 'macarons'); this.chart = echarts.init(this.$el, 'macarons') this.setOptions(this.chartData) }, setOptions({ czzrs , czbfb,zrs } = {}) { this.chart.setOption({ color: [new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 0, color: '#F69F24' }, { offset: 1, color: '#F69F24' }]), new echarts.graphic.LinearGradient(1, 1, 0, 0, [{ offset: 0, color: '#FFE1B7' }, { offset: 0.9, color: '#FFE1B7' }]),], tooltip: { trigger: 'item' }, legend: { top: '10%', left: 'center', data:[] }, // 设置环形中间的数据 graphic: [{ type: 'text', left: 'center', top: '47%', z: 10, style: { fill: '#F69F24', text: czbfb, font: '12px Microsoft YaHei' }, textStyle: { color: "#F69F24", fontSize: 12, align: "center" } }], series: [ { name: '人口数据', type: 'pie', radius: ['50%', '70%'], center: ['center', '50%'], avoidLabelOverlap: false, // label: { // show: false, // position: 'center' // }, // emphasis: { // label: { // show: true, // fontSize: '17', // fontWeight: '400', // color:'#2497D5' // } // }, // labelLine: { // show: true // }, itemStyle: { normal: { label: { show: false }, labelLine: { show: false } }, emphasis: { label: { show: false, position: 'outer', textStyle: { fontSize: '15', fontWeight: 'bold', color: 'white' } } } }, data: [ {value: czzrs, name: '常住总人数'}, {value: zrs, name: '总人数'} ] } ] }) } } }; </script>