大屏开源项目go-view二次开发3----象形柱图控件(C#)

环境搭建参考：

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

要做的象形柱图控件最终效果如下图：

其实这个控件我前面的文章也介绍过，不过是用wpf做的，链接如下：

wpf利用Microsoft.Web.WebView2显示html代码(以Echarts的象形柱图Velocity of Christmas Reindeers为例)_webview集成echarts,formatter-CSDN博客

这一次是在上一篇博文大屏开源项目go-view二次开发2----半环形控件(C#)-CSDN博客

的基础上继续操作：

具体步骤如下：

1 首先，我们现在从这里抄该控件的option,链接如下：

Examples - Apache ECharts

2 在src\packages\components\Charts\Others(Others目录是上一篇博文新建的，具体请参考：大屏开源项目go-view二次开发2----半环形控件(C#)-CSDN博客)新增PictorialBar目录，然后从长得最像的控件BarCrossrange拷贝文件，拷贝src\packages\components\Charts\Bars\BarCrossrange目录下的5个文件到PictorialBar目录下，如下图：

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

import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
import { PictorialBar } from  './index'
import { CreateComponentType } from '@/packages/index.d'
import cloneDeep from 'lodash/cloneDeep'
import dataJson from './data.json'export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
export const seriesItem = {name: 'hill',type: 'pictorialBar',barCategoryGap: '-130%',symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',itemStyle: {opacity: 0.5},emphasis: {itemStyle: {opacity: 1}},//data: [90, 60, 25, 18],z: 10,label: {show: true,position: 'top',color: '#e54035',fontSize: 20}
}
export const option = {tooltip: {trigger: 'axis',axisPointer: {type: 'none'}},dataset: { ...dataJson },xAxis: {show: true,type: 'category',axisTick: { show: false },axisLine: { show: false },axisLabel: {color: '#e54035',fontSize: 20}},yAxis: {show: true,type: 'value',splitLine: { show: false },axisTick: { show: false },axisLine: { show: false },axisLabel: { show: false,fontSize: 20}},color: ['#e54035'],series: [seriesItem]}export default class Config extends PublicConfigClass implements CreateComponentType {public key = PictorialBar.keypublic chartConfig = cloneDeep(PictorialBar)// 图表配置项public option = echartOptionProfixHandle(option, includes)
}

从前面抄来的option就是放在这里的，我做了相应的调整，这个文件的具体功能已经在这篇博文做了详细的介绍：大屏开源项目go-view二次开发2----半环形控件(C#)-CSDN博客

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

<template><!-- Echarts 全局设置 --> <global-setting :optionData="optionData"></global-setting><CollapseItem :name="`象形柱图`" :expanded="true"><SettingItemBox name="颜色"><SettingItem name="图形颜色"><n-color-pickersize="small":modes="['hex']"v-model:value="optionData.color"></n-color-picker></SettingItem><SettingItem name="label颜色"><n-color-pickersize="small":modes="['hex']"v-model:value="seriesList[0].label.color"></n-color-picker></SettingItem><SettingItem name="X轴颜色"><template v-if="optionData.xAxis && optionData.xAxis.axisLabel"><n-color-pickersize="small":modes="['hex']"v-model:value="optionData.xAxis.axisLabel.color"></n-color-picker></template></SettingItem></SettingItemBox><SettingItemBox name="字体大小"><SettingItem name="图例"><n-input-numberv-model:value="seriesList[0].label.fontSize"size="small":min="1"></n-input-number></SettingItem><SettingItem name="X轴"><template v-if="optionData.xAxis && optionData.xAxis.axisLabel"><n-input-numberv-model:value="optionData.xAxis.axisLabel.fontSize"size="small":min="1"></n-input-number></template></SettingItem><SettingItem name="Y轴"><template v-if="optionData.yAxis && optionData.yAxis.axisLabel"><n-input-numberv-model:value="optionData.yAxis.axisLabel.fontSize"size="small":min="1"></n-input-number></template></SettingItem></SettingItemBox></CollapseItem></template><script setup lang="ts">import { PropType, computed } from 'vue'import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'import { option } from './config'import { GlobalThemeJsonType } from '@/settings/chartThemes/index'const props = defineProps({optionData: {type: Object as PropType<GlobalThemeJsonType>,required: true}})const seriesList = computed(() => {return props.optionData.series
})</script>

5 编辑PictorialBar目录下的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 编辑PictorialBar目录下的index.ts的文件如下：

import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'export const PictorialBar: ConfigType = {key: 'PictorialBar',chartKey: 'VPictorialBar',conKey: 'VCPictorialBar',title: '象形柱图',category: ChatCategoryEnum.OTHERCHART,categoryName: ChatCategoryEnumName.OTHERCHART,package: PackagesCategoryEnum.CHARTS,chartFrame: ChartFrameEnum.ECHARTS,image: 'PictorialBar.png'
}

接着把该图片

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

7 编辑PictorialBar目录下的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 {  PictorialBarChart } 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,  PictorialBarChart, 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 = seriesArrnextTick(() => {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\Others的文件index.ts新增配置如下：