vue中使用echarts绘制仪表盘

效果图

目录

一、安装echarts

1、控制台使用命令进行安装

2、在package.json中配置echarts

3、在main.js中引用

二、vue中使用echarts

1、首先设置一个放置图标的dom节点

2、在.vue文件的

3、绘制仪表盘的方法

4、在vue中需要用到的地方调用绘制图标的方法

一、安装echarts

1、控制台使用命令进行安装

npm install echarts --save

2、在package.json中配置echarts

3、在main.js中引用

import echarts from 'echarts'

Vue.use(echarts)

二、vue中使用echarts

1、首先设置一个放置图标的dom节点

<template #extra>
     <div ref="chart" style="width: 180px; height: 180px"></div>
     <!-- <div id="chart" style="width: 200px; height: 200px"></div>-->
</template>

两种方式ref和id

2、在.vue文件的<script>标签中引入echarts

let echarts = require("echarts")

3、绘制仪表盘的方法

    drawMyChart() {
      let myChart = echarts.init(this.$refs.chart);
      // 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: 13.33, name: "CPU使用率"}]
          },
        ],
      });
    },

4、在vue中需要用到的地方调用绘制图标的方法

mounted() {
    this.drawMyChart();
},