企业建站系统cms,家用电脑网站建设,分析网站建设,广告设计教学大纲业务场景#xff1a;1、tooltip的背景需要渐变色#xff0c;写 html 标签#xff0c; 2、饼图内部的百分比需要保留整数 #xff0c;使用formatter#xff0c; export function genChartPieOption(pieData) {const res {replaceMerge: [series,], // 解决刷新之后y轴丢失… 业务场景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 stylebackground: 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);divdiv stylemargin-bottom: 2px;color: #ffffff;${item.name}span stylemargin-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
}
