多彩柱状完成

components/AiEchart/template/bar.js

@@ -258,6 +258,43 @@ export const barChart9 = {
     backgroundStyle: {color: 'rgba(123, 165, 255, .2)'}
   }
 }
+export const barChart10 = {
+  yAxis: {
+    nameGap: 23,
+    minInterval: 1,
+    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
+    axisLabel: {color: '#C3C4C4'},
+    axisPointer: {show: false}
+  },
+  axisPointer: {
+    type: 'shadow',
+    triggerTooltip: false,
+    shadowStyle: {color: 'rgba(46, 153, 255, .2)'}
+  },
+  daemon: {
+    type: 'bar',
+    barWidth: 20,
+    barCategoryGap: 40,
+    itemStyle: {
+      borderRadius: 20,
+      color(params) {
+        console.log(params)
+        const color = ['#DBB36E', '#2C97E8', '#00EFFF', '#BFEAFF'][params.dataIndex]
+        return {
+          type: 'linear',
+          x: 0,
+          x2: 0,
+          y: 0,
+          y2: 1,
+          colorStops: [
+            {offset: 0, color},
+            {offset: 1, color: tools.$colorUtils.Hex2RGBA(color, .1)}
+          ]
+        }
+      }
+    }
+  }
+}
 
 export default {
   barChart1,
@@ -267,4 +304,5 @@ export default {
   barChart7,
   barChart8,
   barChart9,
+  barChart10
 }

components/layout/AiDvSummary/components/Summary20.vue

@@ -55,6 +55,7 @@ export default {
   }
 
   .value {
+    color: white;
     width: 100%;
     padding: 6px 14px;
     font-family: DIN;

packages/bigscreen/designer/components/chartPicker.vue

@@ -3,7 +3,7 @@
     <ai-dialog-btn :modal="false" dialog-title="选择图表模板" :customFooter="false"
                    @confirm="handleConfirm" @open="handleOpenDialog">
       <template #btn>
-        <img class="pointer" v-if="current.thumb" :src="current.thumb"/>
+        <img class="pointer thumb" v-if="current.thumb" :src="current.thumb"/>
         <el-button v-else type="text">选择图表</el-button>
       </template>
       <div class="charts">
@@ -62,6 +62,11 @@ export default {
     cursor: pointer;
   }
 
+  .thumb {
+    width: 200px;
+    height: 90px;
+  }
+
   .charts {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
@@ -74,6 +79,7 @@ export default {
 
       & > img {
         width: 100%;
+        height: 90px;
       }
 
       &.selected, &:hover {

packages/bigscreen/designer/components/componentConfig.vue

@@ -41,7 +41,7 @@
         </config-item>
         <template v-if="/Chart/.test(config.type)">
           <config-item label="图表模板">
-            <chart-picker v-model="config.config" @input="v=>config.echartOps=$copy($echartTpls[v])"/>
+            <chart-picker v-model="config.config" @input="v=>config.echartOps=$echartTpls[v]"/>
           </config-item>
           <config-item label="图表配置项" top-label>
             <json-editor v-model="config.echartOps"/>
@@ -101,7 +101,7 @@
           <config-item label="表格行数" v-if="config.type !== 'AiDvTable'">
             <el-input-number size="mini" style="width: 232px" :min="0" v-model="config.rowNum" controls-position="right"/>
           </config-item>
-          <config-item v-if="config.type === 'AiDvTable'" v-for="(item, i) in config.config" :label="`第${i+1}列`">
+          <config-item v-if="config.type === 'AiDvTable'" v-for="(item, i) in config.config" :key="i" :label="`第${i+1}列`">
             <el-select size="mini" style="width: 80px;" v-model="item.align" placeholder="请选择" clearable>
               <el-option label="居中" value="center"></el-option>
               <el-option label="居左" value="left"></el-option>

packages/bigscreen/designer/config.js

@@ -163,7 +163,19 @@ export const chartTpl = [{
     staticData: [{name: '阿斯达', v1: 23}, {name: '水电费', v1: 12}, {name: '凡哥', v1: 67}, {name: '党费', v1: 98}],
     config: 'barChart9',
     dynamicData: []
-  }]
+  }, {
+    type: 'barChart10',
+    label: '柱状图8',
+    title: '柱状图8',
+    border: 'border13',
+    width: 500,
+    thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/bar10.png',
+    height: 300,
+    dataType: 'staticData',
+    staticData: [{name: '阿斯达', v1: 23}, {name: '水电费', v1: 12}, {name: '凡哥', v1: 67}, {name: '党费', v1: 98}],
+    config: 'barChart10'
+  },
+  ]
 }, {
   label: '折线图', type: 'line', list: [{
     code: 'widget-linechart',

ui/packages/tools/AiEchartV2.vue

@@ -53,6 +53,7 @@ export default {
       return ['#FFBA44', '#EC6666', '#FF3E18', '#C9FF82', '#29D7FA', '#ea7ccc']
     },
     chartOptions() {
+      const {daemon} = this.$echartTpls[this.tpl]
       let {type, data, ops: options = {}} = this,
           style = this.series ? this.series : this.ops.daemon ? this.ops.daemon : {},
           colors = this.theme === '1' ? this.colors : (options.color || this.colors),
@@ -98,7 +99,7 @@ export default {
           top: '26px',
           containLabel: true
         },
-        legend, series, ...options,
+        legend, series: {...daemon, ...series}, ...options,
         color: colors
       }
     },