getEquipEch(arr, totla) {
if (arr) {
const chart = this.$refs.getEquipEchart;
if (chart) {
let barChart = this.$echarts.init(chart);
const option = {
color: ["#9933ce", "#285feb", "#04b7f9", "#6b5bf4"],
title: {
text: totla + "台", //图形标题,配置在中间对应效果图的位置
left: "72%",
top: "32%",
textStyle: {
color: "rgb(50,197,233)",
fontSize: 20,
align: "center",
},
},
tooltip: {
trigger: "item",
},
legend: {
type: "scroll",
orient: "vertical",
left: "left",
textStyle: { color: "#fft", fontSize: 14 },
itemGap: 20,
formatter: function (name) {
return name.length > 16 ? name.substr(0, 16) + "..." : name;
},
},
series: [
{
type: "pie",
radius: ["55%", "80%"],
center: ["80%", "40%"], // left top
avoidLabelOverlap: false,
label: {
show: false,
//position: 'center'
position: "inner",
},
emphasis: {
label: {
show: false,
fontSize: "20",
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
// data: [
// { value: 1048, name: '土壤水分监测器' },
// ]
data: arr,
},
],
};
barChart.setOption(option);
var _this = this;
barChart.on("legendselectchanged", function (params) {
barChart.setOption({
legend: { selected: { [params.name]: true } },
});
console.log("点击了", params.name);
var str = params.name;
var result = /^\D+(?=\d)/.exec(str);
_this.goDeviceDate(result);
});
}
}
},
echarts文字显示部分,超出显示省略号
转载请注明出处或者链接地址:https://www.qianduange.cn//article/1549.html
发布的文章
js实现动态数字滚动,插件jquery.counterup.min.js的使用方式
2024-02-22 11:02:40
echarts 3D柱状图
2024-02-22 11:02:39
jQuery的介绍以及应用场景
2024-02-22 11:02:39
JQuery工具框架
2024-02-22 11:02:38
【漏洞复现】jQuery-1.7.2 版本任意文件下载漏洞复现
2024-02-22 11:02:33
JavaScript和jQuery的关系
2024-02-22 11:02:33
jQuery淡入 淡出 —— W3school 详解 简单易懂(五)
2024-02-22 11:02:33
JQuery过滤选择器-如何让某个元素换颜色(俩种方式)
2024-02-22 11:02:32
jQuery下载使用
2024-02-22 11:02:11
echart图表渲染合并策略
2024-02-22 11:02:06
大家推荐的文章