腾讯管家测网速仪表盘echarts控件怎么写？

最新推荐文章于 2023-08-27 13:37:18 发布

VIP文章 �娃家那位少女

最新推荐文章于 2023-08-27 13:37:18 发布

阅读量469

点赞数

分类专栏： Vue 文章标签：腾讯管家测试网速仪表盘echarts

本文链接：https://blog.csdn.net/ChXwww/article/details/101541840

版权

腾讯管家测网速仪表盘echarts控件怎么写？
在这里插入图片描述

.zv-components .gauge(ref="gauge") span.title { {title}} div.bgc span.data { {data}} span.unit { {unit}} div

emphasis: {
// 高亮的仪表盘指针样式
itemStyle: {
//高亮和正常两者具有同样的配置项,只是在不同状态下配置项的值不同。
}
},
title: {
// 仪表盘标题。
show: true, // 是否显示标题,默认 true。
offsetCenter: [0, “50%”], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
color: “#8B8B8B”, // 文字的颜色,默认 #333。
fontSize: 20 // 文字的字体大小,默认 15。
},

  detail: {
    // 仪表盘详情，用于显示数据。
    show: true, // 是否显示详情,默认 true。
    offsetCenter: [0, "50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
    color: "#fff", // 文字的颜色,默认 auto。
     fontSize: 12, // 文字的字体大小,默认 15。
    backgroundColor: "#fff",
    width:200,
    // formatter: "{value}", // 格式化函数或者字符串
    // formatter: function(value) {
    //   return value
    // }
  },
  //   markPoint: {
//     symbol: "circle",
//     symbolSize: 8,
//     data: [
//       //跟你的仪表盘的中心位置对应上，颜色可以和画板底色一样
//       { x: "center", y: "center", itemStyle: { color: "#FFF" } }
//     ]
//   },
 data: [{ value:"" , name: ""}]
}

]
};
export default {
name: “ZvChartPanel”,
props: {
data: {
type: String
},
title: {
type: String,
default() {
return “加载中”;
}
},
name: {
type: String,
default() {
return “加载中”;
}
},
unit: {
type: String,
default() {
return “”
}
},
min: {
type: Number,
default() {
return 0;
}
},
max: {
type: Number,
default() {
return 2500;
}
}
},
data() {
return {
chart: null,
instanceChartOption: {}
};
},
methods: {
drawGauge() {
let option = gaugeOption;
this.chart = echarts.init(this.