pnpm i echarts

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
// 使用 ECharts 提供的按需引入的接口來打包必須的組件
// 引入 echarts 核心模塊，核心模塊提供了 echarts 使用必須要的接口
import * as echarts from 'echarts/core'
// 引入儀表盤圖表，圖表后綴都為 Chart
import { GaugeChart } from 'echarts/charts'
// 引入提示框，組件后綴都為 Component
import { TooltipComponent } from 'echarts/components'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必須的一步
import { CanvasRenderer } from 'echarts/renderers'
// 注冊必須的組件
echarts.use([GaugeChart, TooltipComponent, CanvasRenderer])
/*
  需要注意的是為了保證打包的體積是最小的，ECharts 按需引入的時候不再提供任何渲染器，
  所以需要選擇引入 CanvasRenderer 或者 SVGRenderer 作為渲染器。這樣的好處是假如
  你只需要使用 svg 渲染模式，打包的結(jié)果中就不會再包含無需使用的 CanvasRenderer 模塊
*/
const chart = ref()
const gaugeChart = ref()
const gradient = ref({ // 自定義漸變色
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0, color: '#FF6E76' // 0% 處的顏色
          },
          {
            offset: 0.25, color: '#FDDD60' // 25% 處的顏色
          },
          {
            offset: 0.75, color: '#58D9F9' // 75% 處的顏色
          },
          {
            offset: 1, color: '#7CFFB2' // 100% 處的顏色
          }
        ],
        global: false // 缺省為 false
      })
var option
interface Gauge {
  name: string // 數(shù)據(jù)項名稱
  value: number // 數(shù)據(jù)值
  [propName: string]: any // 添加一個字符串索引簽名，用于包含帶有任意數(shù)量的其他屬性
}
interface Props {
  gaugeData: Gauge[] // 儀表盤數(shù)據(jù)源
  width?: string|number // 容器寬度
  height?: string|number // 容器高度
}
const props = withDefaults(defineProps<Props>(), {
  gaugeData: () => [],
  width: '100%',
  height: '100%'
})
const chartWidth = computed(() => {
  if (typeof props.width === 'number') {
    return props.width + 'px'
  } else {
    return props.width
  }
})
const chartHeight = computed(() => {
  if (typeof props.height === 'number') {
    return props.height + 'px'
  } else {
    return props.height
  }
})
onMounted(() => {
  initChart() // 初始化圖標示例
})
function initChart () {
  // 等價于使用 Canvas 渲染器（默認）：echarts.init(containerDom, null, { renderer: 'canvas' })
  gaugeChart.value = echarts.init(chart.value)
  option = {
    tooltip: { // 提示框浮層設(shè)置
      trigger: 'item',
      triggerOn: 'mousemove', // 提示框觸發(fā)條件
      enterable: true, // 鼠標是否可進入提示框浮層中，默認false
      confine: true, // 是否將tooltip框限制在圖表的區(qū)域內(nèi)
      formatter: function (params: any) { // 提示框浮層內(nèi)容格式器，支持字符串模板和回調(diào)函數(shù)兩種形式
        // console.log('params:', params)
        return params.marker + params.name + ': ' + params.value || '--'
      },
      backgroundColor: 'transparent', // 提示框浮層的背景顏色
      borderColor: '#7CFFB2', // 提示框浮層的邊框顏色
      borderWidth: 1, // 提示框浮層的邊框?qū)?
      borderRadius: 6, // 提示框浮層圓角
      padding: [6, 12], // 提示框浮層的內(nèi)邊距
      textStyle: { // 提示框浮層的文本樣式
        color: '#333', // 文字顏色
        fontWeight: 600, // 字體粗細
        fontSize: 18, // 字體大小
        // lineHeight: 24, // 行高
        // width: 60, // 文本顯示寬度
        // 文字超出寬度是否截斷或者換行；只有配置width時有效
        overflow: 'breakAll', // truncate截斷，并在末尾顯示ellipsis配置的文本，默認為...;break換行;breakAll換行，并強制單詞內(nèi)換行
        ellipsis: '...'
      },
    },
    color: ['#7CFFB2'],
    series: [
      {
        type: 'gauge',
        name: '儀表盤', // 系列名稱，用于tooltip的顯示
        /*
          從調(diào)色盤 option.color 中取色的策略，可選 'series' | 'data'
          'series': 按照系列分配調(diào)色盤中的顏色，同一系列中的所有數(shù)據(jù)都是用相同的顏色
          'data': 按照數(shù)據(jù)項分配調(diào)色盤中的顏色，每個數(shù)據(jù)項都使用不同的顏色
        */
        colorBy: 'data',
        center: ['50%', '65%'], // 圓心坐標，[400, 300]: 數(shù)組的第一項是橫坐標，第二項是縱坐標，支持設(shè)置成百分比，['50%', '75%']: 設(shè)置成百分比時第一項是相對于容器寬度，第二項是相對于容器高度
        radius: '100%', // 儀表盤半徑，可以是相對于容器高寬中較小的一項的一半的百分比，也可以是絕對的數(shù)值。
        legendHoverLink: true, // 是否啟用圖例 hover 時的聯(lián)動高亮
        startAngle: 210, // 儀表盤起始角度。圓心 正右手側(cè)為0度，正上方為90度，正左手側(cè)為180度。
        endAngle: -30, // 儀表盤結(jié)束角度。
        clockwise: true, // 儀表盤刻度是否是順時針增長
        min: 0, // 最小的數(shù)據(jù)值，映射到 minAngle
        max: 100, // 最大的數(shù)據(jù)值，映射到 maxAngle
        splitNumber: 10, // 儀表盤刻度的分割段數(shù)
        axisLine: { // 儀表盤軸線相關(guān)配置
          show: true, // 是否顯示儀表盤軸線
          roundCap: true, // 是否在兩端顯示成圓形
          lineStyle: { // 儀表盤軸線樣式
            width: 30, // 軸線寬度
            // color: [ // 儀表盤的軸線可以被分成不同顏色的多段。每段的結(jié)束位置和顏色可以通過一個數(shù)組來表示
            //   [20, '#FF6E76'],
            //   [40, '#FDDD60'],
            //   [60, '#58D9F9'],
            //   [80, '#7CFFB2'],
            //   [100, '#1677FF']
            // ],
            // shadowBlur: 10, // 圖形陰影的模糊大小
            // shadowColor: 'rgba(0, 0, 0, 0.5)', // 陰影顏色
            // shadowOffsetX: 3, // 陰影水平方向上的偏移距離
            // shadowOffsetY: 3, // 陰影垂直方向上的偏移距離
            // opacity: 1 // 圖形透明度。支持從 0 到 1 的數(shù)字，為 0 時不繪制該圖形。
          }
        },
        progress: { // 展示當前進度
          show: true, // 是否顯示進度條
          overlap: false, // 多組數(shù)據(jù)時進度條是否重疊
          // width: 12, // 進度條寬度
          roundCap: true, // 是否在兩端顯示成圓形
          clip: true, // 是否裁掉超出部分
          itemStyle: { // 進度條樣式
            color: gradient.value, // 圖形的顏色
            // borderColor: '#1677FF', // 圖形的描邊顏色
            // borderWidth: 1, // 描邊線寬。為 0 時無描邊。
            // borderType: 'solid', // 描邊類型，可選：'solid' 'dashed' 'dotted'
          }
        },
        splitLine: { // 分隔線樣式
          show: true, // 是否顯示分隔線
          length: 30, // 分隔線線長。支持相對半徑的百分比
          distance: 10, // 分隔線與軸線的距離
          lineStyle: { // 分隔線樣式
            color: 'auto', // 線的顏色
            width: 5, // 線寬
            type: 'solid', // 線的類型，可選 'solid' 'dashed' 'dotted'
            cap: 'butt' // 指定線段末端的繪制方式，可選 'butt'(默認) 線段末端以方形結(jié)束 'round' 線段末端以圓形結(jié)束 'square' 線段末端以方形結(jié)束，但是增加了一個寬度和線段相同，高度是線段厚度一半的矩形區(qū)域
          }
        },
        axisTick: { // 刻度樣式
          show: true, // 是否顯示刻度
          splitNumber: 10, // 分隔線之間分割的刻度數(shù)
          length: 12, // 刻度線長。支持相對半徑的百分比
          distance: 10, // 刻度線與軸線的距離
          lineStyle: { // 刻度線樣式
            color: 'auto', // 線的顏色
            width: 2, // 線寬
            type: 'solid', // 線的類型，可選 'solid' 'dashed' 'dotted'
            cap: 'butt' // 指定線段末端的繪制方式，可選 'butt'(默認) 線段末端以方形結(jié)束 'round' 線段末端以圓形結(jié)束 'square' 線段末端以方形結(jié)束，但是增加了一個寬度和線段相同，高度是線段厚度一半的矩形區(qū)域
          }
        },
        axisLabel: { // 刻度標簽
          show: true, // 是否顯示標簽
          distance: -80, // 標簽與刻度線的距離
          /*
            如果是 number 類型，則表示標簽的旋轉(zhuǎn)角，從 -90 度到 90 度，正值是逆時針。
            除此之外，還可以是字符串 'radial' 表示徑向旋轉(zhuǎn)、'tangential' 表示切向旋轉(zhuǎn)。
            如果不需要文字旋轉(zhuǎn)，可以將其設(shè)為 0。
          */
          rotate: 'tangential',
          // 刻度標簽的內(nèi)容格式器，支持字符串模板和回調(diào)函數(shù)兩種形式
          // formatter: '{value} kg', // // 使用字符串模板，模板變量為刻度默認標簽 {value}
          formatter: function (value: number) {// 使用函數(shù)模板，函數(shù)參數(shù)分別為刻度數(shù)值
            console.log('value', value)
            if (value === 90) {
              return 'A'
            } else if (value === 70) {
              return 'B'
            } else if (value === 50) {
              return 'C'
            } else if (value === 30) {
              return 'D'
            } else if (value === 10) {
              return 'F'
            }
            return ''
          },
          color: '#aaa', // 文字的顏色
          fontStyle: 'normal', // 文字字體的風格，可選 'normal' 'italic' 'oblique'
          fontWeight: 'bold', // 文字字體的粗細，可選 'normal' 'bold' 'bolder' 'lighter' 100 | 200 | 300 | 400...
          fontFamily: 'sans-serif', // 文字的字體系列，還可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
          fontSize: 40 // 文字的字體大小
          // lineHeight: 28, // 行高
          /*
            可以使用顏色值，例如：'#123234', 'red', 'rgba(0,23,11,0.3)'
            也可以直接使用圖片，例如：
            backgroundColor: {
              image: 'xxx/xxx.png'
              // 這里可以是圖片的 URL，
              // 或者圖片的 dataURI，
              // 或者 HTMLImageElement 對象，
              // 或者 HTMLCanvasElement 對象。
            }
          */
          // backgroundColor: 'transparent', // 文字塊背景色
          // borderColor: 'red', // 文字塊邊框顏色
          // borderWidth: 3, // 文字塊邊框?qū)挾?
          // borderType: 'solid', // 文字塊邊框描邊類型，可選 'solid' 'dashed' 'dotted'
          // borderRadius: 10, // 文字塊的圓角
          // padding: [6, 12], // 文字塊的內(nèi)邊距，文字塊寬高不包含 padding
          // width: 60, // 文本顯示寬度
          // height: 60 // 文本顯示高度
        },
        pointer: { // 儀表盤指針
          show: true, // 是否顯示指針
          showAbove: true, // 指針是否顯示在標題和儀表盤詳情上方
          // 可以通過 'image://url' 設(shè)置為圖片，其中 URL 為圖片的鏈接，或者 dataURI。
          icon: 'diamond', // 標記類型，可選 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
          offsetCenter: [0, '-28%'], // 相對于儀表盤中心的偏移位置，數(shù)組第一項是水平方向的偏移，第二項是垂直方向的偏移。可以是絕對的數(shù)值，也可以是相對于儀表盤半徑的百分比。
          length: '36%', // 指針長度，可以是絕對數(shù)值，也可以是相對于半徑的半分比。
          width: 20, // 指針寬度
          itemStyle: { // 指針樣式
            // color: 'auto' // 圖形顏色
            // 線性漸變，前四個參數(shù)分別是 x0, y0, x2, y2, 范圍從 0 - 1，相當于在圖形包圍盒中的百分比，如果 globalCoord 為 `true`，則該四個值是絕對的像素位置
            color: gradient.value
            // borderColor: '#000', // 圖形的描邊顏色
            // borderWidth: 3, // 描邊線寬。為 0 時無描邊
            // borderType: 'solid', // 描邊類型，可選：'solid' 'dashed' 'dotted'
          }
        },
        anchor: { // 表盤中指針的固定點
          show: true, // 是否顯示固定點
          showAbove: true, // 固定點是否顯示在指針上面
          size: 24, // 固定點大小
          // 可以通過 'image://url' 設(shè)置為圖片，其中 URL 為圖片的鏈接，或者 dataURI。
          icon: 'circle', // 標記類型，可選 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
          offsetCenter: [0, '16%'], // 相對于儀表盤中心的偏移位置，數(shù)組第一項是水平方向的偏移，第二項是垂直方向的偏移?？梢允墙^對的數(shù)值，也可以是相對于儀表盤半徑的百分比。
          itemStyle: { // 指針固定點樣式
            color: '#1677FF', // 圖形的顏色
            borderColor: '#eee', // 固定點邊框顏色
            borderWidth: 8, // 描邊線寬。為 0 時無描邊
            borderType: 'solid', // 描邊類型，可選：'solid' 'dashed' 'dotted'
          }
        },
        title: { // 儀表盤標題
          show: true, // 是否顯示標題
          offsetCenter: [0, '36%'], // 相對于儀表盤中心的偏移位置，數(shù)組第一項是水平方向的偏移，第二項是垂直方向的偏移?？梢允墙^對的數(shù)值，也可以是相對于儀表盤半徑的百分比。
          color: '#464646', // 文字的顏色
          fontStyle: 'normal', // 文字字體的風格，可選 'normal' 'italic' 'oblique'
          fontWeight: 'bold', // 文字字體的粗細，可選 'normal' 'bold' 'bolder' 'lighter' 100 | 200 | 300 | 400...
          fontFamily: 'sans-serif', // 文字的字體系列，還可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
          fontSize: 45 // 文字的字體大小
          // lineHeight: 48, // 行高
          /*
            可以使用顏色值，例如：'#123234', 'red', 'rgba(0,23,11,0.3)'
            也可以直接使用圖片，例如：
            backgroundColor: {
              image: 'xxx/xxx.png'
              // 這里可以是圖片的 URL，
              // 或者圖片的 dataURI，
              // 或者 HTMLImageElement 對象，
              // 或者 HTMLCanvasElement 對象。
            }
          */
          // backgroundColor: 'transparent', // 文字塊背景色
          // borderColor: 'red', // 文字塊邊框顏色
          // borderWidth: 3, // 文字塊邊框?qū)挾?
          // borderType: 'solid', // 文字塊邊框描邊類型，可選 'solid' 'dashed' 'dotted'
          // borderRadius: 10, // 文字塊的圓角
          // padding: [6, 12], // 文字塊的內(nèi)邊距，文字塊寬高不包含 padding
          // width: 60, // 文本顯示寬度
          // height: 60 // 文本顯示高度
        },
        detail: { // 儀表盤詳情，用于顯示數(shù)據(jù)，即表盤中心的數(shù)據(jù)展示
          show: true, // 是否顯示詳情
          color: '#1677FF', // 文本顏色
          fontStyle: 'normal', // 文字字體的風格，可選 'normal' 'italic' 'oblique'
          fontWeight: 'bold', // 文字字體的粗細，可選 'normal' 'bold' 'bolder' 'lighter' 100 | 200 | 300 | 400...
          fontFamily: 'Microsoft YaHei', // 文字的字體系列，還可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
          fontSize: 72, // 文字的字體大小
          backgroundColor: 'transparent', // 詳情背景色
          // borderColor: '#ccc', // 詳情邊框顏色
          // borderWidth: 1, // 詳情邊框?qū)挾?
          // borderType: 'solid', // 'solid' 'dashed' 'dotted'
          // borderRadius: 5, // 文字塊的圓角
          // padding: [3, 6], // 文字塊的內(nèi)邊距
          valueAnimation: true, // 是否開啟標簽的數(shù)字動畫
          offsetCenter: [0, '-5%'], // 相對于儀表盤中心的偏移位置，數(shù)組第一項是水平方向的偏移，第二項是垂直方向的偏移。可以是絕對的數(shù)值，也可以是相對于儀表盤半徑的百分比。
          formatter: function (value: number) { // 格式化函數(shù)或者字符串
            return value + ''
          },
        },
        /*
          系列中的數(shù)據(jù)內(nèi)容數(shù)組，
          數(shù)組項可以為單個數(shù)值：[12, 34, 56, 10, 23]
          數(shù)據(jù)項也可為一個對象：[
                {
                  // 數(shù)據(jù)項的名稱
                  name: '數(shù)據(jù)1',
                  // 數(shù)據(jù)項值8
                  value: 10
                },
                {
                  name: '數(shù)據(jù)2',
                  value: 20
                }]
        對象支持的所有屬性：{ title , detail , name , value , itemStyle }
        */
        data: props.gaugeData
      }
    ]
  }
  option && gaugeChart.value.setOption(option)
}
</script>
<template>
  <div ref="chart" :style="`width: ${chartWidth}; height: ${chartHeight};`"></div>
</template>

<script setup lang="ts">
import GuageChart from './GuageChart.vue'
import { ref } from 'vue'
const gaugeData = ref([
    {
      value: 80,
      name: 'Rating'
    }
  ])
</script>
<template>
  <div>
    <h1>GaugeChart 參考文檔</h1>
    <ul class="m-list">
      <li>
        <a class="u-file"  rel="external nofollow"  target="_blank">使用手冊</a>
      </li>
      <li>
        <a class="u-file"  rel="external nofollow"  target="_blank">在項目中引入 ECharts</a>
      </li>
      <li>
        <a class="u-file"  rel="external nofollow"  rel="external nofollow"  target="_blank">gauge 配置項</a>
      </li>
      <li>
        <a class="u-file"  rel="external nofollow"  target="_blank">ECharts 在線定制</a>
      </li>
    </ul>
    <GaugeChart
      :gaugeData="gaugeData"
      :width="800"
      :height="500" />
  </div>
</template>