feat:添加3D基础柱状图及其右侧部分配置

data-room-ui/packages/Echarts/3D图/3D固定柱状图.js → data-room-ui/packages/Echarts/3D图/3D分组柱状图.js

@@ -2,9 +2,9 @@ import * as echarts from 'echarts'
 // 配置版本号
 const version = '2023091901'
 // 标题
-const title = '3D固定柱状图'
+const title = '3D分组柱状图'
 // 用于标识，唯一，和文件夹名称一致
-const name = '3DGuDingZhuZhuangTu'
+const name = '3DFenZuZhuZhuangTu'
 
 // 右侧配置项
 const setting = [

data-room-ui/packages/Echarts/3D图/3D基础柱状图.js

@@ -0,0 +1,496 @@
+import * as echarts from 'echarts'
+// 配置版本号
+const version = '2023091901'
+// 标题
+const title = '3D基础柱状图'
+// 用于标识，唯一，和文件夹名称一致
+const name = '3DJiChuZhuZhuangTu'
+// 右侧配置项
+const setting = [
+  {
+    label: '维度',
+    type: 'select', // 设置组件类型
+    field: 'xField', // 字段
+    optionField: 'xField', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    value: '',
+    tabName: 'data'
+  },
+  {
+    label: '指标',
+    type: 'select', // 设置组件类型
+    field: 'yField', // 字段
+    optionField: 'yField', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    value: '',
+    tabName: 'data'
+  },
+  //  样式配置
+  {
+    label: '柱子宽度',
+    type: 'inputNumber', // 设置组件类型
+    field: 'seriesCustom_barWidth', // 字段
+    optionField: 'seriesCustom.barWidth', // 对应options中的字段
+    value: 30,
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '数据标签',
+    type: 'switch', // 设置组件类型
+    field: 'label_style_opacity', // 字段
+    // optionField: 'series', // 对应options中的字段
+    value: 0,
+    active: 1,
+    inactive: 0,
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  // x轴 xAxis
+  {
+    label: '显示',
+    type: 'switch',
+    field: 'xAxis_show',
+    optionField: 'xAxis.show',
+    value: 1,
+    active: 1,
+    inactive: 0,
+    tabName: 'custom',
+    groupName: 'xAxis'
+  },
+  {
+    label: '轴线显示',
+    type: 'switch',
+    field: 'xAxis_axisLine_show',
+    optionField: 'xAxis.axisLine.show',
+    value: 1,
+    active: 1,
+    inactive: 0,
+    tabName: 'custom',
+    groupName: 'xAxis'
+  },
+  {
+    label: '刻度显示',
+    type: 'switch',
+    field: 'xAxis_axisTick_show',
+    optionField: 'xAxis.axisTick.show',
+    value: 0,
+    active: 1,
+    inactive: 0,
+    tabName: 'custom',
+    groupName: 'xAxis'
+  },
+  {
+    label: '标签显示',
+    type: 'switch',
+    field: 'xAxis_axisLabel_show',
+    optionField: 'xAxis.axisLabel.show',
+    value: 0,
+    active: 1,
+    inactive: 0,
+    tabName: 'custom',
+    groupName: 'xAxis'
+  },
+  {
+    label: '标签颜色',
+    type: 'colorPicker',
+    field: 'xAxis_axisLabel_textStyle_color',
+    optionField: 'xAxis.axisLabel.textStyle.color',
+    // 是否多选
+    multiple: false,
+    value: '#8C8C8C',
+    tabName: 'custom',
+    groupName: 'xAxis'
+  },
+  {
+    label: '标题',
+    type: 'input',
+    field: 'xAxis_name',
+    optionField: 'xAxis.name',
+    value: '',
+    tabName: 'custom',
+    groupName: 'xAxis'
+  },
+  {
+    label: '标题颜色',
+    type: 'colorPicker',
+    field: 'xAxis_nameTextStyle_color',
+    optionField: 'xAxis.nameTextStyle.color',
+    // 是否多选
+    multiple: false,
+    value: '#8C8C8C',
+    tabName: 'custom',
+    groupName: 'xAxis'
+  },
+  {
+    label: '标题大小',
+    type: 'inputNumber',
+    field: 'xAxis_nameTextStyle_fontSize',
+    optionField: 'xAxis.nameTextStyle.fontSize',
+    value: 12,
+    tabName: 'custom',
+    groupName: 'xAxis'
+  },
+  {
+    label: '标题位置',
+    type: 'select',
+    field: 'xAxis_nameLocation',
+    optionField: 'xAxis.nameLocation',
+    value: 'start',
+    tabName: 'custom',
+    options: [
+      {
+        label: '左',
+        value: 'start'
+      },
+      {
+        label: '中',
+        value: 'center'
+      },
+      {
+        label: '右',
+        value: 'end'
+      }],
+    groupName: 'xAxis'
+  },
+  // Y轴 yAxis
+  {
+    label: '显示',
+    type: 'switch',
+    field: 'yAxis_show',
+    optionField: 'yAxis.show',
+    value: 1,
+    active: 1,
+    inactive: 0,
+    tabName: 'custom',
+    groupName: 'yAxis'
+  },
+  {
+    label: '名称',
+    type: 'input',
+    field: 'yAxis_name',
+    optionField: 'yAxis.name',
+    value: '',
+    tabName: 'custom',
+    groupName: 'yAxis'
+  },
+  {
+    label: '名称颜色',
+    type: 'colorPicker',
+    field: 'yAxis_nameTextStyle_color',
+    optionField: 'yAxis.nameTextStyle.color',
+    // 是否多选
+    multiple: false,
+    value: '#8C8C8C',
+    tabName: 'custom',
+    groupName: 'yAxis'
+  },
+  {
+    label: '名称大小',
+    type: 'inputNumber',
+    field: 'yAxis_nameTextStyle_fontSize',
+    optionField: 'yAxis.nameTextStyle.fontSize',
+    value: 12,
+    tabName: 'custom',
+    groupName: 'yAxis'
+  },
+  {
+    label: '名称位置',
+    type: 'select',
+    field: 'yAxis_nameLocation',
+    optionField: 'yAxis.nameLocation',
+    value: 'end',
+    tabName: 'custom',
+    options: [
+      {
+        label: '下',
+        value: 'start'
+      },
+      {
+        label: '中',
+        value: 'center'
+      },
+      {
+        label: '上',
+        value: 'end'
+      }],
+    groupName: 'yAxis'
+  },
+  {
+    label: '刻度颜色',
+    type: 'colorPicker',
+    field: 'yAxis_axisLabel_textStyle',
+    optionField: 'yAxis.axisLabel.textStyle.color',
+    // 是否多选
+    multiple: false,
+    value: '#d0d0d0',
+    tabName: 'custom',
+    groupName: 'yAxis'
+  }
+]
+
+// 配置处理脚本
+const optionHandler = ''
+
+// 数据处理脚本
+const dataHandler = ''
+
+// 图表配置 new Line('domName', option)
+const xData = ['本年话务总量', '本年人工话务量', '每万客户呼入量', '本年话务总量']
+const yData = [300, 1230, 425, 300]
+const maxData = [1500, 1500, 1500, 1500]
+const option = {
+  animation: false,
+  tooltip: {
+    show: true
+  },
+  grid: {
+    left: '15%',
+    right: '5%',
+    bottom: '15%',
+    z: 100,
+    containLabel: false,
+    show: false
+  },
+  graphic: {
+    type: 'group',
+    bottom: '8%',
+    left: '10%',
+    z: 100,
+    children: [
+      {
+        type: 'rect',
+        left: 0,
+        bottom: 0,
+        shape: {
+          width: 400,
+          height: 10
+        },
+        style: {
+          fill: '#3f4867'
+        }
+      },
+      {
+        type: 'polygon',
+        left: 0,
+        bottom: 10,
+        shape: {
+          // 左上、右上、右下、左下
+          points: [[40, -50], [360, -50], [400, 0], [0, 0]]
+        },
+        style: {
+          fill: '#303256'
+        }
+      }
+    ]
+  },
+  xAxis: [
+    {
+      show: false,
+      name: '',
+      type: 'category',
+      data: xData,
+      nameTextStyle: {
+        color: '',
+        fontSize: 12
+      },
+      nameLocation: '',
+      // 坐标轴刻度设置:x轴数据展示
+      axisTick: {
+        show: false,
+        alignWithLabel: true
+      },
+      // 是否显示坐标轴的轴线
+      axisLine: {
+        show: false
+      },
+      // 坐标轴刻度标签
+      axisLabel: {
+        show: false,
+        textStyle: {
+          fontSize: 10,
+          color: 'rgb(40, 129, 170)'
+        },
+        margin: 30
+      }
+    },
+    {
+      show: false,
+      type: 'category',
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        show: false
+      },
+      splitArea: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      data: xData
+    }
+  ],
+  yAxis: {
+    name: '',
+    nameTextStyle: {
+      color: '',
+      fontSize: 12
+    },
+    nameLocation: 'end',
+    show: true, // y轴文本标签显示
+    type: 'value',
+    axisLabel: {
+      textStyle: {
+        color: 'rgb(40, 129, 170)'
+      }
+    },
+    // 分隔线
+    splitLine: {
+      show: false // yAxis.show配置为true时，该配置才有效
+    },
+    // y轴轴线是否显示
+    axisLine: {
+      show: true
+    }
+  },
+  seriesCustom: {
+    barWidth: 30,
+    barTopColor: '#2DB1EF',
+    barBottomColor: '#187dcb',
+    barColor1: '#115ba6',
+    barColor2: '#1db0dd',
+    shadowColor: '#041133',
+    shadowTopColor: '#142f5a'
+  },
+  series: [
+    // 顶部
+    {
+      id: 'barTopColor', // 用于区分是图表的什么部分
+      type: 'pictorialBar', // 象形柱图
+      symbol: 'diamond',
+      symbolOffset: [0, '-50%'], // 上部菱形
+      symbolSize: [30, 15],
+      // symbolOffset: [0, -6], // 上部椭圆
+      symbolPosition: 'end',
+      z: 12,
+      label: {
+        normal: {
+          show: false,
+          position: 'top',
+          fontSize: 15,
+          fontWeight: 'bold',
+          color: '#27a7ce'
+        }
+      },
+      color: '#2DB1EF',
+      tooltip: {
+        show: false
+      },
+      data: yData
+    },
+    // 底部
+    {
+      id: 'barBottomColor', // 用于区分是图表的什么部分
+      type: 'pictorialBar',
+      symbol: 'diamond',
+      symbolSize: [30, 15],
+      symbolOffset: ['0%', '50%'], // 下部菱形
+      // symbolOffset: [0, 7], // 下部椭圆
+      z: 12,
+      color: '#187dcb',
+      tooltip: {
+        show: false
+      },
+      data: yData
+    },
+    // 柱子
+    {
+      id: 'barColor', // 用于区分是图表的什么部分
+      type: 'bar',
+      barWidth: 30,
+      z: 10,
+      itemStyle: {
+        normal: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: '#115ba6'
+            },
+            {
+              offset: 1,
+              color: '#1db0dd'
+            }
+          ]),
+          opacity: 0.8,
+          shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
+          shadowBlur: 0 // 阴影模糊值
+        }
+      },
+      data: yData
+    },
+    // 阴影柱子
+    {
+      id: 'shadowColor', // 用于区分是图表的什么部分
+      type: 'bar',
+      barWidth: 30,
+      barGap: '-100%',
+      itemStyle: {
+        normal: {
+          opacity: 0.8,
+          shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
+          shadowBlur: 0 // 阴影模糊值
+        }
+      },
+      label: {
+        show: false
+      },
+      color: '#041133',
+      tooltip: {
+        show: false
+      },
+      data: maxData
+    },
+    // 阴影顶部
+    {
+      id: 'shadowTopColor', // 用于区分是图表的什么部分
+      type: 'pictorialBar', // 象形柱图
+      symbol: 'diamond',
+      symbolOffset: [0, '-50%'], // 上部菱形
+      symbolSize: [30, 15],
+      // symbolOffset: [0, -6], // 上部椭圆
+      symbolPosition: 'end',
+      z: 12,
+      label: {
+        normal: {
+          show: false,
+          position: 'top',
+          fontSize: 15,
+          fontWeight: 'bold',
+          color: '#27a7ce'
+        }
+      },
+      color: '#142f5a',
+      tooltip: {
+        show: false
+      },
+      data: maxData
+
+    }
+  ]
+}
+export default {
+  version,
+  title,
+  name,
+  option,
+  setting,
+  optionHandler,
+  dataHandler
+}

data-room-ui/packages/Echarts/echartList.js

@@ -1,19 +1,13 @@
-/*
- * @description: webpack读取当前文件夹下的所有 图表的js文件配置, 生成g2Plot配置列表
- * @Date: 2023-03-28 10:40:22
- * @Author: xing.heng
- */
-import { dataConfig, settingConfig } from '../PlotRender/settingConfig'
+import { dataConfig, settingConfig } from '../EchartsRender/settingConfig'
 import cloneDeep from 'lodash/cloneDeep'
 import sortList from './echartListSort'
 // 遍历 当前文件夹下的所有文件，找到中文.js文件，然后导出
 const files = require.context('./', true, /[\u4e00-\u9fa5]+.js$/)
 const echartsList = getEchartsList(files)
-// 获取plot配置
+// 获取echarts配置
 function getEchartsList (files) {
   const configMapList = {}
   files.keys().forEach((key) => {
-    // ./折线图/基础折线图.js
     // 取到 "基础折线图"
     const configName = key.split('/')[2].replace('.js', '')
     configMapList[configName] = files(key).default
@@ -38,8 +32,8 @@ function getEchartsList (files) {
       x: 0,
       y: 0,
       type: 'echartsComponent',
-      chartType: config.chartType,
       loading: false,
+      // 把默认右侧配置与自定义右侧配置集合
       option: {
         ...config.option,
         ...cloneDeep(settingConfig)

data-room-ui/packages/Echarts/echartListSort.js

@@ -1,4 +1,5 @@
 // 左侧plot组件的排序
 export default [
-  '3D固定柱状图'
+  '3D基础柱状图',
+  '3D分组柱状图'
 ]

data-room-ui/packages/EchartsRender/index.vue

@@ -19,14 +19,13 @@ import cloneDeep from 'lodash/cloneDeep'
 import linkageMixins from 'data-room-ui/js/mixins/linkageMixins'
 import commonMixins from 'data-room-ui/js/mixins/commonMixins'
 import { mapState, mapMutations } from 'vuex'
-import plotList, { getCustomPlots } from '../G2Plots/plotList'
 import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
 import _ from 'lodash'
 import * as echarts from 'echarts'
 import CloneDeep from 'lodash-es/cloneDeep'
 
 export default {
-  name: 'PlotCustomComponent',
+  name: 'EchartsCustomComponent',
   mixins: [commonMixins, linkageMixins],
   props: {
     config: {
@@ -37,8 +36,7 @@ export default {
   data () {
     return {
       chart: null,
-      hasData: false,
-      plotList
+      hasData: false
     }
   },
   computed: {
@@ -64,7 +62,6 @@ export default {
     }
   },
   created () {
-    this.plotList = [...this.plotList, ...getCustomPlots()]
   },
   watch: {
     // 监听主题变化手动触发组件配置更新
@@ -78,7 +75,7 @@ export default {
     'config.w': {
       handler (val) {
         if (val) {
-          console.log('this.config',this.config);
+          // console.log('this.config',this.config);
           const chartDom = document.getElementById(this.chatId)
           this.observeChart(chartDom, this.chart, this.config.option)
         }
@@ -87,7 +84,8 @@ export default {
     'config.h': {
       handler (val) {
         if (val) {
-          this.newChart(this.config)
+          const chartDom = document.getElementById(this.chatId)
+          this.observeChart(chartDom, this.chart, this.config.option)
         }
       }
     }
@@ -133,7 +131,6 @@ export default {
      * 构造chart
      */
     newChart (config) {
-      // console.log('重新渲染图片');
       const chartDom = document.getElementById(this.chatId)
       this.chart = echarts.init(chartDom)
       config.option && this.chart.setOption(config.option)
@@ -184,23 +181,38 @@ export default {
         if (set.optionField) {
           const optionField = set.optionField.split('.')
           option = config.option
-          optionField.forEach((field, index) => {
-            if (index === optionField.length - 1) {
+          // 判断是不是关于x轴的相关配置，x轴叠加了两层坐标轴，如果是x轴相关配置则作用于xAxis[0]
+          if (optionField[0] === 'xAxis') {
+            optionField.forEach((field, index) => {
+              if (index === 0) {
+                option = option.xAxis[0]
+              } else if (index === optionField.length - 1) {
               // 数据配置时，必须有值才更新
-              if ((set.tabName === type && type === 'data' && set.value) || (set.tabName === type && type === 'custom')) {
-                option[field] = set.value
+                if ((set.tabName === type && type === 'data' && set.value) || (set.tabName === type && type === 'custom')) {
+                  option[field] = set.value
+                }
+              } else {
+                option = option[field]
               }
-            } else {
-              option = option[field]
-            }
-          })
+            })
+          } else {
+            optionField.forEach((field, index) => {
+              if (index === optionField.length - 1) {
+              // 数据配置时，必须有值才更新
+                if ((set.tabName === type && type === 'data' && set.value) || (set.tabName === type && type === 'custom')) {
+                  option[field] = set.value
+                }
+              } else {
+                option = option[field]
+              }
+            })
+          }
         }
       })
       config.option = { ...config.option, ...option }
       return config
     },
     dataFormatting (config, data) {
-      console.log('config', config)
       // 数据返回成功则赋值
       if (data.success) {
         data = data.data
@@ -512,7 +524,6 @@ export default {
     },
     // 组件的样式改变，返回改变后的config
     changeStyle (config, isUpdateTheme) {
-      console.log('組件樣式改變',config)
       config = { ...this.config, ...config }
       config = this.transformSettingToOption(config, 'custom')
       // 这里定义了option和setting是为了保证在执行eval时,optionHandler、dataHandler里面可能会用到，