示例1
<doc>
仪表盘组件
</doc>
<template style="height: 100%;width: 100%;">
<div id="gauge" style="width: 100%; height: 100%"></div>
</template>
<script>
import { fontChart } from '@/utils/echartPxToRem'
import * as echarts from 'echarts'
export default {
data() {
return {
charts: "",
};
},
mounted() {
this.drawGauge();
},
props: {
value: {
type: String,
default: '100'
}
},
destroyed() {
window.removeEventListener("resize", this.selfAdaption);
},
methods: {
drawGauge() {
this.charts = echarts.init(document.getElementById("gauge"));
let option = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} (%)",
},
series: [
{
type: "gauge",
// 控制表盘大小
radius: "85%",
startAngle: fontChart(225), //开始角度
// endAngle: -20, //结束角度
axisLine: {
// 控制表格展开范围
show: false,
lineStyle: {
width: fontChart(5),
opacity: 0,
},
},
title: { show: false },
// 当前展示数值
detail: { // 仪表盘详情，用于显示数据。
show: true, // 是否显示详情,默认 true。
offsetCenter: [0,"80%"],// 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
color: '#fff',
fontWeight: '700',
fontSize: '12',
formatter: "{a| " + this.value +"}%\n出勤率", // 格式化函数或者字符串
rich: {
a: {
color: '#007acc'
}
}
},
// 整数刻度指示
splitLine: {
show: true,
length: 20,
},
axisTick: {
// 刻度格到中心的长度
length: fontChart(10),
// 刻度格之间的距离
splitNumber: fontChart(5),
lineStyle: {
// 刻度颜色
color: "#52B8DF",
// 刻度宽度
width: fontChart(3),
},
},
// 刻度数值显示
axisLabel: {
show: true,
distance: 15,
textStyle: {
color: '#fff'
}
},
// 表针显示
pointer: {
show: true,
length: '50%',
width: fontChart(8),
// offsetCenter: [0, '-55%'],
itemStyle:{
color:"#207ade",
// opacity: 0.7
},
},
data: [
{
value: parseFloat(this.value),
name: "出勤率",
nameTextStyle: {
fontSize: fontChart(13),
},
itemStyle: {
color: "#1990fd",
},
},
],
},
],
};
this.charts.setOption(option, true);
window.addEventListener("resize", this.selfAdaption);
},
// 自适应
selfAdaption() {
if(!this.charts) return
this.charts.resize();
this.drawGauge()
}
}
}
</script>
示例2
<template>
<div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script>
import * as echarts from "echarts";
import { fontChart } from "@/utils/echartPxToRem";
export default {
data() {
return {
charts: "",
};
},
props: {
id: {
type: String,
required: true,
},
min: {
type: String,
default: '0'
},
max: {
type: String,
default: '2'
},
gaugeData: {
type: Array,
default: () => [
{
name: "PUE",
value: 1.5,
},
]
},
splitNumber: {
type: String,
default: '4'
}
},
watch: {
gaugeData() {
this.drawGauge()
}
},
mounted() {
this.drawGauge();
},
destroyed() {
window.removeEventListener("resize", this.selfAdaption);
},
methods: {
drawGauge() {
// 基于准备好的dom，初始化echarts实例
this.charts = echarts.init(document.getElementById(this.id));
const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#5CF9FE", // 0% 处的颜色
},
{
offset: 0.17,
color: "#468EFD", // 100% 处的颜色
},
{
offset: 0.9,
color: "#468EFD", // 100% 处的颜色
},
{
offset: 1,
color: "#5CF9FE", // 100% 处的颜色
},
]);
const colorSet = [
[1, color],
// [0.91, color],
// [1, '#FFF']
];
// 指定图表的配置项和数据
let option = {
// backgroundColor: "black",
tooltip: {
show: false,
formatter: "{a} <br/>{b} : {c}%",
},
series: [
{
type: "gauge",
name: "外层辅助",
radius: "143%",
startAngle: "180",
endAngle: "0",
// splitNumber: "120",
pointer: {
show: false,
},
center: ["50%", "85%"], //整体的位置设置
detail: {
show: false,
},
data: [
{
value: 1,
},
],
// data: [{value: 1, name: 90}],
title: {
show: false,
offsetCenter: [0, 30],
textStyle: {
color: "#fff",
fontStyle: "normal",
fontWeight: "normal",
fontFamily: "微软雅黑",
fontSize: fontChart(20),
},
},
axisLine: {
show: true,
lineStyle: {
color: [[1, "#00FFFF"]],
width: fontChart(2),
opacity: 1,
},
},
axisTick: {
show: false,
},
splitLine: {
show: true,
length: fontChart(20),
lineStyle: {
color: "#051932",
width: 0,
type: "solid",
},
},
axisLabel: {
show: false,
// formatter: function (v) {
// return v.toFixed(0);
// },
},
},
{
type: "gauge",
radius: "135%",
startAngle: "180",
endAngle: "0",
pointer: {
show: true,
length: '60%',
width: fontChart(8),
// offsetCenter: [0, '-55%'],
itemStyle:{
color:"#207ade",
// opacity: 0.7
},
},
min: parseFloat(this.min),
max: parseFloat(this.max),
splitNumber: parseFloat(this.splitNumber),
center: ["50%", "85%"], //整体的位置设置
detail: {
offsetCenter: [0, '0'], // x, y，单位px 偏移位置
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#ffffff',
fontSize: fontChart(18),
borderColor: '#3982f7', // 值域边框颜色
//边框颜色
borderWidth: 0.6,
shadowColor:"#0c4083",//阴影颜色
shadowOffsetX: 2,//阴影水平方向上的偏移距离
shadowOffsetY: 2,//阴影垂直方向上的偏移距离
shadowBlur: fontChart(20),
borderRadius: fontChart(6),
padding: [8,12,6,12]
},
backgroundColor: '#0c2144',
formatter: function(value) {
return value
}
},
data: this.gaugeData,
title: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: colorSet,
width: fontChart(10),
// shadowBlur: 15,
// shadowColor: '#B0C4DE',
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1,
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
length: fontChart(25),
lineStyle: {
color: "#00377a",
width: 2,
type: "solid",
},
},
axisLabel: {
show: false,
// formatter: function (v) {
// return v.toFixed(0);
// },
},
animationDuration: 4000,
},
{
name: "灰色内圈", //刻度背景
type: "gauge",
z: 2,
radius: "120%",
startAngle: "180",
endAngle: "0",
center: ["50%", "85%"], //整体的位置设置
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
color: [[1, "#018DFF"]],
fontSize: fontChart(20),
width: 2,
opacity: 1, //刻度背景宽度
},
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
formatter: function (v) {
return v.toFixed(0);
},
},
pointer: {
show: false,
},
axisTick: {
show: false,
},
detail: {
show: 0,
},
},
{
name: "白色圈刻度",
type: "gauge",
radius: "120%",
startAngle: 180, //刻度起始
endAngle: 0, //刻度结束
min: parseFloat(this.min),
max: parseFloat(this.max),
splitNumber: parseFloat(this.splitNumber),
z: 4,
axisTick: {
show: false,
},
center: ["50%", "85%"], //整体的位置设置
splitLine: {
length: fontChart(16), //刻度节点线长度
lineStyle: {
width: 2,
color: "#018DFF",
}, //刻度节点线
},
axisLabel: {
color: "rgba(255,255,255,8)",
fontSize: fontChart(14),
// formatter: function (v) {
// return v.toFixed(0);
// },
}, //刻度节点文字颜色
pointer: {
show: false,
},
axisLine: {
lineStyle: {
opacity: 0,
},
},
detail: {
show: false,
},
data: [
{
name: '',
value: 0
}
]
},
// 中间白色半圆
// {
// type: "gauge",
// radius: "80%", // 位置
// center: ["50%", "85%"],
// min: 0,
// max: 100,
// startAngle: 180,
// endAngle: 0,
// axisLine: {
// show: true,
// lineStyle: {
// // 轴线样式
// width: 120, // 宽度
// color: [
// [
// 1,
// new echarts.graphic.RadialGradient(0.5, 1, 1, [
// {
// offset: 1,
// color: "rgba(16, 129, 255,0.15)",
// },
// {
// offset: 0.72,
// color: "rgba(16, 129, 255,0.05)",
// },
// {
// offset: 0.7,
// color: "rgba(16, 129, 255,0.4)",
// },
// {
// offset: 0.401,
// color: "rgba(16, 129, 255,0.05)",
// },
// {
// offset: 0.4,
// color: "rgba(16, 129, 255,0.8)",
// },
// {
// offset: 0,
// color: "rgba(16, 129, 255,0.8)",
// },
// ]),
// ],
// ], // 颜色
// },
// },
// axisTick: {
// // 刻度
// show: false,
// },
// splitLine: {
// // 分割线
// show: false,
// },
// axisLabel: {
// // 刻度标签
// show: false,
// },
// pointer: {
// // 仪表盘指针
// show: false,
// },
// detail: {
// // 仪表盘详情
// show: false,
// },
// },
],
};
// 使用刚指定的配置项和数据显示图表。
this.charts.setOption(option, true);
// // 切换图例时触发
// this.charts.on('legendselectchanged', function(obj) {
// console.log(obj, 'legendselectchanged----->>>')
// })
window.addEventListener("resize", this.selfAdaption);
},
// 自适应
selfAdaption() {
if (!this.charts) return;
this.charts.resize();
this.drawGauge();
},
},
};
</script>
