规则，柱状图

src/components/FinancialModule/DataAnalysis/allEchart.vue

@@ -39,7 +39,7 @@
           </el-col>
           <el-col :span="4">
             <el-form-item label="线路">
-              <el-select filterable v-model="msg.LineId" @change="getStatement"
+              <el-select filterable multiple v-model="msg.LineIdList" @change="getStatement"
               clearable>
                 <el-option
                   :value="0"
@@ -116,6 +116,8 @@
       <WoolRateChange :msgData="msg" :StatisticalData="StatisticalData"></WoolRateChange>
       <ActualRateChange :msgData="msg" :StatisticalData="StatisticalData"></ActualRateChange>
       <ChangeProportion :msgData="msg" :StatisticalData="StatisticalData"></ChangeProportion>
+      <WoolRateColumnar :msgData="msg" :StatisticalData="StatisticalData"></WoolRateColumnar>
+      <ActualRateColumnar :msgData="msg" :StatisticalData="StatisticalData"></ActualRateColumnar>
     </div>
   </div>
 </template>
@@ -126,8 +128,11 @@ import IncomeShare from "./components/Echart/IncomeShare.vue";
 import WoolRateChange from "./components/Echart/WoolRateChange.vue";
 import ActualRateChange from "./components/Echart/ActualRateChange.vue";
 import ChangeProportion from "./components/Echart/ChangeProportion.vue";
+import WoolRateColumnar from "./components/Echart/WoolRateColumnar.vue";
+import ActualRateColumnar from "./components/Echart/ActualRateColumnar.vue";
 export default {
-  components: {IncomeChange,IncomeShare,WoolRateChange,ActualRateChange,ChangeProportion},
+  components: {IncomeChange,IncomeShare,WoolRateChange,ActualRateChange,ChangeProportion,
+    WoolRateColumnar,ActualRateColumnar},
   data() {
     return {
       coinGetShow: false,
@@ -142,7 +147,9 @@ export default {
         Type: '0',
         DataType:'-1',
         LossType:'0',
-        IsLastData :1
+        IsLastData:1,
+        LineIdList: [],
+        LineIdStr: ''
       },
       dateTime: [],
       CompanyList: [],
@@ -220,6 +227,12 @@ export default {
       })
     },
     getStatement(){
+      if(this.msg.LineIdList[this.msg.LineIdList.length-1]==0){
+        this.msg.LineIdList = [0]
+      }else{
+        this.msg.LineIdList = this.msg.LineIdList.filter(x=>{return x})
+      }
+      this.msg.LineIdStr = this.msg.LineIdList.join(',')
       this.loading = true
       this.apipost(
         "financestatistics_post_GetDataAnalysisStat",
@@ -298,10 +311,13 @@ export default {
 }
 .echartsBox{
   flex: 1;
-  min-width: 458px;
+  min-width: 430px;
   margin: 5px;
   background: #fff;
 }
+.echartsBox:nth-child(2){
+ min-width: 458px;
+}
 .allMyEchartBox{
   height: 270px;
 }

src/components/FinancialModule/DataAnalysis/components/Echart/ActualRateChange.vue

 <template>
   <div class="echartsBox">
     <div class="titleBox row">
-      <h3>月度实际利率变化趋势图 %</h3>
+      <h3>月度实际利率变化趋势图 %(线图)</h3>
       <div style="margin-left: 20px;">
 
 

src/components/FinancialModule/DataAnalysis/components/Echart/ActualRateColumnar.vue

+<template>
+  <div class="echartsBox">
+    <div class="titleBox row">
+      <h3>月度实际利率变化趋势图 %(柱状图)</h3>
+      <div style="margin-left: 20px;">
+
+
+      </div>
+    </div>
+    <div style="background: #fff;">
+      <div id="ActualMyEchartC" class="allMyEchartBox" ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props:['msg','StatisticalData'],
+  data() {
+    return {
+      MonthList: [],//月份列表
+      LineAnalysisData: [],//各线路统计
+      CostAnalysisData: [],//各成本统计
+      colorList:['#089bab','#FFA171','#72b8ff','#ff9cc6','#7b78ff','#28cc90','#ee8fff','#5cf2ff','#ff9a00','#4fc4f7','#738eff','#b0edff',
+      'rgba(228,57,57,.9)','rgba(248,126,46,1)','rgba(252,196,34,.7)','#3DD948','#39CAE4','rgba(44,49,241,.6)','rgba(122,57,228,.5)','#E65FC1','#D0B478','#BABABA',
+      'rgba(228,57,57,.7)','rgba(247,154,44,.7)','rgba(255,246,11,.7)','rgba(61,217,72,.7)','rgba(57,202,228,.7)','rgba(44,49,241,.7)','rgba(122,57,228,.7)'],
+    }
+  },
+  created() {
+    window.addEventListener('resize', this.handleResize);
+  },
+  destroyed() {
+    window.removeEventListener('resize', this.handleResize);
+  },
+  watch: {
+    StatisticalData:{
+      handler(n,o){
+        this.MonthList = n.MonthList//月份列表
+        this.LineAnalysisData = n.LineAnalysisData//各线路统计
+        this.CostAnalysisData = n.CostAnalysisData//各成本统计
+
+        this.getEchart()
+      },
+      deep: true,
+      immediate: false,
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    handleResize() {
+
+      location.reload()
+    },
+    getEchart(){
+      let datas = []
+      let titles = []
+      let Stocklegend = {}
+      let Newobj = {}
+      this.LineAnalysisData.forEach((x,indexs)=>{
+        let Name = `${x.Name}`
+        titles.push(Name)
+        let obj = {
+          name: Name,
+          type: 'bar',
+          itemStyle:{
+            barBorderRadius: 5,
+          },
+          barWidth: 5,
+          data: x.DetailList.map(y=>{return y.ProfitRate.toFixed(2)})	// 绑定实时数据数组
+        }
+        datas.push(obj)
+        if(indexs>10){
+          let name=x.Name;
+          Newobj[name]=false;
+        }
+        Stocklegend=Newobj;
+      })
+      let chartDom = document.getElementById('ActualMyEchartC','light');
+      let myChart = this.$echarts.init(chartDom);
+      let option
+      option = {
+        color:this.colorList,
+        legend: {
+          x:'left',
+          y:'bottom',
+          type:'scroll',
+          icon: "circle",
+          padding:  [5, 30, 20, 30] ,
+          data: titles,
+          selected: Stocklegend
+        },
+        grid: {
+            left: 15, // 默认10%，给24就挺合适的。
+            top: 30, // 默认60
+            right: 45, // 默认10%
+            bottom: 70, // 默认60
+            containLabel: true
+          },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          nameTextStyle: {
+            fontWeight: 600,
+            fontSize: 18
+          },
+          axisLine: {
+            lineStyle: {
+              // 设置x轴颜色
+              color: "transparent"
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: "#333333"
+            }
+          },
+          data: this.MonthList
+        },
+        yAxis : [
+            {
+              type : 'value',
+              axisLine: {
+                lineStyle: {
+                  // 设置x轴颜色
+                  color: "transparent",
+                  width: 1,
+                }
+              },
+              axisLabel: {
+                textStyle: {
+                  color: "#969696"
+                }
+              },
+              splitLine:{
+              show:true,
+                lineStyle:{
+                    // type:'dashed'
+                    color:'#EEEEEE',
+                  }
+              }
+            }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            lineStyle: {
+              type: 'dashed',
+              color: "#ddd"
+            }
+          }
+        },
+        dataZoom: [
+          {
+            type: 'inside'
+          }
+        ],
+        series:datas
+      }
+
+      myChart.setOption(option,true)
+    },
+
+  }
+}
+</script>
+
+<style>
+
+</style>

src/components/FinancialModule/DataAnalysis/components/Echart/WoolRateChange.vue

 <template>
   <div class="echartsBox">
     <div class="titleBox row">
-      <h3>月度毛利率变化趋势图 %</h3>
+      <h3>月度毛利率变化趋势图 %(线图)</h3>
       <div style="margin-left: 20px;">
 
 

src/components/FinancialModule/DataAnalysis/components/Echart/WoolRateColumnar.vue

+<template>
+  <div class="echartsBox">
+    <div class="titleBox row">
+      <h3>月度毛利率变化趋势图 %(柱状图)</h3>
+      <div style="margin-left: 20px;">
+
+
+      </div>
+    </div>
+    <div style="background: #fff;">
+      <div id="WoolMyEchartC" class="allMyEchartBox" ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props:['msg','StatisticalData'],
+  data() {
+    return {
+      MonthList: [],//月份列表
+      LineAnalysisData: [],//各线路统计
+      CostAnalysisData: [],//各成本统计
+      colorList:['#089bab','#FFA171','#72b8ff','#ff9cc6','#7b78ff','#28cc90','#ee8fff','#5cf2ff','#ff9a00','#4fc4f7','#738eff','#b0edff',
+      'rgba(228,57,57,.9)','rgba(248,126,46,1)','rgba(252,196,34,.7)','#3DD948','#39CAE4','rgba(44,49,241,.6)','rgba(122,57,228,.5)','#E65FC1','#D0B478','#BABABA',
+      'rgba(228,57,57,.7)','rgba(247,154,44,.7)','rgba(255,246,11,.7)','rgba(61,217,72,.7)','rgba(57,202,228,.7)','rgba(44,49,241,.7)','rgba(122,57,228,.7)'],
+    }
+  },
+  created() {
+    window.addEventListener('resize', this.handleResize);
+  },
+  destroyed() {
+    window.removeEventListener('resize', this.handleResize);
+  },
+  watch: {
+    StatisticalData:{
+      handler(n,o){
+        this.MonthList = n.MonthList//月份列表
+        this.LineAnalysisData = n.LineAnalysisData//各线路统计
+        this.CostAnalysisData = n.CostAnalysisData//各成本统计
+
+        this.getEchart()
+      },
+      deep: true,
+      immediate: false,
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    handleResize() {
+
+      location.reload()
+    },
+    getEchart(){
+      let datas = []
+      let titles = []
+      let Stocklegend = {}
+      let Newobj = {}
+      this.LineAnalysisData.forEach((x,indexs)=>{
+        let Name = `${x.Name}`
+        titles.push(Name)
+        let obj = {
+          name: Name,
+          type: 'bar',
+          itemStyle:{
+            barBorderRadius: 5,
+          },
+          barWidth: 5,
+          data: x.DetailList.map(y=>{return y.MaoLiRate.toFixed(2)})	// 绑定实时数据数组
+        }
+        datas.push(obj)
+        if(indexs>10){
+          let name=x.Name;
+          Newobj[name]=false;
+        }
+        Stocklegend=Newobj;
+      })
+      let chartDom = document.getElementById('WoolMyEchartC','light');
+      let myChart = this.$echarts.init(chartDom);
+      let option
+      option = {
+        color:this.colorList,
+        legend: {
+          x:'left',
+          y:'bottom',
+          type:'scroll',
+          icon: "circle",
+          padding:  [5, 30, 20, 30] ,
+          data: titles,
+          selected: Stocklegend
+        },
+        grid: {
+            left: 15, // 默认10%，给24就挺合适的。
+            top: 30, // 默认60
+            right: 45, // 默认10%
+            bottom: 70, // 默认60
+            containLabel: true
+          },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          nameTextStyle: {
+            fontWeight: 600,
+            fontSize: 18
+          },
+          axisLine: {
+            lineStyle: {
+              // 设置x轴颜色
+              color: "transparent"
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: "#333333"
+            }
+          },
+          data: this.MonthList
+        },
+        yAxis : [
+            {
+              type : 'value',
+              axisLine: {
+                lineStyle: {
+                  // 设置x轴颜色
+                  color: "transparent",
+                  width: 1,
+                }
+              },
+              axisLabel: {
+                textStyle: {
+                  color: "#969696"
+                }
+              },
+              splitLine:{
+              show:true,
+                lineStyle:{
+                    // type:'dashed'
+                    color:'#EEEEEE',
+                  }
+              }
+            }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            lineStyle: {
+              type: 'dashed',
+              color: "#ddd"
+            }
+          }
+        },
+        dataZoom: [
+          {
+            type: 'inside'
+          }
+        ],
+        series:datas
+      }
+
+      myChart.setOption(option,true)
+    },
+
+  }
+}
+</script>
+
+<style>
+
+</style>

src/components/FinancialModule/DataAnalysis/components/lineEchart.vue

@@ -299,7 +299,7 @@ export default {
           itemStyle:{
             barBorderRadius: 5,
           },
-          barWidth : 10,
+          barWidth: 10,
           // stack: 'Total',
           data: [],
         }