免费建网站 步骤,金湖网站建设,婚介网站建站,易游网络验证代理平台环境搭建参考#xff1a;
大屏开源项目go-view二次开发1----环境搭建(C#)-CSDN博客
要做的半环形控件最终效果如下图#xff1a; 步骤如下#xff1a;
1 在go-view前端项目的\src\packages\components\Charts目录下新增Others目录#xff0c;并在Others目录下新增PieExt…环境搭建参考
大屏开源项目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-helpersexport 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 :optionDataoptionData/global-settingCollapseItem name扩展2饼图配置 :expandedtrueSettingItemBox name字体setting-item name格式化n-input v-model:valueoptionData.series[0].label.formatter sizesmall/n-input/setting-itemsetting-item name大小n-input-numberv-model:valueoptionData.series[0].label.fontSizesizesmall:min1/n-input-number/setting-item/SettingItemBoxSettingItemBox name引出线条setting-item name长度n-input v-model:valueoptionData.series[0].labelLine.normal.length sizesmall/n-input/setting-itemsetting-item name宽度n-input-numberv-model:valueoptionData.series[0].labelLine.normal.lineStyle.widthsizesmall:min1/n-input-number/setting-item/SettingItemBox/CollapseItem
/templatescript setup langts
import { PropType, watch } from vue
import { GlobalThemeJsonType } from /settings/chartThemes/index
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from /components/Pages/ChartItemSettingconst props defineProps({optionData: {type: Object as PropTypeGlobalThemeJsonType,required: true}
})
/script5 编辑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.dexport 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变成VPieExt2conKey要在PieExt2前面加上VC变成VCPieExt2
接着把这个图 下载后修改名称为PieExt2.png并放到src\assets\images\chart\charts目录下 7 编辑PieExt2目录下的index.vue的文件如下
templatev-chartrefvChartRef:init-optionsinitOptions:themethemeColor:optionoption:update-options{replaceMerge: replaceMergeArr}autoresize/v-chart
/templatescript setup langts
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/cloneDeepconst props defineProps({themeSetting: {type: Object,required: true},themeColor: {type: Object,required: true},chartConfig: {type: Object as PropTypeconfig,required: true}
})const initOptions useCanvasInitOptions(props.chartConfig.option, props.themeSetting)use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent])const replaceMergeArr refstring[]()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
})
/script8 编辑\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毛钱作为鼓励呗,穷逼一个就当筹个网费吧
