南京做网站公司 雷仁次世代建模培训

提示：本篇解决echarts的饼状图图例legend过长，省略号展示；同时，该饼状图设置了很多特性，可作为通用饼图参考

重点在于dealWith函数

---

1.原展示效果

2.图表数据

[{"name": "带宽使用率","value": 50.77,"color": "#00C2FF","rate": 50.77},{"name": "光功率","value": 14.78,"color": "#4FFFF0","rate": 14.78},{"name": "错包率","value": 14.78,"color": "#FFE600","rate": 14.78},{"name": "CPU使用率","value": 4.74,"color": "#3FD87C","rate": 4.74},{"name": "网络延时","value": 4.18,"color": "#FF8CA8","rate": 4.18},{"name": "长超文本需要省略号显示长超文本需要省略号显示","value": 10.75,"color": "#9966FF","rate": 10.75}
]

3.饼状图配置

import _ from 'lodash'// 解决文本过长需省略号显示
const dealWith = function (name, initData) {const than = initData; //获取series中的dataconst item = than.find(item => item.name === name);const len = name.length;// 数字5自己根据图例宽度调整即可if (len > 5) {// 超出就截取成省略号name = name.slice(0, 5) + '...';} else {// 下方是不足最长 补充宽度的空格-不建议使用// let str = '';// let mid = 4 - len;// mid = 5 - len;// while (mid) {//   str += '\xa0\xa0\xa0\xa0';//   mid--;// }// name = name + str;}return [`{name|${name}}  {value|${item.rate}%}`].join('\n');
}const getGraphChart = data => {// const totalNum = _.sumBy(data, "value")const option = {textStyle: {fontFamily: "Arial, sans-serif", // 设置全局字体// fontFamily: "serif , monospace, Arial, Courier New, Microsoft YaHei ", // 设置全局字体}, // 设置全局样式title: {text: '告警类型', // 主标题subtext: '统计', // 副标题left: '32%', // 水平居中top: '42%', // 垂直居中textAlign: 'center', // 主标题文本居中textStyle: {fontSize: 18, // 主标题字体大小color: '#fff'},subtextStyle: {fontSize: 18, // 副标题字体大小color: '#fff',align: 'center' // 副标题文本居中}},// 图表的tiptooltip: {backgroundColor: '#5E99D6', // 设置背景色textStyle: {color: '#fff' // 设置文本颜色},trigger: "item",// formatter: '{b} : {c} ({d}%)'formatter: params => {return (`${params.name}<br/>` +`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +`${params.data?.rate || 0}%`)} // hover示例},// 示例的tiplegend: {orient: 'vertical', // 图例排列方式， 此为竖着排列right: '0', // 离右侧的距离top: 'center',color: '#fff',// 自定义示例文案data: _.map(data, item => item.name),// formatter: name => {//   const item = data.find(item => item.name === name);//   return `{name|${name}}  {value|${item.rate}%}`;// },formatter: name => {return dealWith(name, data)},textStyle: {rich: {name: {fontSize: 18,color: '#fff', // 示例文本颜色为白色},value: {fontSize: 18,color: '#1fff', // 示例文本颜色为白色},}},tooltip: {show: true,trigger: 'item',// formatter: '{b} : {c} ({d}%)'formatter: params => {let item = data.find(item => item.name === params.name)return (`${params.name}<br/>` +`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${item?.color || '#fff'};"></span>` +`${item?.rate || 0}%`)} // hover示例},icon: 'block', // 设置图标形状为方形itemWidth: 11, // 设置圆形的宽度itemHeight: 11, // 设置圆形的高度type: "scroll", // 实力太多滚动// orient: 'vertical', // 垂直布局// right: '5%',// top: "bottom",// bottom: 20// // 关闭图例默认的选中切换功能// selectedMode: false},series: [{bottom: "2%",top: "2%",left: "2%",right: "35%",type: "pie",// radius: '50%',radius: ["40%", "60%"],// roseType: 'area',data: data.map(ele => {return {...ele,labelLine: { show: !!ele.value } // 值为0的就不展示线段}}),color: _.map(data, item => item.color),label: {// position: 'inner', // 将 label 的位置设置为 inner---示例详情在饼图内部// alignTo: 'edge',// formatter: '{name|{b}} \n {c}  {d}%',show: false, // 是否展示详情formatter: function (params) {return params.value ? `{title|${params.name}}{rich|（${params.value}）}\n{title|占比：}{rich|${params.percent}%}` : ""// return params.value ? `{title|${params.name}：}{rich|${params.value}}` : ''}, // 值为0的就不展示默认的示例edgeDistance: 10,lineHeight: 15,itemStyle: {},rich: {title: {color: "#000"// lineHeight: 24},rich: {// fontSize: 18}}// color: '#B4E4FF'},itemStyle: {borderColor: "#24567e", // 分割borderWidth: 3,},emphasis: {labelLine: {show: false // 去除hover时候多出来的示例线段}}},{name: "阴影圈",type: "pie",center: ["33.5%", "50%"],radius: ["38%", "45%"],// hoverAnimation: false,tooltip: {show: false,},itemStyle: {color: "rgba(0, 0, 0, 0.4)",},zlevel: 4,labelLine: {show: false,},data: [100],emphasis: {scale: false  // 去除该层放大效果}},]}return option
}