const data = [ { value: 335, name: '特困人员供养' }, { value: 310, name: '房屋建筑施工许可' }, { value: 234, name: '发票领用' }, { value: 135, name: '信息查询' }, ] option = { tooltip: { trigger: 'item', // 设置提示框的位置 position: ["43%", "11%"], // 设为空值去掉提示框默认的背景色 backgroundColor: '', // 是否设置让提示框的内容一直显示默认值是false alwaysShowContent: true, formatter: (params) => { return `

${params.percent}%

${ params.name }

${params.value}

` }, }, legend: { right: 10, data: ['特困人员供养', '房屋建筑施工许可', '发票领用', '信息查询'], }, series: [ { name: '服务内容占比', type: 'pie', left: '-50%', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center', }, color: ['rgba(57,234,167,0.70)', 'rgba(252,83,137,0.60)', 'rgba(255,127,31,0.70)', 'rgba(255,220,100,0.70)'], emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold', }, }, labelLine: { show: false, }, itemStyle: { normal: { // borderColor: '#091B3A', // borderWidth: 8, }, }, data: data, }, { name: '', type: 'pie', left: '-50%', hoverAnimation: false, radius: ['47%', '42%'], avoidLabelOverlap: false, tooltip: { show: false, }, label: { normal: { show: false, }, }, itemStyle: { normal: { color: 'rgba(255,255,255,0.19)', }, }, data: [1], }, ] }; // 设置某条数据默认高亮且tooltip显示 // myChart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: dataIndex }) // myChart.dispatchAction({ type: 'highlight', dataIndex: dataIndex }) // myChart.on('mouseover', (params) => { // if (params.dataIndex !== dataIndex) { // myChart.dispatchAction({ type: 'downplay', dataIndex: dataIndex }) // } // this.hoverContentService = params // }) // myChart.on('mouseout', (params) => { // dataIndex = params.dataIndex // myChart.dispatchAction({ type: 'highlight', dataIndex: params.dataIndex }) // })

饼状图tooltip和高亮控制