一
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>