当前位置：首页 > article >正文

大屏开源项目go-view二次开发2----半环形控件(C#)

article 2025/1/16 7:41:33

环境搭建参考：

大屏开源项目go-view二次开发1----环境搭建(C#)-CSDN博客

要做的半环形控件最终效果如下图：

步骤如下：

1 在go-view前端项目的\src\packages\components\Charts目录下新增Others目录，并在Others目录下新增PieExt2目录，并把src\packages\components\Charts\Pies\PieCommon目录下的5个文件拷贝到新增PieExt2目录下(因为要做的半环形控件和PieCommon长得最像，拷贝它的过来修改是改动量最小的)，接着在Others目录下新增index.ts文件，(由于我已经新增了好几个自定义控件，所以你还会看到BarExt1、PictorialBar、PieExt1目录)，最终的目录结构如下图：

2 接着在src\packages\components\Charts目录下的index.d.ts文件和index.ts文件分别添加内容如下：

3 编辑PieExt2目录下的config.ts的文件如下：

import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
import { PieExt2 } from './index'
import { CreateComponentType } from '@/packages/index.d'
import cloneDeep from 'lodash/cloneDeep'
import dataJson from './data.json'
import { fontFamily } from 'html2canvas/dist/types/css/property-descriptors/font-family'
import { height } from 'dom-helpers'

export const includes = ['legend']



// 其它配置
const otherConfig = {
  // 轮播动画
  isCarousel: false,
}

export const seriesItem={
  name: 'Access From',
  type: 'pie',
  radius: ['40%', '70%'],
  center: ['50%', '70%'],
  // adjust the start and end angle
  startAngle: 180,
  endAngle: 360,
  label: {
    formatter: '{b}: {d}',
    fontSize: 20, // 设置字体大小
    fontWeight: 'normal',
    textBorderColor: '#ffffff',
    color:'#ffffff',
    textBorderWidth: 0
  },
  labelLine: {
    normal: {
      length: 40, // 调整引出线的长度
      lineStyle: {
        width: 3 // 设置引出线的宽度
      }
    }
  }
}

const option = {
  tooltip: {
    trigger: 'item',
    formatter: '{b}:{d}'
  },

  legend: {
    selectedMode: false
  },
  dataset: { ...dataJson },
  series: [
    seriesItem
  ]
}


export default class Config extends PublicConfigClass implements CreateComponentType {
  public key: string = PieExt2.key

  public chartConfig = cloneDeep(PieExt2)

  // 图表配置项
  public option = echartOptionProfixHandle(option, includes)
}

4 编辑PieExt2目录下的config.vue的文件如下：

<template>
  <!-- Echarts 全局设置 -->
  <global-setting :optionData="optionData"></global-setting>
  <CollapseItem name="扩展2饼图配置" :expanded="true">
    <SettingItemBox name="字体">
      <setting-item name="格式化">
        <n-input v-model:value="optionData.series[0].label.formatter" size="small"></n-input>
      </setting-item>
      <setting-item name="大小">
        <n-input-number
                  v-model:value="optionData.series[0].label.fontSize"
                  size="small"
                  :min="1"
              ></n-input-number>
      </setting-item>
    </SettingItemBox>
    <SettingItemBox name="引出线条">
      <setting-item name="长度">
        <n-input v-model:value="optionData.series[0].labelLine.normal.length" size="small"></n-input>
      </setting-item>
      <setting-item name="宽度">
        <n-input-number
                  v-model:value="optionData.series[0].labelLine.normal.lineStyle.width"
                  size="small"
                  :min="1"
              ></n-input-number>
      </setting-item>
    </SettingItemBox>
    
  </CollapseItem>
</template>

<script setup lang="ts">
import { PropType, watch } from 'vue'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'

const props = defineProps({
  optionData: {
    type: Object as PropType<GlobalThemeJsonType>,
    required: true
  }
})
</script>

5 编辑PieExt2目录下的data.json的文件如下：

{
  "dimensions": ["product", "data1"],
  "source": [
    {
      "product": "Mon",
      "data1": 120
    },
    {
      "product": "Tue",
      "data1": 200
    },
    {
      "product": "Wed",
      "data1": 150
    },
    {
      "product": "Thu",
      "data1": 80
    },
    {
      "product": "Fri",
      "data1": 70
    },
    {
      "product": "Sat",
      "data1": 110
    },
    {
      "product": "Sun",
      "data1": 130
    }
  ]
}

6 编辑PieExt2目录下的index.ts的文件如下：

import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

export const PieExt2: ConfigType = {
  key: 'PieExt2',
  chartKey: 'VPieExt2',
  conKey: 'VCPieExt2',
  title: '饼图扩展2',
  category: ChatCategoryEnum.OTHERCHART,
  categoryName: ChatCategoryEnumName.OTHERCHART,
  package: PackagesCategoryEnum.CHARTS,
  chartFrame: ChartFrameEnum.ECHARTS,
  image: 'PieExt2.png'
}

注意：

key: 'PieExt2',
chartKey: 'VPieExt2',
conKey: 'VCPieExt2',

这三个玩意有特定的命名规则，key要与前面新增的目录名PieExt2保持一致，chartKey要在PieExt2前面加V变成VPieExt2，conKey要在PieExt2前面加上VC变成VCPieExt2

接着把这个图

下载后，修改名称为PieExt2.png，并放到src\assets\images\chart\charts目录下：

7 编辑PieExt2目录下的index.vue的文件如下：

<template>
  <v-chart
    ref="vChartRef"
    :init-options="initOptions"
    :theme="themeColor"
    :option="option"
    :update-options="{
      replaceMerge: replaceMergeArr
    }"
    autoresize
  ></v-chart>
</template>

<script setup lang="ts">
import { ref, nextTick, computed, watch, PropType } from 'vue'
import VChart from 'vue-echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import {  PieChart } from 'echarts/charts'
import { mergeTheme } from '@/packages/public/chart'
import config, { includes, seriesItem } from './config'
import { useChartDataFetch } from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import isObject from 'lodash/isObject'
import cloneDeep from 'lodash/cloneDeep'

const props = defineProps({
  themeSetting: {
    type: Object,
    required: true
  },
  themeColor: {
    type: Object,
    required: true
  },
  chartConfig: {
    type: Object as PropType<config>,
    required: true
  }
})

const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)

use([DatasetComponent, CanvasRenderer,  PieChart, GridComponent, TooltipComponent, LegendComponent])

const replaceMergeArr = ref<string[]>()

const option = computed(() => {
  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})

// dataset 无法变更条数的补丁
watch(
  () => props.chartConfig.option.dataset,
  (newData: { dimensions: any }, oldData) => {
    try {
      if (!isObject(newData) || !('dimensions' in newData)) return
      if (Array.isArray(newData?.dimensions)) {
        const seriesArr = []
        for (let i = 0; i < newData.dimensions.length - 1; i++) {
          seriesArr.push(cloneDeep(seriesItem))
        }
        //replaceMergeArr.value = ['series']
        // props.chartConfig.option.series = seriesArr
        // nextTick(() => {
        //   replaceMergeArr.value = []
        // })
      }
    } catch (error) {
      console.log(error)
    }
  },
  {
    deep: false
  }
)

const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
  props.chartConfig.option.dataset = newData
})
</script>

8 编辑\src\packages\components\Charts目录下的index.ts文件如下：