echarts仪表盘 使用插件 vue-echarts
代码示例
HTML部分
<v-chart ref="heartMap" class="heartMap" :option="option"></v-chart>
js部分
// 配置项
options: {
// 背景图片设置
graphic: [
{
type: "image",
left: "0",
top: "0",
z: -10,
bounding: "raw",
rotation: 0, //旋转
origin: [30, 55], //中心点
scale: [0.9, 0.9], //缩放
style: {
// 背景图
image: require("@/assets/images/11.png"),
opacity: 1,
},
},
],
series: [
{
type: "gauge",
startAngle: 90,
endAngle: -270,
radius: "65%",
center: [
// 圆心
"47%",
"48%",
],
pointer: {
show: false,
},
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#F86921", // 0% 处的颜色
},
{
offset: 1,
color: "#FE9E27", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
borderWidth: 3,
label: {
show: false,
},
labelLine: {
show: false,
},
shadowOffsetX: 50,
shadowOffsetY: 50,
shadowBlur: 30,
},
},
progress: {
show: true,
overlap: false,
roundCap: true,
clip: false,
itemStyle: {
borderWidth: 1,
},
},
axisLine: {
show: false,
},
splitLine: {
show: false,
distance: 0,
length: 10,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
distance: 50,
},
data: [
{
value: 0,
name: "Perfect",
title: {
show: false,
offsetCenter: ["0%", "-30%"],
},
},
],
detail: {
fontSize: 20,
color: "#FFF",
borderColor: "auto",
formatter: function() {
return getischargeOptions();
},
offsetCenter: [5, -5],
},
},
],
}
// 数据格式化
const getischargeOptions = () => {
return Number(options.series[0].data[0].value).toFixed(2) + '%';
};