扇形图标的的视图显示：左侧的数值对应右侧的百分比，鼠标悬停放大显示
<template> <div class="numericalBox"> <p class="title">随访完成情况分析</p> <div id="analysis_main" style="width:700px;height:300px;"> </div> </div></template><script>export default { name: 'sector', data () { return { checkList: [] } }, mounted () { this.followStatistics() }, methods: { followStatistics () { let myChart = this.$echarts.init(document.getElementById('analysis_main'),); let option = { //悬停提示 // tooltip: { // trigger: 'item' // }, radius: ['50%', '60%'], legend: { orient: 'vertical', left: '5%', top: '23%', textStyle: { fontSize: 16,//图例文字字体大小 color: '#fff'//图例文字颜色 }, itemHeight: 16,//图例图标的高度 itemWidth: 16,//图例图标的宽度 itemGap: 50,//图例图标与文字间的间距 }, series: [ { type: 'pie', radius: ['40%', '70%'], avoidLabelOverlap: false, label: { normal: { show: true, position: 'inner', // 数值显示在内部 formatter: '{d}%', // 格式化数值百分比输出 }, }, emphasis: { label: { show: true, fontSize: 40, formatter: '{d}%' } }, labelLine: { show: false }, data: [ { value: 2031, name: '规律服药 2,031' }, { value: 1073, name: '间接服药 1,073' }, { value: 317, name: '不断药 317' }, ], itemStyle: { normal: { color: function (colors) { let colorList = [ '#ed6666', '#f9c85b', '#546fc6', ]; return colorList[colors.dataIndex]; } }, } } ] }; myChart.setOption(option); window.addEventListener("resize", () => { myChart.resize(); }); } },}</script><style lang="scss" scoped>.title { margin: 10px 10px; width: 30%; text-align: center; background-color: #23305c; border-radius: 0 30px 30px 0;}.optionBox { /deep/ .el-checkbox-group { float: right; }}</style>
