自定义echarts仪表盘
代码示例
js部分
代码如下(示例):
<template>
<v-chart :option="leftOptions"></v-chart>
</template>
<script>
import { ref, reactive, toRefs } from "vue";
export default {
setup(props) {
const that = reactive({
Options: {
graphic: [
{
type: "image",
left: "center",
top: "center",
z: -10,
scale: [1, 1], //缩放
style: {
image: require("@/assets/images/RealTimePower.png"),
opacity: 1,
width: 180,
height: 143,
},
},
],
series: [
{
type: "gauge",
// 指针颜色
color: ["#06DE6F"],
center: ["50%", "56.6%"],
radius: "62%",
progress: {
show: true,
width: 12,
},
startAngle: 215,
endAngle: -35,
axisLine: { show: false },
splitLine: { show: false },
axisTick: { show: false },
axisLabel: { show: false },
detail: {
color: "#FFFFFF",
fontWeight: "bold",
fontSize: 24,
offsetCenter: ["0", "90%"],
},
data: [{ value: 0 }],
},
],
}
})
return {
...toRefs(that)
};
};
</script>