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

news2025/7/19 20:05:49

环境搭建参考：

大屏开源项目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.key
  public 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-picker
                size="small"
                :modes="['hex']"
                v-model:value="optionData.color">
              </n-color-picker>
            </SettingItem>
            <SettingItem name="label颜色">
                <n-color-picker
                  size="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-picker
                  size="small"
                  :modes="['hex']"
                  v-model:value="optionData.xAxis.axisLabel.color">
                </n-color-picker>
              </template>
            </SettingItem>
         </SettingItemBox>

         <SettingItemBox name="字体大小">
            <SettingItem name="图例">
              <n-input-number
                  v-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-number
                  v-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-number
                  v-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-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 {  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)) 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\Others的文件index.ts新增配置如下：