large_screen/src/components/tunneling/six/five.vue

<template>
  <div
    id="five"
    :style="{width: '100%', height: '100%'}"
  ></div>
</template>
 
<script type="text/ecmascript-6">
export default {
  data() {
    return {
      chartInstance: null,
      allData: null, // 服务器返回的数据

    };
  },
  mounted() {
    this.initChart(); //函数调用
    // this.getData();
    this.updateChart();
  },

  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(
        document.getElementById("five")
      );
    },


    updateChart() {

      const option = {
        grid: {
          height: 200,
          left: 0,
          top: 0,
          bottom: 0,
          right: 0,
        },
        series: [
          {
            name: "仪表盘",
            type: "gauge",
            min: 0,
            max: 2500,
            splitNumber: 10,
            // "axisLine": {
            //   "lineStyle": {
            //     "color": [
            //       [
            //         0.2,
            //         "#5DD1FA"
            //       ],
            //       [
            //         1,
            //         "#f7f9fc"
            //       ]
            //     ],
            //     "width": 10
            //   }
            // },
            axisLabel: {
              distance: -60,
              show: true,
            },
            axisTick: {
              show: true,
            },
            splitLine: {
              show: true,
            },
            itemStyle: {
              show: true,
            },
            title: {
              color: "#7f7f7f",
              fontSize: 16,
              fontWeight: "bolder",
            },
            detail: {
              offsetCenter: [0, 0],
              textStyle: {
                fontSize: "18",
                fontWeight: "bolder",
                color: "#000",
              },
            },
            pointer: {
              show: true,
            },
            data: [
              {
                name: "系统电压",
                value: 2000,
                itemStyle: { color: "#00ccee" },
              },
            ],
          },
        ],
      };

      this.chartInstance.setOption(option);
    },

  },
};
</script>
 
<style scoped>
</style>