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

环境搭建参考：

大屏开源项目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文件如下：

9 先运行C#后端程序(参考文章最前面给的链接)，接着利用npm run dev运行go-view程序，最终效果如下：

完整代码可以如下链接获取：

张祥裕/分享的资源名称 - Gitee.com

下面讲解一下PieExt2目录下这5个文件config.ts、config.vue、data.json、index.ts、index.vue的功能：

config.ts文件

option和series是比较重要的，决定了控件的外观，如下图：

上面的option我是从这里抄来的，我对vue也是半吊子：

Examples - Apache ECharts

这里的资源Examples - Apache ECharts确实是多，option几乎都不用自己写，拿过来改改就能用了

拿过来后，要把带data部分删除：

换成 dataset: { ...dataJson }，

然后根据需要修改series的内容

config.vue

要与config.ts结合来看，主要是能让控件在被拖拽出来后，能给人修改控件样式，如下图：

配置关系如下图：

data.json

配置控件的最初数据，后面可以通过界面上传json文件导入覆盖或者通过后端接口api动态获取覆盖：

index.ts

配置控件的名称，框架加载控件的路径，控件样式图片等配置

index.vue

控件样式布局及javascript逻辑控制：

这个watch函数是获取到接口数据或者导入json文件后，会自动执行该函数，我这里就没有动它(但在做堆叠柱状图的时候就修改了它)，你看一下go-view自带的控件，index.vue的内容几乎一样，主要的功能是根据数据更新series的值，从而达到控制控件的目的

好了，本文到此结束，如果本文对你有帮助，资助2毛钱作为鼓励呗,穷逼一个，就当筹个网费吧