添加新图表类型

web/src/store/modules/charts.js

@@ -99,7 +99,16 @@ const state = () => ({
     lineStyle:{
       // color:"auto",
       width:2,
-    }
+    },
+    label:{
+      show: false,
+      position: 'outside',
+      color: '#000',
+      fontWeight:"normal",
+      fontSize:12,
+
+    },
+    showAreaStyle:false
   },
   chartSettingsDataZoom: [
     {

web/src/views/chartcustomization/chartConfig/chartLabel.vue

+<template>
+  <div class="setting">
+    <el-collapse v-model="activeNames" >
+      <el-collapse-item name="label">
+        <div slot="title" class="collapse-item">
+          图表标签
+          <el-switch
+            v-model="chartSettingsSeries.label.show"
+            style="pointer-events: none;"
+            active-color="#13ce66"
+            >
+          </el-switch>
+        </div>
+        <div class="element-config">
+          字体
+          <div v-if="chartSettingsSeries.label.fontWeight=='bolder'" @click="changeWeight('normal')">
+            <span style="font-size: 18px;font-weight: bolder;cursor: pointer;color: #409EFF;">B</span>
+          </div>
+          <div v-else>
+            <span style="font-size: 18px;font-weight: bolder;cursor: pointer"  @click="changeWeight('bolder')">B</span>
+          </div>
+          <el-color-picker v-model="chartSettingsSeries.label.color"></el-color-picker>
+          <el-select style="width: 80px !important;" v-model="chartSettingsSeries.label.fontSize" placeholder="请选择">
+            <el-option
+              v-for="items in options"
+              :key="items.value"
+              :label="items.label"
+              :value="items.value">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="element-config">
+          位置
+          <el-select style="width: 120px !important;" v-model="chartSettingsSeries.label.position" placeholder="请选择">
+            <el-option
+              v-for="items in positionOptions"
+              :key="items.value"
+              :label="items.label"
+              :value="items.value">
+            </el-option>
+          </el-select>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<script>
+    import { mapState } from 'vuex';
+    export default {
+      name: "chartLabel",
+      computed: {
+        ...mapState('charts',['chartSettingsSeries','dataSet'])
+      },
+      methods:{
+        changeWeight(value){
+          this.chartSettingsSeries.label.fontWeight = value;
+          this.$store.commit('charts/updateChartSettingsSeries', this.chartSettingsSeries);
+        }
+      },
+      mounted() {
+
+        if(this.chartSettingsSeries.label.show==true){
+          this.activeNames=["label"]
+        }else {
+          this.activeNames=[]
+        }
+      },
+      watch:{
+        'activeNames':function (newVal,oldVal) {
+          if(newVal.length>0){
+            this.chartSettingsSeries.label.show=true
+          }else {
+            this.chartSettingsSeries.label.show=false
+          }
+          this.$store.commit('charts/updateChartSettingsSeries', this.chartSettingsSeries);
+        },
+        'chartSettingsSeries':{
+          deep: true,
+          handler: function (newVal,oldVal) {
+            // console.log(this.chartSettingsSeries.showPoint)
+            if(this.chartSettingsSeries.label.show==true){
+              this.activeNames=["label"]
+            }else {
+              this.activeNames=[]
+            }
+          }
+        }
+      },
+      data(){
+        return{
+          activeNames:[],
+          options:[
+            {
+            value: '10',
+            label: '10'
+          },{
+            value: '11',
+            label: '11'
+          },{
+            value: '12',
+            label: '12'
+          },{
+            value: '13',
+            label: '13'
+          },{
+            value: '14',
+            label: '14'
+          },{
+            value: '15',
+            label: '15'
+          },{
+            value: '16',
+            label: '16'
+          },{
+            value: '17',
+            label: '17'
+          },{
+            value: '18',
+            label: '18'
+          },{
+            value: '19',
+            label: '19'
+          },{
+            value: '20',
+            label: '20'
+          },{
+            value: '21',
+            label: '21'
+          },{
+            value: '22',
+            label: '22'
+          },{
+            value: '23',
+            label: '23'
+          },{
+            value: '24',
+            label: '24'
+          },],
+          positionOptions:[
+            {label:"标签外",value:'outside'},
+            {label:"标签内",value:'inside'}
+          ]
+        }
+      }
+    }
+</script>
+
+<style scoped>
+  .collapse-item{
+    width: 100%;
+    font-weight: bold;
+    line-height: 40px;
+    display: flex;
+    justify-content: space-between;
+    margin: 0 15px;
+    align-items: center;
+  }
+  .element-config{
+    margin: 0px 15px 15px 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>

web/src/views/chartcustomization/chartConfig/chartLine.vue

 <template>
   <div class="setting">
-    <el-collapse v-model="activeNames" >
-      <el-collapse-item name="line">
+    <el-collapse  @change="handleCollapseChange" v-model="activeNames" >
+      <el-collapse-item  name="line">
         <div slot="title" class="collapse-item">
           线
         </div>
@@ -16,13 +16,20 @@
             </el-option>
           </el-select>
         </div>
-        <div class="element-config">
+        <div class="element-config" v-if="dataSet.type!='radar'">
           平滑曲线
           <el-switch
             v-model="chartSettingsSeries.smooth"
             active-color="#13ce66">
           </el-switch>
         </div>
+        <div class="element-config" v-else>
+          填充面积
+          <el-switch
+            v-model="chartSettingsSeries.showAreaStyle"
+            active-color="#13ce66">
+          </el-switch>
+        </div>
       </el-collapse-item>
     </el-collapse>
   </div>
@@ -32,8 +39,19 @@
     import { mapState } from 'vuex';
     export default {
       name: "chartLine",
+      methods:{
+        handleCollapseChange(activeNames) {
+          if (activeNames.includes("line")) {
+            // 如果要禁止面板2收起，再次将面板2加入activeNames数组
+            this.activeNames.push("line");
+          } else {
+            // 允许其他面板正常操作
+            this.activeNames = activeNames;
+          }
+        },
+      },
       computed: {
-        ...mapState('charts',['chartSettingsSeries'])
+        ...mapState('charts',['chartSettingsSeries','dataSet'])
       },
       data() {
         return {

web/src/views/chartcustomization/chartConfig/chartPoint.vue

@@ -4,9 +4,9 @@
       <el-collapse-item name="point">
         <div slot="title" class="collapse-item" >
           点
-          <el-switch v-if="dataSet.type=='line'" ref="switch"
+          <el-switch v-show="dataSet.type=='line'||dataSet.type=='area'" ref="switch"
             v-model="chartSettingsSeries.showPoint"
-            style="pointer-events: none;"
+                     style="pointer-events: none;"
             active-color="#13ce66"
            >
           </el-switch>
@@ -69,7 +69,7 @@
           //   }
         },
         'activeNames':function (newVal,oldVal) {
-          console.log(this.activeNames)
+          // console.log(this.activeNames)
           if(this.activeNames.length>0){
             this.chartSettingsSeries.showPoint=true
           }else {
@@ -80,7 +80,7 @@
         'chartSettingsSeries':{
           deep: true,
           handler: function (newVal,oldVal) {
-            console.log(this.chartSettingsSeries.showPoint)
+            // console.log(this.chartSettingsSeries.showPoint)
             if(this.chartSettingsSeries.showPoint==true){
               this.activeNames=["point"]
             }else {

web/src/views/chartcustomization/chartdataset.vue

@@ -185,12 +185,12 @@
     cursor: pointer;
     color: #2c3e50;
     font-weight: bold;
-    font-size: 14px;
+    font-size: 16px;
     border-bottom: 1px solid #eef1f5;
   }
   .data-item{
     padding: 0 20px;
-    font-size: 12px;
+    font-size: 14px;
     cursor: move;
     color: #6a6f77;
     line-height: 30px;

web/src/views/chartcustomization/chartedit.vue

@@ -7,8 +7,6 @@
               <el-tab-pane label="图表配置" name="1">
                 <datacleaning></datacleaning>
                 <changechartstype></changechartstype>
-              </el-tab-pane>
-              <el-tab-pane label="元素配置" name="2">
                 <chart-title></chart-title>
                 <chart-legend></chart-legend>
                 <template v-if="dataSet.type =='line' || dataSet.type=='area'">
@@ -30,7 +28,35 @@
                   <chart-point></chart-point>
                   <chart-data-zoom></chart-data-zoom>
                 </template>
+                <template v-else-if="dataSet.type =='radar'">
+                  <chart-point></chart-point>
+                  <chart-line></chart-line>
+                </template>
+                <chart-label></chart-label>
               </el-tab-pane>
+<!--              <el-tab-pane label="元素配置" name="2">-->
+<!--                <chart-title></chart-title>-->
+<!--                <chart-legend></chart-legend>-->
+<!--                <template v-if="dataSet.type =='line' || dataSet.type=='area'">-->
+<!--                  <chart-x-axis></chart-x-axis>-->
+<!--                  <chart-y-axis></chart-y-axis>-->
+<!--                  <chart-point></chart-point>-->
+<!--                  <chart-line></chart-line>-->
+<!--                  <chart-data-zoom></chart-data-zoom>-->
+<!--                </template>-->
+<!--                <template v-else-if="dataSet.type =='histogram_01' || dataSet.type=='histogram_02'">-->
+<!--                  <chart-x-axis></chart-x-axis>-->
+<!--                  <chart-y-axis></chart-y-axis>-->
+<!--                  <chart-bar-config></chart-bar-config>-->
+<!--                  <chart-data-zoom></chart-data-zoom>-->
+<!--                </template>-->
+<!--                <template v-else-if="dataSet.type =='scatterplot'">-->
+<!--                  <chart-x-axis></chart-x-axis>-->
+<!--                  <chart-y-axis></chart-y-axis>-->
+<!--                  <chart-point></chart-point>-->
+<!--                  <chart-data-zoom></chart-data-zoom>-->
+<!--                </template>-->
+<!--              </el-tab-pane>-->
 
             </el-tabs>
 
@@ -71,9 +97,11 @@
     import Datacleaning from "./showConfig/datacleaning";
     import Changechartstype from "./showConfig/changechartstype";
     import ChartBarConfig from "./chartConfig/chartBarConfig";
+    import ChartLabel from "./chartConfig/chartLabel";
     export default {
       name: "chartedit",
       components: {
+        ChartLabel,
         ChartBarConfig,
         Changechartstype,
         Datacleaning, ChartLine, ChartPoint, ChartYAxis, ChartXAxis, ChartLegend, ChartTitle, ChartDataZoom},

web/src/views/chartcustomization/showConfig/changechartstype.vue

@@ -33,18 +33,22 @@
           list:[
             {
               name:"line",
-            },
-            {
+            }, {
               name:"histogram_01",
-            },
-            {
+            }, {
               name:"histogram_02",
-            },
-            {
+            }, {
               name:"scatterplot",
-            },
-            {
+            }, {
               name:"area",
+            },{
+              name:"radar",
+            },{
+              name:'pie'
+            },{
+              name:'doughnut'
+            },{
+              name:'rose'
             }
           ]
         }