vue.3.0Echarts封装

一
components->echarts->2d-chart
<template>
  <!-- echart -->
  <div class="container">
    <div :style="{ width: '100%', height: '100%' }" ref="myChart"></div>
  </div>
</template>

<script lang="ts" scoped>
import { defineComponent, ref, PropType, watch } from 'vue'
import * as echarts from 'echarts'
import { EChartsOption } from 'echarts'
export default defineComponent({
  props: {
    option: {} as PropType<EChartsOption>
  },
  setup (prop) {
    const myOption = ref()
    const myChart = ref<HTMLElement>()
    function initChart () {
      if (prop.option) {
        myOption.value = prop.option
        echarts
          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          .init(myChart.value!)
          .setOption(myOption.value)
      }
    }
    watch(prop, () => {
      initChart()
    })
    return {
      myChart
    }
  }
})
</script>

<style lang="less" scoped>
.container{
height: 100%;
width: 100%;
}
</style>
二
(1)
data->vepfeature-echart.data
import { vepFeatureData } from '@/data/modules/home'
import { EChartsOption } from 'echarts'

export function getVepfeatureOption (params: vepFeatureData[]): EChartsOption {
  return {
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: params.map(e => { return e.x })
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: function (value:any) {
          return value / 100
        }
      }
    },
    series: [
      {
        data: params.map(e => { return e.y * 100 }),
        type: 'line',
        areaStyle: {}
      }
    ]

  } as EChartsOption
}
(2)consussionfusion-echart.data.ts
import { vrca } from '@/protoc/processed'
import { EChartsOption } from 'echarts'

export function getConsussionFusionResulOption (params: vrca.concussion.v1.IConsussionFusionResult): EChartsOption {
  return {
    series: [
      {
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        min: 0,
        max: 1,
        splitNumber: 12,
        axisLine: {
          lineStyle: {
            width: 6,
            color: [
              [0.33, '#7CFFB2'],
              [0.66, '#FDDD60'],
              [1, '#FF6E76']
            ]
          }
        },
        pointer: {
          icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
          length: '12%',
          width: 20,
          offsetCenter: [0, '-60%'],
          itemStyle: {
            color: 'auto'
          }
        },
        axisTick: {
          length: 12,
          lineStyle: {
            color: 'auto',
            width: 2
          }
        },
        splitLine: {
          length: 20,
          lineStyle: {
            color: 'auto',
            width: 5
          }
        },
        axisLabel: {
          color: '#464646',
          fontSize: 20,
          distance: -60,
          formatter: function (value) {
            return ''
          }
        },
        title: {
          offsetCenter: [0, '-20%'],
          fontSize: 30
        },
        detail: {
          fontSize: 50,
          offsetCenter: [0, '0%'],
          valueAnimation: true,
          formatter: function (value) {
            return Math.round(value * 100)
          },
          color: 'auto'
        },
        data: [
          {
            value: params.confidence,
            name: 'Score'
          }
        ]
      }
    ]

  } as EChartsOption
}
 
三用法
<template>
  <echart2d :option="displayData"></echart2d>
</template>

<script lang='ts'>
import { defineComponent, watch, ref } from 'vue'
import { getVepFeatureData, scopeId } from '../home.data'
import echart2d from '@/components/echart/2d-chart.vue'
import { EChartsOption } from 'echarts'
import { getVepfeatureOption } from '../data/vepfeature-echart.data'

export default defineComponent({
  components: {
    echart2d
  },
  setup () {
    const displayData = ref<EChartsOption>()
    watch(scopeId, (val) => {
      if (val?.id === undefined) return
      getVepFeatureData(val?.id).then(res => {
        console.log(res)
        displayData.value = getVepfeatureOption(res)
      })
    })
    return {
      displayData,
      echart2d
    }
  }
})
</script>

<style>
</style>