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

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

news 2025/7/13 8:53:51

环境搭建参考：

大屏开源项目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 anglestartAngle: 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.keypublic 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-numberv-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-numberv-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-chartref="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)) returnif (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文件如下：