<template> <div :id="id" style="width: 100%; height: 100%"></div> </template> <script> import * as echarts from 'echarts'; import { guid } from '@/utils/util'; import { reactive, toRefs, onMounted, watch } from 'vue'; export default { name: 'zishuijianceForWarn', props: { data: Array, }, setup(props) { const state = reactive({ id: guid(), chart: null, alldatenumber: 0, }); const resizeTheChart = () => { if (state.chart) { state.chart.resize(); } }; const init = () => { state.alldatenumber = 0; props.data.forEach(element => { state.alldatenumber += element.value; }); let chartDom = echarts.init(document.getElementById(state.id)); var option; option = { // backgroundColor: 'rgba(255,255,255,1)', // color: ['#8d7fec', '#5085f2', '#e75fc3', '#f87be2', '#f2719a', '#fca4bb', '#f59a8f'], legend: { orient: 'vartical', x: 'left', top: 'center', left: '60%', bottom: '0%', data: props.data.name, itemWidth: 8, itemHeight: 8, itemGap: 16, formatter: function (name) { var target, percent; for (var i = 0, l = props.data.length; i < l; i++) { if (props.data[i].name == name) { target = props.data[i].value; percent = props.data[i].percent; } } var arr = ['{a|' + name + '}{b|' + ' ' + percent + ' }']; return arr.join('\n'); }, textStyle: { rich: { a: { fontSize: 14, align: 'left', color: '#D1DEEE', fontFamily: 'PingFang-SC-Bold', padding: [0, 10, 0, 10], }, b: { fontSize: 14, color: '#F9FEFF', align: 'center', fontFamily: 'SourceHanSansCN-Regular', padding: [0, 10, 0, 0], }, }, }, }, series: [ { type: 'pie', clockwise: false, //饼图的扇区是否是顺时针排布 // minAngle: 2, //最小的扇区角度(0 ~ 360) radius: ['50%', '70%'], center: ['30%', '50%'], label: { normal: { show: false, position: 'center', formatter: '{text|{b}}\n{c}万吨/d', rich: { text: { color: '#F9FEFF', fontSize: 16, align: 'center', verticalAlign: 'middle', padding: 8, }, value: { color: 'rgb(0, 222, 255)', fontSize: 24, align: 'center', verticalAlign: 'middle', }, }, }, emphasis: { show: true, textStyle: { fontSize: 24, }, }, }, data: props.data, }, ], }; option && chartDom.setOption(option, true); chartDom.on('click', params => { console.log(params, '1111'); }); state.chart = chartDom; }; watch( () => props.data, (newVal, oldVal) => { if (newVal) { init(); } } ); onMounted(() => { init(); window.addEventListener('resize', resizeTheChart); }); return { ...toRefs(state), resizeTheChart, init, }; }, }; </script>