ECharts仪表盘的实现（vue3 +Ts +Echarts)

ECharts官网： 快速上手 - Handbook - Apache ECharts

1.下载

 npm install echarts --save

效果图

 实现代码

<script setup lang='ts'>
 
// 导入echarts
 
import * as echarts from 'echarts';
 
import 'echarts/theme/macarons.js'
 
import { ref, onMounted } from 'vue';
 
//  定义dom变量用于获取dom节点

 
const dom: any = ref<HTMLElement | null>(null);
 
// 定义变量用于接收初始化echarts实例
 
let myChart: any = ''
 
// 绘制图表
 
onMounted(() => {
 
  //基于准备好的dom，初始化echarts实例
 
  myChart = echarts.init(dom.value, 'macarons');
 
  optionsHandler()
 
})
 
//专门用于做配置项的方法
 
const optionsHandler = () => {
 
      // var myChart = echarts.init(document.getElementById("chart"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },
        toolbox: {
          show: false,
          feature: {
            restore: {},
            saveAsImage: {},
          },
        },
        // 配置
        series: [
          {
            name: "CPU使用率",
            type: "gauge",
            axisLabel: {distance: 0, fontWeight: 100, shadowOffsetY: 100, height: 100},
            axisLine: {
              lineStyle: {
                width: 10 // 修改仪表盘宽度的属性
              }
            },
            splitLine: {//分隔线样式相关
              length: 15,//分割线的长度
              lineStyle: {
                width: 1,
                color: '#b0b3b8'
              }
            },
            title: {offsetCenter: [0, '85%'], color: 'red'},
            detail: {formatter: "{value}%", offsetCenter: [0, '65%'], fontStyle: "oblique", fontSize: 12},
            pointer: {width: 4},
            data: [{value: 80, name: "Score"}]
          },
        ],
      });
    
}
 
</script>
 
<template>
 
  <div class="data">
 
    <div ref="dom" style="height: 100%"></div>
 
  </div>
  
</template>
 
<style scoped lang='scss'>
 
.data {
 
  height: 520px;
 
  width: 1200px;
 
  margin: 0;
 
}
 
</style>

总结 ：dom节点要在onMounted获取，setup语法的执行再onBeforeMount钩子之前，获取到dom然后实例化ECharts，配置项写成方法在实例化后运行