瀏覽代碼

图表分析给图默认添加名称

zhuliu 1 年之前
父節點
當前提交
4277d8c4aa

+ 28 - 0
src/store/modules/chart.js

@@ -37,6 +37,34 @@ export default {
       state.reloadData = reloadData
     },
     SET_CHART_FORM: (state, form) => {
+      if(!form.setting.text){
+        form.setting.text={
+          text:'',
+          show: true,
+          link:'',
+          target: 'blank',
+          subtext: '',
+          sublink:'',
+          subtarget: 'blank',
+          left: 'center',
+          bottom: 0,
+          backgroundColor: 'rgba(0,0,0,0)',
+          borderColor: "#ccc",
+          borderWidth: 0,
+          padding: 5,
+          itemGap: 10,
+          textStyle:{
+            fontSize: 14,
+            fontWeight: false,
+            color: '#464646',
+          },
+          subtextStyle:{
+            fontSize: 14,
+            fontWeight: false,
+            color: '#464646',
+          }
+        }
+      }
       state.form = form
     },
     SET_CHART_TREE: (state, treeList) => {

+ 44 - 0
src/views/analyse/custom/components/Tabs/Style.vue

@@ -101,6 +101,50 @@
           </div>
         </div>
       </el-collapse-item>
+      <el-collapse-item title="名称" name="10" v-if="!getShow([30, 19])">
+          <div class="content">
+            <el-checkbox v-model="form.setting.text.show">显示名称</el-checkbox>
+              <div style="display:flex;margin-top: 10px;">
+                <span class="label" style="width:80px">主标题名称</span><el-input size="small" v-model="form.setting.text.text" placeholder="请输入" style="margin-left: 10px;"></el-input>
+              </div>
+              <div style="display:flex;margin-top: 10px;">
+                <span class="label" style="width:80px">主标题链接</span><el-input size="small" v-model="form.setting.text.link" placeholder="请输入" style="margin-left: 10px;"></el-input>
+              </div>
+              <div style="margin-top: 10px;">
+              <el-select size="small" v-model="form.setting.text.textStyle.fontFamily" placeholder="请选择" style="width: calc(100% - 160px)">
+                <el-option v-for="item in $constants.fontFamily" :label="item.label" :value="item.value"></el-option>
+              </el-select>
+              <el-input size="small" v-model.number="form.setting.text.textStyle.fontSize" type="number" placeholder="请输入" style="width: 105px;margin-left: 10px;"></el-input>
+              <el-color-picker size="small" v-model="form.setting.text.textStyle.color" style="margin-left: 10px; float:right;"></el-color-picker>
+            </div>
+            <div style="margin-top: 10px;">
+              <el-checkbox v-model="form.setting.text.textStyle.fontWeight">字体加粗</el-checkbox>
+            </div>
+              <div style="margin-top: 10px;" class="title-padding">
+                <span class="label">位置</span>
+                <span class="label" style="margin: 0 5px;">垂直</span>
+                <el-input v-model.number="form.setting.text.bottom" size="small" placeholder="" style="width: 100px;"></el-input>
+                <span class="label" style="margin: 0 5px;">水平</span>
+                <el-input v-model.number="form.setting.text.left" size="small" placeholder="" style="width: 100px;"></el-input>
+            </div>
+            <div style="display:flex;margin-top: 10px;">
+                <span class="label" style="width:80px">副标题名称</span><el-input size="small" v-model="form.setting.text.subtext" placeholder="请输入" style="margin-left: 10px;"></el-input>
+              </div>
+              <div style="display:flex;margin-top: 10px;">
+                <span class="label" style="width:80px">副标题链接</span><el-input size="small" v-model="form.setting.text.sublink" placeholder="请输入" style="margin-left: 10px;"></el-input>
+              </div>
+              <div style="margin-top: 10px;">
+              <el-select size="small" v-model="form.setting.text.subtextStyle.fontFamily" placeholder="请选择" style="width: calc(100% - 160px)">
+                <el-option v-for="item in $constants.fontFamily" :label="item.label" :value="item.value"></el-option>
+              </el-select>
+              <el-input size="small" v-model.number="form.setting.text.subtextStyle.fontSize" type="number" placeholder="请输入" style="width: 105px;margin-left: 10px;"></el-input>
+              <el-color-picker size="small" v-model="form.setting.text.subtextStyle.color" style="margin-left: 10px; float:right;"></el-color-picker>
+            </div>
+            <div style="margin-top: 10px;">
+              <el-checkbox v-model="form.setting.text.subtextStyle.fontWeight">字体加粗</el-checkbox>
+            </div>
+          </div>
+        </el-collapse-item>
       <el-collapse-item title="颜色" name="2" v-if="!getShow([20, 18, 21, 23])">
         <div class="content">
           <el-container>

+ 8 - 3
src/views/analyse/custom/index.vue

@@ -308,7 +308,8 @@ export default {
         data = response.data
       }else{
         data ={
-          ...this.ruleForm
+          ...this.ruleForm,
+          name:this.form.setting.text?.text
         }
         if(data.parentId){
           this.ruleForm.parentId = null
@@ -523,8 +524,12 @@ export default {
             dimensions = ['x','y']
         }else{
             sign = false
-            dimensions = ['x']
-            
+            dimensions = ['x'] 
+        }
+        if(sign){
+          this.form.setting.text.text = this.form.setting.title1 + '-' + this.form.setting.title2 +'统计分析图'
+        }else{
+          this.form.setting.text.text = this.form.setting.title1 +'统计分析图'
         }
         if (!this.form.setting.type) {
             if(sign){

+ 7 - 0
src/views/analyse/custom/mixins.js

@@ -495,6 +495,13 @@ export const chartOption = {
       const chartDom = document.getElementById(id);
       const myChart = this.$echarts.init(chartDom);
       chartOption.backgroundColor = this.form.setting.backgroundColor
+      if(this.form.setting.text){
+        let title = JSON.parse(JSON.stringify(this.form.setting.text))
+        title.textStyle.fontWeight = this.form.setting.text.textStyle.fontWeight?'bold':'normal'
+        title.subtextStyle.fontWeight = this.form.setting.text.subtextStyle.fontWeight?'bold':'normal'
+        chartOption.title = title
+      }
+      
       myChart.setOption(chartOption)
       // this.$store.commit('SET_MY_CHART', myChart)
       return myChart