1、添加锥形柱图

qianbao
1 parent 02379a24
Showing 13 changed files with 374 additions and 12 deletions
src/views/bigscreenDesigner/designer/tools/configure/funnelCharts/widget-conical-column-chart.js
src/views/bigscreenDesigner/designer/tools/main.js
src/views/bigscreenDesigner/designer/widget/funnel/widgetConicalColumnChart.vue
src/views/bigscreenDesigner/designer/widget/temp.vue
src/views/bigscreenDesigner/designer/widget/text/widgetWaterLevelPond.vue
src/views/bigscreenDesigner/designer/widget/widget.vue
static/images/conicalColumnChart/1st.png
static/images/conicalColumnChart/2st.png
static/images/conicalColumnChart/3st.png
static/images/conicalColumnChart/4st.png
static/images/conicalColumnChart/5st.png
static/images/conicalColumnChart/6st.png
static/images/conicalColumnChart/7st.png
+/*
+ * @Descripttion: 锥形柱图
+ */
+export const widgetConicalColumnChart = {
+  code: 'widget-conical-column-chart',
+  type: 'funnel',
+  tabName: '漏斗图',
+  label: '锥形柱图',
+  icon: 'iconloudoutu',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '漏斗图',
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        required: false,
+        placeholder: '',
+        value: ''
+      },
+      {
+        type: 'el-switch',
+        label: '显示数值',
+        name: 'showValue',
+        require: false,
+        placeholder: '',
+        value: false,
+      },
+      {
+        type: 'el-input-number',
+        label: '字体字号',
+        name: 'fontSize',
+        required: false,
+        placeholder: '',
+        value: 20
+      },
+      {
+        type: 'el-switch',
+        label: '图片显示',
+        name: 'showImg',
+        require: false,
+        placeholder: '',
+        value: true,
+      },
+      {
+        type: 'el-input-number',
+        label: '图片边长',
+        name: 'imgSideLength',
+        required: false,
+        placeholder: '',
+        value: 30
+      },
+      {
+        type: 'vue-color',
+        label: '柱颜色',
+        name: 'columnColor',
+        required: false,
+        placeholder: '',
+        value: 'rgba(0, 194, 255, 0.4)'
+      },
+      {
+        type: 'vue-color',
+        label: '文字颜色',
+        name: 'textColor',
+        required: false,
+        placeholder: '',
+        value: '#fff'
+      }
+    ],
+    // 数据
+    data: [
+      {
+        type: 'el-radio-group',
+        label: '数据类型',
+        name: 'dataType',
+        require: false,
+        placeholder: '',
+        selectValue: true,
+        selectOptions: [
+          {
+            code: 'staticData',
+            name: '静态数据',
+          },
+          {
+            code: 'dynamicData',
+            name: '动态数据',
+          },
+        ],
+        value: 'staticData',
+      },
+      {
+        type: 'el-input-number',
+        label: '刷新时间(毫秒)',
+        name: 'refreshTime',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'dynamicData',
+        value: 5000
+      },
+      {
+        type: 'el-button',
+        label: '静态数据',
+        name: 'staticData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'staticData',
+        value: [
+          {
+            name: '周口',
+            value: 55,
+            // img:'/static/images/conicalColumnChart/1st.png'
+          },
+          {
+            name: '南阳',
+            value: 120,
+            // img:'/static/images/conicalColumnChart/2st.png'
+          },
+          {
+            name: '西峡',
+            value: 71,
+            // img:'/static/images/conicalColumnChart/3st.png'
+          },
+          {
+            name: '驻马店',
+            value: 66,
+            // img:'/static/images/conicalColumnChart/4st.png'
+          },
+          {
+            name: '新乡',
+            value: 80,
+            // img:'/static/images/conicalColumnChart/5st.png'
+          },
+          {
+            name: '信阳',
+            value: 35,
+            // img:'/static/images/conicalColumnChart/6st.png'
+          },
+          {
+            name: '漯河',
+            value: 15,
+            // img:'/static/images/conicalColumnChart/7st.png'
+          }
+        ],
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        chartType: 'widget-funnel',
+        relactiveDomValue: 'dynamicData',
+        dictKey: 'PIE_PROPERTIES',
+        value: '',
+      },
+    ],
+    // 坐标
+    position: [
+      {
+        type: 'el-input-number',
+        label: '左边距',
+        name: 'left',
+        required: false,
+        placeholder: '',
+        value: 0,
+      },
+      {
+        type: 'el-input-number',
+        label: '上边距',
+        name: 'top',
+        required: false,
+        placeholder: '',
+        value: 0,
+      },
+      {
+        type: 'el-input-number',
+        label: '宽度',
+        name: 'width',
+        required: false,
+        placeholder: '该容器在1920px大屏中的宽度',
+        value: 500,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 250,
+      },
+    ],
+  }
+}
@@ -39,6 +39,7 @@ import {widgetWaterLevelPond} from &quot;./configure/texts/widget-water-level-pond&quot;;
 import {widgetDigitalFlop} from "./configure/texts/widget-digital-flop";
 import {widgetScrollRankingBoard} from "./configure/texts/widget-scroll-ranking-board";
 import {widgetActiveRingChart} from "./configure/pieCharts/widget-active-ring-chart";
+import {widgetConicalColumnChart} from "./configure/funnelCharts/widget-conical-column-chart";
 export const widgetTool = [
@@ -85,5 +86,6 @@ export const widgetTool = [
   widgetRadar,
   widgetBarLineStack,
   widgetProgress,
-  widgetActiveRingChart
+  widgetActiveRingChart,
+  widgetConicalColumnChart
 ]
+<!--
+锥形柱图
+-->
+<template>
+<!--  <div id="widget-scroll-ranking-board" :style="styleObj">-->
+    <dv-conical-column-chart :config="options" :style="styleObj"/>
+<!--  </div>-->
+</template>
+<script>
+import Vue from "vue";
+import conicalColumnChart from "@jiaminghi/data-view/lib/components/conicalColumnChart";
+Vue.use(conicalColumnChart)
+export default {
+  name: "WidgetScrollRankingBoard",
+  props: {
+    value: Object,
+    ispreview: Boolean,
+  },
+  data() {
+    return {
+      //返回图标数据
+      options: {
+        data:[],//柱数据
+        img:[],//柱顶图片url
+        fontSize: 12,//文字大小
+        imgSideLength: 30,//图片边长
+        columnColor: 'rgba(0, 194, 255, 0.4)',//柱颜色
+        textColor: '#fff',//文字颜色
+        showValue: false//显示数值
+      },
+      optionsStyle: {}, // 样式
+      optionsData: {}, // 数据
+      optionsCollapse: {}, // 图标属性
+      optionsSetup: {},
+      defImgArray:[
+        '/static/images/conicalColumnChart/1st.png',
+        '/static/images/conicalColumnChart/2st.png',
+        '/static/images/conicalColumnChart/3st.png',
+        '/static/images/conicalColumnChart/4st.png',
+        '/static/images/conicalColumnChart/5st.png',
+        '/static/images/conicalColumnChart/6st.png',
+        '/static/images/conicalColumnChart/7st.png'
+      ],
+    };
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+        background: this.optionsSetup.background
+      };
+    },
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+  },
+  methods: {
+    // 修改图标options属性
+    editorOptions() {
+      //数据修改
+      this.setOptionsData();
+      //配置修改
+      this.setOptionsConfig();
+    },
+    // 配置修改
+    setOptionsConfig() {
+      const optionsSetup = this.optionsSetup;
+      this.options.fontSize =optionsSetup.fontSize;
+      this.options.imgSideLength =optionsSetup.imgSideLength;
+      this.options.columnColor =optionsSetup.columnColor;
+      this.options.textColor =optionsSetup.textColor;
+      this.options.showValue =optionsSetup.showValue;
+      this.options.showImg =optionsSetup.showImg;
+      this.options={...this.options};
+    },
+    //数据类型
+    setOptionsData() {
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
+    },
+    getImgs(data){
+      const imgArray =[];
+      const key="img";
+      for (let i = 0; i < data.length; i++) {
+        const cloneVal= data[i];
+        if (Object.hasOwn(cloneVal, key) && cloneVal[key]) {
+          imgArray.push(cloneVal[key]);
+        }
+      }
+      const showImg = this.isBlank(this.optionsSetup.showImg)?true:this.optionsSetup.showImg;
+      if(showImg){
+        return imgArray.length>0?imgArray:this.defImgArray;
+      }else{
+        return [];
+      }
+    },
+    staticDataFn(val) {
+      // console.log("设置静态数据",this.options)
+      const staticData = typeof val == "string" ? JSON.parse(val) : val;
+      const staticImg = this.getImgs(staticData);
+      this.options.data=staticData;
+      this.options.img=staticImg;
+    },
+    dynamicDataFn(val, refreshTime) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val);
+      }
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(res);
+      });
+    },
+    renderingFn(val) {
+      const staticImg = this.getImgs(val);
+      this.options.data = val;
+      this.options.img = staticImg;
+    },
+  }
+};
+
+</script>
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>
@@ -45,7 +45,7 @@ import widgetWaterLevelPond from &quot;./text/widgetWaterLevelPond&quot;;
 import widgetDigitalFlop from "./text/widgetDigitalFlop";
 import widgetScrollRankingBoard from "./text/widgetScrollRankingBoard";
 import widgetActiveRingChart from "./pie/widgetActiveRingChart";
-
+import widgetConicalColumnChart from "./funnel/widgetConicalColumnChart";
 export default {
   name: "WidgetTemp",
@@ -89,7 +89,8 @@ export default {
     widgetWaterLevelPond,
     widgetDigitalFlop,
     widgetScrollRankingBoard,
-    widgetActiveRingChart
+    widgetActiveRingChart,
+    widgetConicalColumnChart
   },
   model: {
     prop: "value",
@@ -111,10 +111,10 @@ export default {
 };
 </script>
-<!--<style scoped lang="scss">-->
-<!--.echarts {-->
-<!--  width: 100%;-->
-<!--  height: 100%;-->
-<!--  overflow: hidden;-->
-<!--}-->
-<!--</style>-->
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>
@@ -56,6 +56,7 @@ import widgetWaterLevelPond from &quot;./text/widgetWaterLevelPond&quot;;
 import widgetDigitalFlop from "./text/widgetDigitalFlop";
 import widgetScrollRankingBoard from "./text/widgetScrollRankingBoard";
 import widgetActiveRingChart from "./pie/widgetActiveRingChart";
+import widgetConicalColumnChart from "./funnel/widgetConicalColumnChart";
 export default {
   name: "Widget",
   components: {
@@ -98,8 +99,8 @@ export default {
     widgetWaterLevelPond,
     widgetDigitalFlop,
     widgetScrollRankingBoard,
-    widgetActiveRingChart
-
+    widgetActiveRingChart,
+    widgetConicalColumnChart
   },
   model: {
     prop: "value",