初始化

frontend/packages/EchartsRender/index.vue

@@ -0,0 +1,513 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap bs-custom-component"
+    :class="{'light-theme':customTheme === 'light','auto-theme':customTheme !=='light'}"
+  >
+    <div
+      :id="chatId"
+      style="width: 100%;height: 100%"
+    />
+  </div>
+</template>
+<script>
+import 'insert-css'
+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 { 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: 'EchartsCustomComponent',
+  mixins: [commonMixins, linkageMixins],
+  props: {
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      chart: null,
+      hasData: false
+    }
+  },
+  computed: {
+    ...mapState('bigScreen', {
+      pageInfo: state => state.pageInfo,
+      customTheme: state => state.pageInfo.pageConfig.customTheme,
+      activeCode: state => state.activeCode
+    }),
+    chatId () {
+      let prefix = 'chart_'
+      if (this.$route.path === window?.BS_CONFIG?.routers?.previewUrl) {
+        prefix = 'preview_chart_'
+      }
+
+      if (this.$route.path === window?.BS_CONFIG?.routers?.designUrl) {
+        prefix = 'design_chart_'
+      }
+
+      if (this.$route.path === window?.BS_CONFIG?.routers?.pageListUrl) {
+        prefix = 'management_chart_'
+      }
+      return prefix + this.config.code
+    }
+  },
+  created () {
+  },
+  watch: {
+    // 监听主题变化手动触发组件配置更新
+    'config.option.theme': {
+      handler (val) {
+        if (val) {
+          this.changeStyle(this.config, true)
+        }
+      }
+    }
+  },
+  mounted () {
+    const dragSelect = document.querySelector('#' + this.chatId)
+    const resizeObserver = new ResizeObserver(entries => {
+      if (this.chart) {
+        this.chart.resize()
+        if(this.config.name.includes('3D')){
+          let config = this.observeChart(entries)
+          config = this.seriesStyle(config)
+          config.option && this.chart.setOption(config.option)
+        }
+      }
+    })
+    resizeObserver.observe(dragSelect)
+  },
+  beforeDestroy () {
+    if (this.chart) {
+      this.chart.dispose()
+    }
+  },
+  methods: {
+    ...mapMutations('bigScreen', ['changeChartConfig', 'changeActiveItemConfig', 'changeChartLoading']),
+    chartInit () {
+      let config = this.config
+      // key和code相等，说明是一进来刷新，调用list接口
+      if (this.config.code === this.config.key || this.isPreview) {
+        // 改变样式
+        config = this.changeStyle(config)
+        // 改变数据
+        config.loading = true
+        this.changeChartLoading(config)
+        this.changeDataByCode(config).then((res) => {
+          // 初始化图表
+          config.loading = false
+          this.changeChartLoading(config)
+          this.newChart(res)
+        }).catch(() => {
+        })
+      } else {
+        config.loading = true
+        this.changeChartLoading(config)
+        // 否则说明是更新，这里的更新只指更新数据（改变样式时是直接调取changeStyle方法），因为更新数据会改变key,调用chart接口
+        this.changeData(config).then((res) => {
+          config.loading = false
+          this.changeChartLoading(config)
+          // 初始化图表
+          this.newChart(res)
+        })
+      }
+    },
+    /**
+     * 构造chart
+     */
+    newChart (config) {
+      const chartDom = document.getElementById(this.chatId)
+      this.chart = echarts.init(chartDom)
+      config.option && this.chart.setOption(config.option)
+    },
+    /**
+     * 控制底部阴影大小
+     */
+    observeChart (entries) {
+      const width = entries[0].contentRect.width
+      const height = entries[0].contentRect.height
+      const option = this.config.option
+      // 调整长方形的大小
+      option.graphic.children[0].shape.width = width * 0.9
+      // 调整多边形的大小
+      option.graphic.children[1].shape.points = [[width / 10, -height / 6], [width - width / 6, -height / 6], [width * 0.9, 0], [0, 0]]
+      return this.config
+    },
+    /**
+     * 注册事件
+     */
+    registerEvent () {
+      // 图表添加事件进行数据联动
+      let formData = {}
+      // eslint-disable-next-line no-unused-vars
+      this.chart.on('tooltip:change', (...args) => {
+        formData = {}
+        formData = cloneDeep(args[0].data.items[0].data)
+      })
+      // eslint-disable-next-line no-unused-vars
+      this.chart.on('plot:click', (...args) => {
+        this.linkage(formData)
+      })
+    },
+    // 将config.setting的配置转化为option里的配置，这里之所以将转化的方法提出来，是因为在改变维度指标和样式的时候都需要转化
+    transformSettingToOption (config, type) {
+      let option = null
+      config.setting.forEach(set => {
+        if (set.optionField) {
+          const optionField = set.optionField.split('.')
+          option = config.option
+          // 判断是不是关于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
+                }
+              } else {
+                option = option[field]
+              }
+            })
+          } else if (optionField[0] === 'series') {
+            let changeObject = []
+            let beforeChange = []
+            // 如果要配置数据标签相关信息
+            optionField.forEach((field, index) => {
+              if (index === 0) {
+                option = option[field]
+              } else if (index === 1) {
+                // 筛选出需要修改的series对象
+                changeObject = option.filter(item => item.id.includes(field))
+                beforeChange = [...changeObject]
+                option = option.filter(item => !(item.id.includes(field)))
+              } else if (index === optionField.length - 1) {
+                if ((set.tabName === type && type === 'data' && set.value) || (set.tabName === type && type === 'custom')) {
+                  changeObject.map(item => {
+                    item[field] = set.value
+                  })
+                }
+              } else {
+                const changeResult = []
+                changeObject.forEach(item => {
+                  const result = { ...item[field] }
+                  changeResult.push(result)
+                })
+                changeObject = [...changeResult]
+              }
+            })
+            // 合并修改后的series对象
+            changeObject.forEach(
+              (item, index) => {
+                beforeChange[index].label = _.cloneDeep(item)
+                option.push(beforeChange[index])
+              }
+            )
+          } else if (optionField[0] === 'graphic') {
+            // 配置底部阴影颜色
+            option.graphic.children.forEach(item => {
+              item.style.fill = set.value
+            })
+          } 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]
+              }
+            })
+          }
+        }
+      })
+      return config
+    },
+    dataFormatting (config, data) {
+      // config = this.config
+      // 数据返回成功则赋值
+      if (data.success) {
+        data = data.data
+        // 获取到后端返回的数据，有则赋值
+        const option = config.option
+        const setting = config.setting
+        if (config.dataHandler) {
+          try {
+            // 此处函数处理data
+            eval(config.dataHandler)
+          } catch (e) {
+            console.error(e)
+          }
+        }
+        config.option = this.echartsOptionFormatting(config, data)
+        config = this.transformSettingToOption(config, 'data')
+      } else {
+        // 数据返回失败则赋前端的模拟数据
+        // config.option.data = this.plotList?.find(plot => plot.name === config.name)?.option?.data || config?.option?.data
+      }
+      config = this.seriesStyle(config)
+      return config
+    },
+    getxDataAndYData (xField, yField, data) {
+      let xData = []
+      let yData = []
+
+      // 获取所有x轴的分类
+      data.forEach(item => {
+        xData.push(item[xField])
+      })
+      xData = [...new Set(xData)]
+      xData.forEach(x => {
+        let max = 0
+        data.forEach(item => {
+          if (item[xField] === x) {
+            max = item[yField] > max ? item[yField] : max
+          }
+        })
+        yData.push(max)
+      })
+      return { xData, yData }
+    },
+    // 格式化echarts的配置
+    echartsOptionFormatting (config, data) {
+      const option = config.option
+      // 分组字段
+      const xField = config.setting.find(item => item.optionField === 'xField')?.value
+      const yField = config.setting.find(item => item.optionField === 'yField')?.value
+      // 判断是否存在分组
+      const hasSeries = config.setting.find(item => item.optionField === 'seriesField' && item.value !== '')
+      const { xData, yData } = this.getxDataAndYData(xField, yField, data)
+      const maxY = Math.max(...yData) + Math.max(...yData) * 0.2
+      // 生成阴影柱子的值
+      const shadowData = Array.from({ length: xData.length }, () => maxY)
+      option.xAxis = option.xAxis.map(item => {
+        return {
+          ...item,
+          data: xData
+        }
+      })
+      // 存在分组字段
+      if (hasSeries) {
+        const seriesField = config.setting.find(item => item.optionField === 'seriesField')?.value
+        const seriesFieldList = [...new Set(data.map(item => item[seriesField]))]
+        option.series = []
+        const barWidth = option.seriesCustom.barWidth
+        // 获取数据标签展示情况
+        let labelShow = 0
+        let labelPosition = 'inside'
+        let labelColor = '#fff'
+        let labelSize = 12
+        config.setting.forEach(set => {
+          if (set.field === 'series_barColor_label_show') {
+            labelShow = set.value
+          } else if (set.field === 'series_barColor_label_position') {
+            labelPosition = set.value
+          } else if (set.field === 'series_barColor_label_color') {
+            labelColor = set.value
+          } else if (set.field === 'series_barColor_label_fontSize') {
+            labelSize = set.value
+          }
+        })
+        // 偏移量数组
+        const offsetArr = []
+        let index = 0
+        if (seriesFieldList.length % 2 === 0) {
+          const length = seriesFieldList.length / 2
+          for (let i = 0; i < length; i++) {
+            const offsetX = (parseInt('10%') + parseInt('50%')) * (2 * i + 1)
+            offsetArr.push(offsetX)
+            offsetArr.unshift(-offsetX)
+          }
+        } else {
+          const length = Math.ceil(seriesFieldList.length / 2)
+          for (let i = 0; i < length; i++) {
+            if (i === 0) {
+              offsetArr.push(0)
+            } else {
+              const offsetX = (parseInt('20%') + parseInt('100%')) * i
+              offsetArr.push(offsetX)
+              offsetArr.unshift(-offsetX)
+            }
+          }
+        }
+        for (const seriesFieldItem of seriesFieldList) {
+          const seriesData = (data.filter(item => item[seriesField] === seriesFieldItem))?.map(item => item[yField])
+          const seriesItem = [
+            {
+              id: 'barTopColor' + seriesFieldItem,
+              type: 'pictorialBar',
+              tooltip: { show: false },
+              symbol: 'diamond',
+              symbolSize: [barWidth, barWidth / 2],
+              symbolOffset: [offsetArr[index] + '%', -barWidth / 4],
+              symbolPosition: 'end',
+              z: 15,
+              zlevel: 2,
+              color: '#ffff33',
+              data: seriesData
+            },
+            {
+              id: 'barColor' + seriesFieldItem,
+              type: 'bar',
+              barGap: '20%',
+              barWidth: barWidth,
+              color: '#115ba6',
+              label: {
+                fontStyle: 'normal',
+                show: labelShow,
+                position: labelPosition,
+                color: labelColor,
+                fontSize: labelSize
+              },
+              zlevel: 2,
+              z: 12,
+              data: seriesData
+            },
+            {
+              id: 'barBottomColor' + seriesFieldItem,
+              type: 'pictorialBar',
+              tooltip: { show: false },
+              symbol: 'diamond',
+              symbolSize: [barWidth, barWidth / 2],
+              symbolOffset: [offsetArr[index] + '%', barWidth / 4],
+              zlevel: 2,
+              z: 15,
+              color: 'rgb(2, 192, 255)',
+              data: seriesData
+            },
+            {
+              id: 'shadowColor' + seriesFieldItem,
+              type: 'bar',
+              tooltip: { show: false },
+              xAxisIndex: 1,
+              barGap: '20%',
+              data: shadowData,
+              zlevel: 1,
+              barWidth: barWidth,
+              color: 'rgba(9, 44, 76,.8)'
+            },
+            {
+              id: 'shadowTopColor' + seriesFieldItem,
+              type: 'pictorialBar',
+              tooltip: { show: false },
+              symbol: 'diamond',
+              symbolSize: [barWidth, barWidth / 2],
+              symbolOffset: [offsetArr[index] + '%', -barWidth / 4],
+              symbolPosition: 'end',
+              z: 15,
+              color: 'rgb(15, 69, 133)',
+              zlevel: 1,
+              data: shadowData
+            }
+          ]
+          index++
+          option.series.push(...seriesItem)
+        }
+      } else {
+        // 没有分组，不需要修改配置，直接修改series中每个对象的series
+        option.series.forEach(item => {
+          if (item.id.includes('shadow')) {
+            item.data = shadowData
+          } else {
+            item.data = yData
+          }
+        })
+      }
+      return option
+    },
+    // 对series里面的样式进行配置
+    seriesStyle (config) {
+      if(!config.name.includes('3D')){
+        return config
+      }
+      const _config = CloneDeep(config)
+      const seriesCustom = _config.option.seriesCustom
+      const ids = Object.keys(config.option.seriesCustom)
+      // 判断是否是分组柱状图
+      const isGroup = _config.option.series.length !== 5
+      // 宽度配置
+      _config.option.series.forEach(item => {
+        if (item.type === 'pictorialBar') {
+          item.symbolSize = [seriesCustom.barWidth, seriesCustom.barWidth / 2]
+        } else if (item.type === 'bar') {
+          item.barWidth = seriesCustom.barWidth
+        }
+      })
+      // 如果是基础柱状图
+      if (!isGroup) {
+        _config.option.series.forEach(item => {
+          // 配置颜色
+          if (ids.includes(item.id)) {
+            item.color = seriesCustom[item.id]
+          }
+        })
+      } else {
+        // 如果是分组柱状图
+        ids.forEach(id => {
+          if (id !== 'barWidth') {
+            let index = 0
+            _config.option.series.forEach(item => {
+              if (item.id.includes(id)) {
+                item.color = _config.option.seriesCustom[id][index]
+                index++
+              }
+            })
+          }
+        })
+      }
+      return _config
+    },
+    // 组件的样式改变，返回改变后的config
+    changeStyle (config, isUpdateTheme) {
+      config = { ...this.config, ...config }
+      config = this.transformSettingToOption(config, 'custom')
+      // 这里定义了option和setting是为了保证在执行eval时,optionHandler、dataHandler里面可能会用到，
+      const option = config.option
+      const setting = config.setting
+      if (this.config.optionHandler) {
+        try {
+          // 此处函数处理config
+          eval(this.config.optionHandler)
+        } catch (e) {
+          console.error(e)
+        }
+      }
+      // 此时，setting中的部分变量映射到了option.seriesCustom中，但未映射到series的具体配置中
+      config = this.seriesStyle(config)
+      // 只有样式改变时更新主题配置，切换主题时不需要保存
+      if (!isUpdateTheme) {
+        config.theme = settingToTheme(_.cloneDeep(config), this.customTheme)
+      }
+      this.changeChartConfig(config)
+      if (config.code === this.activeCode) {
+        this.changeActiveItemConfig(config)
+      }
+      if (this.chart) {
+        this.chart.setOption(config.option)
+      }
+      return config
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../assets/style/echartStyle';
+.light-theme{
+  background-color: #ffffff;
+  color: #000000;
+}
+.auto-theme{
+  background-color: transparent;
+}
+
+</style>

frontend/packages/EchartsRender/settingConfig.js

@@ -0,0 +1,23 @@
+import { commonConfig, displayOption } from 'data-room-ui/js/config'
+export const settingConfig = {
+  displayOption: { ...displayOption }
+}
+const customConfig = {
+  root: {
+    contribution: false
+  },
+  customize: {
+    theme: 'dark', // 'light'、'dark'
+    colorScheme: [],
+    legend: null,
+    legendColor: '', // 图例颜色
+    xaxisColor: '', // x轴标签颜色
+    xaxisFontSize: 14, // x轴标签字体大小
+    yaxisColor: '', // y轴标签颜色
+    yaxisFontSize: 14, // y轴标签字体大小
+    labelColor: ''// 标签颜色
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}