当前位置：首页 > news >正文

Echarts饼图tooltip渐变色，内部legend百分比保留整数方法

news 来源：原创 2024/5/9 0:17:36

业务场景：1、tooltip的背景需要渐变色，写 html 标签，

2、饼图内部的百分比需要保留整数，使用formatter，

export function genChartPieOption(pieData) {const res = {replaceMerge: ['series',], // 解决刷新之后y轴丢失问题title: {show: false,},tooltip: {trigger: 'item',backgroundColor: 'rgba(50,50,50,0)',// borderColor: '#032E74',borderWidth: 0,axisPointer: {crossStyle: {color: '#999',width: 2,}},formatter({ color, name, value, percent }) {const tipItems = [{color,name,value,percent,}];const resArr = [...tipItems.map((item => {return `<div style="background: linear-gradient(180deg, #008AFF99 0%, #114ACB99 100%);box-shadow: 0px 0px 10px 0px rgba(4,20,55,0.79);border-radius: 4px; padding: 12px; backdrop-filter: blur(2px);"><div><div style="margin-bottom: 2px;color: #ffffff;">${item.name}<span style="margin-left: 16px;">${item.value}(${Math.round(item.percent) || 0}%)</span></div> </div></div>`;}))]return resArr.join('')},textStyle: {color: '#D9DCE3',},},legend: {left: 'center',bottom: 0,itemGap: 8,// orient: "vertical",itemWidth: 16,itemHeight: 10,padding: [0, 5, 1, 0 ], textStyle: {fontSize: '12px',fontFamily: 'MicrosoftYaHei',color: '#D9DCE3',},},color: ['#0C52C3','#2B9DEE','#1BBDB7','#19D272',],series: {type: 'pie',radius: ['40%', '52%'],center: ['50%', '45%'],labelLine: {show: false},label: {show: false,position: 'center',},itemStyle: {borderRadius: 2,borderColor: '#021744',borderWidth: 4},emphasis: {label: {// formatter: '{b|{b}}\n{d|{d}%}', // d代表百分比formatter: function(params) {var d = Math.round(params.percent); // 取整数return '{b|' + params.name + '}\n{d|' + d + '%}';},show: true,verticalAlign: 'middle',// 富文本样式rich: {b: {color: '#B1C8EB',lineHeight: 24,fontSize: 12,},d: {color: '#D9DCE3',lineHeight: 24,fontSize: 16,fontWeight: 600,},}}},data: pieData || [],// data: [//   { value: 468, name: '客服热线' },//   { value: 816, name: '管网留言' },//   { value: 365, name: '内部人员反馈'},//   { value: 500, name: '其他'},// ]}}return res
}