echarts仪表盘基础

<template>

  <div

    id="myChart"

    :style="{ width: '1000px', height: '500px', border: '1px solid #090' }"

  ></div>

</template>

<script>

import * as echarts from "echarts";

export default {

  name: "DataCount",

  data: () => ({

    msg: "Welcome to Your Vue.js App",

  }),

  mounted() {

    this.drawLine();

  },

  methods: {

    drawLine() {

      // 基于准备好的dom，初始化echarts实例

      let myChart = echarts.init(document.getElementById("myChart"));

      // 绘制图表

      myChart.setOption({

        series: [

          {

            type: "gauge",

            // 起点

            startAngle: 180,

            // 终点

            endAngle: 0,

            // 起点值

            min: 0,

            // 终点值

            max: 100,

            // 进度值

            progress: {

              show: true,

              // 进度值是否有圆角

              roundCap: false,

              width: 18,

            },

            // 指针

            pointer: {

              show: false,

            },

            // 进度条圆环

            axisLine: {

              // show: false,

              // 圆环是否有圆角

              roundCap: false,

              lineStyle: {

                width: 18,

              },

            },

            // 环里面的刻度线(短)

            axisTick: {

              show: false,

            },

            // 环里面的分割线(长)

            splitLine: {

              show: false,

            },

            // 仪表盘被分割的段数

            splitNumber: 6,

            // 环里面的刻度值

            axisLabel: {

              show: false,

            },

            title: {

              show: false,

            },

            // 进度条的值

            detail: {

              // show: false,

              // backgroundColor: "#fff",

              // borderWidth: 2,

              width: "100%",

              lineHeight: 40,

              height: 40,

              // borderRadius: 8,

              offsetCenter: [0, "0%"],

              valueAnimation: true,

              formatter: function (value) {

                return "{value|" + value.toFixed(0) + "}";

              },

              rich: {

                value: {

                  fontSize: 50,

                  fontWeight: "bolder",

                  color: "#f00",

                },

              },

            },

            data: [

              {

                value: 30,

              },

            ],

          },

        ],

      });

    },

  },

};

</script>

<style>

#myChart {

  margin-top: 200px;

  margin-left: 200px;

}

</style>