echarts 水球圖--Vue

我這里只有干貨，直接拿來用。

1.下載

"echarts": "^4.9.0",
"echarts-liquidfill": "^2.0.6",

這個版本對應可以用

npm i echarts echarts-liquidfill

2.引入 echart.vue

import * as echarts from "echarts";
import "echarts-liquidfill";

<div ref="chart" class="chart-view" :options="options" />

mounted() {
    this.initChart();
    window.addEventListener("resize", this.resizeChart);
  },
  destroyed() {
    window.removeEventListener("resize", this.resizeChart);
  },

methods: {
    initChart() {
      if (this.$refs.chart) {
        this.chartView = echarts.init(this.$refs.chart);
        if (this.options) {
          this.chartView.clear();
          this.chartView.setOption(this.options);
          this.resizeChart();
        }
      }
    },
    resizeChart() {
      if (this.chartView) {
        setTimeout(() => {
          this.chartView.resize();
        }, 200);
      }
    },
  },

3. 直接用組件或者單個引入使用也可以！！

4.配置option、參數

series: [{
          type: 'liquidFill',
          name: '全國就業率', // 系列名稱，用於tooltip的顯示，legend 的圖例篩選
          radius: '62%', // 水球圖的半徑
          center: ['50%', '60%'], // 水球圖的中心（圓心）坐標，數組的第一項是橫坐標，第二項是縱坐標
          // 水填充圖的形狀 circle 默認圓形  rect 圓角矩形  triangle 三角形  
          // diamond 菱形  pin 水滴狀 arrow 箭頭狀  還可以是svg的path
          shape: 'circle',
          phase: 0, // 波的相位弧度 不設置  默認自動
          direction: 'right', // 波浪移動的速度  兩個參數  left 從右往左 right 從左往右
          outline: {
            show: true,
            borderDistance: 0, // 邊框線與圖表的距離 數字
            itemStyle: {
              opacity: 1, // 邊框的透明度   默認為 1
              borderWidth: 1, // 邊框的寬度
              shadowBlur: 1, // 邊框的陰影范圍 一旦設置了內外都有陰影
              shadowColor: '#fff', // 邊框的陰影顏色,
              borderColor: '#41dcd8' // 邊框顏色
            }
          },
          // 圖形樣式
          itemStyle: {
            color: '#4077eb', // 水球顯示的背景顏色
            opacity: 0.5, // 波浪的透明度
            shadowBlur: 10 // 波浪的陰影范圍
          },
          backgroundStyle: {
            color: '#407bf3', // 水球未到的背景顏色
            opacity: 0.5
          },
          // 圖形的高亮樣式
          emphasis: {
            itemStyle: {
              opacity: 0.8 // 鼠標經過波浪顏色的透明度
            }
          },
          // 圖形上的文本標簽
          label: {
            fontSize: 55,
            fontWeight: 400,
            color: '#fff'
          },
          data: [0.62] // 系列中的數據內容數組
        }]

————————————————
版權聲明：本文為CSDN博主「半度℃溫熱」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/fu983531588/article/details/97274041

 

記錄進步！