no message

src/components/FinancialModule/DataAnalysis/allEchart.vue

 <template>
   <div style="height: 100%;">
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="线路经营情况" name="1"></el-tab-pane>
+      <el-tab-pane label="公司经营情况" name="2"></el-tab-pane>
+      <el-tab-pane label="日本小包OR常规" name="3"></el-tab-pane>
+    </el-tabs>
     <div class="query-box">
       <el-form class="_info_box clearfix" label-width="90px">
         <el-row style="padding: 15px 0px 0 0">
@@ -112,6 +117,7 @@
     </div>
     <!-- height: 78%;overflow: auto; -->
     <div v-loading="loading" style="height: 85%;overflow: auto; ">
+      <template v-if="activeName=='1'">
         <div style="display: flex;flex-direction: row;flex-wrap: wrap;">
           <IncomeChange :msgData="msg" :StatisticalData="StatisticalData"></IncomeChange>
           <IncomeShare :msgData="msg" :StatisticalData="StatisticalData"></IncomeShare>
@@ -125,27 +131,62 @@
           <WoolRateChange :msgData="msg" :StatisticalData="StatisticalData"></WoolRateChange>
           <ActualRateChange :msgData="msg" :StatisticalData="StatisticalData"></ActualRateChange>
         </div>
+      </template>
+
+      <template v-if="activeName=='2'">
+        <div style="display: flex;flex-direction: row;flex-wrap: wrap;">
+          <twoIncomeChange :msgData="msg" :StatisticalData="StatisticalData"></twoIncomeChange>
+          <twoIncomeShare :msgData="msg" :StatisticalData="StatisticalData"></twoIncomeShare>
+          <!-- <twoChangeProportion :msgData="msg" :StatisticalData="StatisticalData"></twoChangeProportion> -->
+        </div>
+        <div style="display: flex;flex-direction: row;flex-wrap: wrap;">
+          <twoWoolRateColumnar :msgData="msg" :StatisticalData="StatisticalData"></twoWoolRateColumnar>
+          <!-- <twoActualRateColumnar :msgData="msg" :StatisticalData="StatisticalData"></twoActualRateColumnar> -->
+        </div>
+        <div style="display: flex;flex-direction: row;flex-wrap: wrap;">
+          <!-- <twoWoolRateChange :msgData="msg" :StatisticalData="StatisticalData"></twoWoolRateChange> -->
+          <!-- <twoActualRateChange :msgData="msg" :StatisticalData="StatisticalData"></twoActualRateChange> -->
+        </div>
+      </template>
+
     </div>
 
   </div>
 </template>
 
 <script>
-import IncomeChange from "./components/Echart/IncomeChange.vue";
-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";
+import IncomeChange from "./components/oneEchart/IncomeChange.vue";
+import IncomeShare from "./components/oneEchart/IncomeShare.vue";
+import WoolRateChange from "./components/oneEchart/WoolRateChange.vue";
+import ActualRateChange from "./components/oneEchart/ActualRateChange.vue";
+import ChangeProportion from "./components/oneEchart/ChangeProportion.vue";
+import WoolRateColumnar from "./components/oneEchart/WoolRateColumnar.vue";
+import ActualRateColumnar from "./components/oneEchart/ActualRateColumnar.vue";
+
+import twoIncomeChange from "./components/twoEchart/IncomeChange.vue";
+import twoIncomeShare from "./components/twoEchart/IncomeShare.vue";
+import twoWoolRateChange from "./components/twoEchart/WoolRateChange.vue";
+import twoActualRateChange from "./components/twoEchart/ActualRateChange.vue";
+import twoChangeProportion from "./components/twoEchart/ChangeProportion.vue";
+import twoWoolRateColumnar from "./components/twoEchart/WoolRateColumnar.vue";
+import twoActualRateColumnar from "./components/twoEchart/ActualRateColumnar.vue";
 export default {
-  components: {IncomeChange,IncomeShare,WoolRateChange,ActualRateChange,ChangeProportion,
-    WoolRateColumnar,ActualRateColumnar},
+  components: {
+    IncomeChange,IncomeShare,
+    WoolRateChange,ActualRateChange,
+    ChangeProportion,
+    WoolRateColumnar,ActualRateColumnar,
+
+    twoIncomeChange,twoIncomeShare,
+    twoWoolRateChange,twoActualRateChange,
+    twoChangeProportion,
+    twoWoolRateColumnar,twoActualRateColumnar,
+  },
   data() {
     return {
       coinGetShow: false,
       loading: false,
-      activeName: 1,
+      activeName: '1',
       msg:{
         startDate: '',
         endDate: '',
@@ -242,8 +283,10 @@ export default {
       }
       this.msg.LineIdStr = this.msg.LineIdList.join(',')
       this.loading = true
+      let url ='financestatistics_post_GetDataAnalysisStat'
+      // if(this.activeName=='2'){ url = ''}
       this.apipost(
-        "financestatistics_post_GetDataAnalysisStat",
+        url,
         this.msg,
         res => {
           if (res.data.resultCode == 1) {
@@ -260,7 +303,7 @@ export default {
     },
     handleClick(e){
       this.activeName = e._props.name
-      this.msg.Type = e._props.name
+      // this.msg.Type = e._props.name
       this.getStatement()
     },
     getDateTime(){

src/components/FinancialModule/DataAnalysis/components/corporation.vue

 <template>
   <div style="margin-bottom: 20px; ">
+    <div style="display: flex;align-items: center;">
       <h3 class="text-center" style="margin-bottom: 5px;">公司统计</h3>
+      <div class="corporatioBox">
+        <div>
+          <span>收入:</span>
+          <span></span>
+        </div>
+        <div>
+          <span>毛利:</span>
+          <span></span>
+        </div>
+        <div>
+          <span>营业利润:</span>
+          <span></span>
+        </div>
+        <div>
+          <span>净利润:</span>
+          <span></span>
+        </div>
+      </div>
+    </div>
+
     <el-table
     :data="BranchAnalysisData"
     style="width: 100%;"
@@ -174,4 +195,25 @@ export default {
   line-height: 20px;
   padding: 5px 0;
 }
+.corporatioBox{
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 10px;
+  margin-left: 15px;
+}
+.corporatioBox div{
+  /* display: flex;
+  flex-direction: column; */
+  background: #fff;
+  padding: 5px 10px;
+  margin-right: 10px;
+}
+.corporatioBox div span:first-child{
+  text-align: left;
+  font-size: 14px;
+}
+.corporatioBox div span:last-child{
+  color: red;
+  margin-left: 10px;
+}
 </style>

src/components/FinancialModule/DataAnalysis/components/oneEchart/IncomeShare copy.vue

+<template>
+  <div class="echartsBox">
+    <div class="titleBox" style="position: relative;">
+      <h3>月度收入占比 %</h3>
+      <div style="margin-left: 20px;position: absolute;top: 5px;left: 140px;">
+        <el-select v-model="CurrentMonth" @change="getEchart"
+        style="width: 120px;" size="small">
+          <el-option
+            v-for="item in MonthList"
+            :label="item"
+            :value="item"
+            :key="item"
+          ></el-option>
+        </el-select>
+
+      </div>
+    </div>
+    <div style="background: #fff;">
+      <div id="ShareMyEchart" class="allMyEchartBox" style="width: 500px;height: 300px;"></div>
+    </div>
+  </div>
+</template>
+
+<script src="https://cdn.bootcdn.net/ajax/libs/echarts-gl/2.0.4/echarts-gl.min.js"></script>
+<script>
+
+export default {
+  props:['msgData','StatisticalData'],
+  data() {
+    return {
+      MonthList: [],//月份列表
+      LineAnalysisDataHZ: [],//各线路统计
+      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)'],
+      CurrentMonth: null
+    }
+  },
+  created() {
+    window.addEventListener('resize', this.handleResize);
+  },
+  destroyed() {
+    window.removeEventListener('resize', this.handleResize);
+  },
+  watch: {
+    StatisticalData:{
+      handler(n,o){
+        this.MonthList = n.MonthList//月份列表
+        this.LineAnalysisDataHZ = n.LineAnalysisDataHZ//各线路统计
+        this.CostAnalysisData = n.CostAnalysisData//各成本统计
+        this.CurrentMonth = this.MonthList[this.MonthList.length-1]
+        // this.getEchart()
+        // this.initChartR2()
+      },
+      deep: true,
+      immediate: false,
+    }
+  },
+  mounted() {
+    this.initChartR2()
+  },
+  methods: {
+    handleResize() {
+
+      location.reload()
+    },
+    getEchart(){
+      // return
+      let datas = [{
+        name: this.CurrentMonth,
+        type: 'pie',
+        radius: '50%',
+        data: [], // 绑定实时数据数组
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 5,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        }
+      }]
+      let titles = []
+      let Stocklegend = {}
+      let Newobj = {}
+      this.LineAnalysisDataHZ.forEach((x,indexs)=>{
+
+        let Name = `${x.Name}`
+        if(Name!='合计'){
+          titles.push(Name)
+
+          let newDetailList = []
+          x.DetailList.forEach(y=>{
+            if(y.Month==this.CurrentMonth) {
+              newDetailList.push(y)
+            }
+          })
+          if(newDetailList.length>0){
+            newDetailList.forEach((y,index)=>{
+              datas[0].data.push({
+                value: y.IncomeRate,
+                name: x.Name,
+              })
+
+            })
+          }
+
+
+          // if(indexs>3){
+          //   let name=x.Name;
+          //   Newobj[name]=false;
+          // }
+          // Stocklegend=Newobj;
+        }
+
+      })
+      let chartDom = document.getElementById('ShareMyEchart');
+      let myChart = this.$echarts.init(chartDom);
+      let option
+      option = {
+        color:this.colorList,
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          bottom:'bottom',
+          left: 'left',
+          type:'scroll',
+          icon: "circle",
+          padding:  [25, 20, 20, 20] ,
+          selected: Stocklegend
+        },
+        series: datas
+      }
+
+      myChart.setOption(option,true)
+    },
+    initChartR2() {
+      let chartDom = document.getElementById('ShareMyEchart');
+      let myChart = this.$echarts.init(chartDom);
+      function getParametricEquation(
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        height
+      ) {
+        // 计算
+        const midRatio = (startRatio + endRatio) / 2
+
+        const startRadian = startRatio * Math.PI * 2
+        const endRadian = endRatio * Math.PI * 2
+        const midRadian = midRatio * Math.PI * 2
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          isSelected = false
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        k = typeof k !== 'undefined' ? k : 1 / 3
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
+        const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        const hoverRate = isHovered ? 1.05 : 1
+
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20
+          },
+
+          x: function(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              )
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              )
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
+          },
+
+          y: function(u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              )
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              )
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
+          },
+
+          z: function(u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u)
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u)
+            }
+            return Math.sin(v) > 0 ? 1 * height : -1
+          }
+        }
+      }
+      // 生成模拟 3D 饼图的配置项
+      function getPie3D(pieData, internalDiameterRatio) {
+        const series = []
+        let sumValue = 0
+        let startValue = 0
+        let endValue = 0
+        const legendData = []
+        const k =
+          typeof internalDiameterRatio !== 'undefined'
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i++) {
+          sumValue += pieData[i].value
+
+          const seriesItem = {
+            name:
+              typeof pieData[i].name === 'undefined'
+                ? `series${i}`
+                : pieData[i].name,
+            type: 'surface',
+            parametric: true,
+            wireframe: {
+              show: false
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k: k
+            }
+          }
+
+          if (typeof pieData[i].itemStyle !== 'undefined') {
+            const itemStyle = {}
+
+            typeof pieData[i].itemStyle.color !== 'undefined'
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null
+            typeof pieData[i].itemStyle.opacity !== 'undefined'
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null
+
+            seriesItem.itemStyle = itemStyle
+          }
+          series.push(seriesItem)
+        }
+
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i++) {
+          endValue = startValue + series[i].pieData.value
+          series[i].pieData.startRatio = startValue / sumValue
+          series[i].pieData.endRatio = endValue / sumValue
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            2000
+          )
+
+          startValue = endValue
+
+          legendData.push(series[i].name)
+        }
+        return series
+      }
+      // 传入数据生成 option
+      const optionsData = [
+        {
+          name: '国际货代',
+          value: 13.87,
+          itemStyle: {
+            opacity: 0.5,
+            color: '#7bc35a'
+          }
+        },
+        {
+          name: '租赁业务',
+          value: 0.6,
+          itemStyle: {
+            opacity: 0.5,
+            color: '#2f97df'
+          }
+        },
+        {
+          name: '仓储装卸',
+          value: 9.53,
+          itemStyle: {
+            opacity: 0.5,
+            color: '#4268d6'
+          }
+        },
+        {
+          name: '干线运输',
+          value: 72.17,
+          itemStyle: {
+            opacity: 0.5,
+            color: '#d35e5f'
+          }
+        },
+        {
+          name: '配送业务',
+          value: 3.67,
+          itemStyle: {
+            opacity: 0.5,
+            color: '#c2c763'
+          }
+        },
+        {
+          name: '其他业务',
+          value: 0.17,
+          itemStyle: {
+            opacity: 0.5,
+            color: '#8fdffe'
+          }
+        }
+      ]
+      const series = getPie3D(optionsData.map(item => {
+        if (item.value < 5) {
+          item.value = 5
+        }
+        return item
+      }), 0, 240, 28, 26, 0.5)
+      series.push({
+        name: 'pie2d',
+        type: 'pie',
+        label: {
+          opacity: 1,
+          position: 'outside',
+          fontSize: 12,
+          lineHeight: 20,
+          textStyle: {
+            fontSize: 12,
+            color: '#fff'
+          }
+        },
+        labelLine: {
+          length: 30,
+          length2: 30
+        },
+        minAngle: 10,
+        startAngle: -50, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ['0', '25%'],
+        center: ['50%', '50%'],
+        data: optionsData.map(item => {
+          item.itemStyle.opacity = 0
+          return item
+        })
+      })
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      const option = {
+        legend: {
+          show: false
+        },
+        animation: true,
+        tooltip: {
+          formatter: (params) => {
+            if (
+              params.seriesName !== 'mouseoutSeries' &&
+              params.seriesName !== 'pie2d'
+            ) {
+              return `${
+                params.seriesName
+              }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                params.color
+              };"></span>${
+                option.series[params.seriesIndex].pieData.value + '%'
+              }`
+            }
+          },
+          textStyle: {
+            fontSize: 14
+          }
+        },
+        title: {
+          x: 'center',
+          top: '20',
+          textStyle: {
+            color: '#fff',
+            fontSize: 22
+          }
+        },
+        // backgroundColor: '#0E3567',
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: '#7BC0CB'
+          },
+          normal: {
+            show: true,
+            length: 10,
+            length2: 10
+          }
+        },
+        label: {
+          show: true,
+          position: 'outside',
+          formatter: '{b} \n{d}%',
+          textStyle: {
+            color: '#fff',
+            fontSize: '12px'
+          }
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 0.01,
+          // top: '30%',
+          bottom: '50%',
+          // environment: "rgba(255,255,255,0)",
+          viewControl: {
+            distance: 300,
+            alpha: 35,
+            beta: 60,
+            autoRotate: false // 自动旋转
+          }
+        },
+        series: series
+      }
+      myChart.setOption(option)
+    }
+
+  }
+}
+</script>
+
+<style>
+
+</style>

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

+<template>
+  <div class="echartsBox">
+    <div class="titleBox row">
+      <h3>月度实际利润变化趋势图(折线图)</h3>
+      <div style="margin-left: 20px;">
+
+
+      </div>
+    </div>
+    <div style="background: #fff;">
+      <div id="ActualMyEchart" 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: 'line',
+          showSymbol: true,
+          smooth: true,
+          symbolSize: 5,
+          label: {
+              show: true,
+              position: 'top', // 在顶部显示
+              formatter: '{c}w' // 格式化金额，{c} 代表数据值
+          },
+          data: x.DetailList.map(y=>{return (y.Profit/10000).toFixed(2)})	// 绑定实时数据数组
+        }
+        datas.push(obj)
+        if(indexs>10){
+          let name=x.Name;
+          Newobj[name]=false;
+        }
+        Stocklegend=Newobj;
+      })
+      let chartDom = document.getElementById('ActualMyEchart','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"
+                },
+                formatter: '{value}w',
+                margin: 20 // 标签距离y轴的距离为20
+              },
+              splitLine:{
+              show:true,
+                lineStyle:{
+                    // type:'dashed'
+                    color:'#EEEEEE',
+                  }
+              }
+            }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            lineStyle: {
+              type: 'dashed',
+              color: "#ddd"
+            }
+          }
+        },
+        dataZoom: [
+          {
+            type: 'inside',
+            disabled: true
+          }
+        ],
+        series:datas
+      }
+
+      myChart.setOption(option,true)
+    },
+
+  }
+}
+</script>
+
+<style>
+
+</style>

src/components/FinancialModule/DataAnalysis/components/twoEchart/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',
+          label: {
+              show: true,
+              position: 'top', // 在顶部显示
+              formatter: '{c}w' // 格式化金额，{c} 代表数据值
+          },
+          itemStyle:{
+            barBorderRadius: 5,
+          },
+          barWidth: 30,
+          data: x.DetailList.map(y=>{return (y.Profit/10000).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"
+                },
+                formatter: '{value}w',
+                margin: 50 // 标签距离y轴的距离为20
+              },
+              splitLine:{
+              show:true,
+                lineStyle:{
+                    // type:'dashed'
+                    color:'#EEEEEE',
+                  }
+              }
+            }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            lineStyle: {
+              type: 'dashed',
+              color: "#ddd"
+            }
+          }
+        },
+        dataZoom: [
+          {
+            type: 'inside',
+            disabled: true
+          }
+        ],
+        series:datas
+      }
+
+      myChart.setOption(option,true)
+    },
+
+  }
+}
+</script>
+
+<style>
+
+</style>

src/components/FinancialModule/DataAnalysis/components/twoEchart/ChangeProportion.vue

+<template>
+  <div class="echartsBox">
+    <div class="titleBox text-center row">
+      <h3>各费用项变化趋势图</h3>
+      <div style="margin-left: 20px;">
+
+
+      </div>
+    </div>
+    <div style="background: #fff;">
+      <div id="PropMyEchart" class="allMyEchartBox"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props:['msg','StatisticalData'],
+  data() {
+    return {
+      MonthList: [],//月份列表
+      JapanAllData: [],
+      JapanXBData: [],
+      JapanSPData: [],
+      MaoLiAnalysisData: [],
+      SJLLAnalysisData: [],
+      RoomAnalysisData: [],
+      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)'],
+      CostDataObj: {
+        name: '',
+        type:'line',
+        showSymbol: true,
+        smooth: true,
+        symbolSize: 1,
+        data: [],
+      },
+      CostDatas: [],
+      incomeTitles:[
+        {Name: '机票',value:'JiPiao',ID:2},
+        {Name: '房费',value:'RoomFee',ID:4},
+        {Name: '车费',value:'CarFee',ID:6},
+        {Name: '餐费',value:'MealFee',ID:8},
+        {Name: '门票',value:'TicketFee',ID:10},
+        {Name: '签证',value:'VisaFee',ID:12},
+      ],
+    }
+  },
+  created() {
+    window.addEventListener('resize', this.handleResize);
+  },
+  destroyed() {
+    window.removeEventListener('resize', this.handleResize);
+  },
+  watch: {
+    StatisticalData:{
+      handler(n,o){
+        this.MonthList = n.MonthList//月份列表
+        this.JapanAllData = n.JapanAllData
+        this.JapanXBData = n.JapanXBData
+        this.JapanSPData = n.JapanSPData
+        this.MaoLiAnalysisData = n.MaoLiAnalysisData
+        this.SJLLAnalysisData = n.SJLLAnalysisData
+        this.RoomAnalysisData = n.RoomAnalysisData
+        this.CostAnalysisData = n.CostAnalysisData
+        this.getEchart()
+      },
+      deep: true,
+      immediate: false,
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    handleResize() {
+
+      location.reload()
+    },
+    getEchart(){
+      this.inCostDatas()
+      let that = this
+      let titles = this.incomeTitles.map(x=>{return x.Name})
+      let datas = []
+      let Stocklegend = {}
+      let Newobj={};
+        for(let index=0;index<this.incomeTitles.length;index++){
+          for(let i=0;i<this.MonthList.length;i++){
+            let filter = this.CostAnalysisData.filter(z=>{return z.Month==this.MonthList[i]})
+            if(filter){
+              this.CostDatas.forEach((x,indexs)=>{
+                if(indexs==0){
+                    x.name = '机票'
+                    this.CostAnalysisData.forEach(z=>{
+                      x.data.push((z['JiPiao']/10000).toFixed(2))
+                    })
+                  }else if(indexs==1){
+                    x.name = '房费'
+                    this.CostAnalysisData.forEach(z=>{
+                      x.data.push((z['RoomFee']/10000).toFixed(2))
+                    })
+                  }else if(indexs==2){
+                    x.name = '车费'
+                    this.CostAnalysisData.forEach(z=>{
+                      x.data.push((z['CarFee']/10000).toFixed(2))
+                    })
+                  }else if(indexs==3){
+                    x.name = '餐费'
+                    this.CostAnalysisData.forEach(z=>{
+                      x.data.push((z['MealFee']/10000).toFixed(2))
+                    })
+                  }else if(indexs==4){
+                    x.name = '门票'
+                    this.CostAnalysisData.forEach(z=>{
+                      x.data.push((z['TicketFee']/10000).toFixed(2))
+                    })
+                  }else if(indexs==5){
+                    x.name = '签证'
+                    this.CostAnalysisData.forEach(z=>{
+                      x.data.push((z['VisaFee']/10000).toFixed(2))
+                    })
+                  }
+                  // if(indexs>4){
+                  //   let name=x.name;
+                  //   Newobj[name]=false;
+                  // }
+                  // Stocklegend=Newobj;
+              })
+            }
+          }
+      }
+      datas = this.CostDatas
+      let chartDom = document.getElementById('PropMyEchart');
+      let myChart = this.$echarts.init(chartDom);
+      let option;
+
+      option = {
+          color:that.colorList,
+          legend: {
+            x:'left',
+            y:'bottom',
+            type:'scroll',
+            icon: "circle",
+            padding:  [5, 30, 20, 30] ,
+            type:'scroll',
+            data: titles,
+            selected: Stocklegend
+          },
+          grid: {
+            left: 15, // 默认10%，给24就挺合适的。
+            top: 30, // 默认60
+            right: 45, // 默认10%
+            bottom: 70, // 默认60
+            containLabel: true
+          },
+          tooltip : {
+              trigger: 'axis',
+              axisPointer: {
+                lineStyle: {
+                  type: 'dashed',
+                  color: "#ddd"
+                }
+              }
+          },
+          xAxis : [
+              {
+                type: 'category',
+                boundaryGap: false,
+                nameTextStyle: {
+                  fontWeight: 600,
+                  fontSize: 18
+                },
+                data:this.MonthList,
+                axisLine: {
+                  lineStyle: {
+                    // 设置x轴颜色
+                    color: "transparent"
+                  }
+                },
+                axisLabel: {
+                  textStyle: {
+                    color: "#333333"
+                  }
+                },
+
+              }
+          ],
+          yAxis : [
+              {
+                type : 'value',
+                axisLine: {
+                  lineStyle: {
+                    // 设置x轴颜色
+                    color: "transparent",
+                    width: 1,
+                  }
+                },
+                axisLabel: {
+                  textStyle: {
+                    color: "#969696"
+                  },
+                  formatter: '{value}w'
+                },
+                splitLine:{
+                show:true,
+                  lineStyle:{
+                      // type:'dashed'
+                      color:'#EEEEEE',
+                    }
+                }
+              }
+          ],
+          dataZoom: [
+            {
+              type: 'inside',
+              disabled: true
+            }
+          ],
+          series:datas
+      };
+        myChart.setOption(option,true)
+    },
+    inCostDatas() {
+      this.CostDatas = []
+      for(let i=0;i<7;i++){
+        this.CostDatas.push(JSON.parse(JSON.stringify(this.CostDataObj)))
+      }
+    },
+
+  }
+}
+</script>
+
+<style>
+
+</style>

src/components/FinancialModule/DataAnalysis/components/twoEchart/IncomeChange.vue

+<template>
+  <div class="echartsBox">
+    <div class="titleBox row">
+      <h3>月度收入变化趋势图</h3>
+      <div style="margin-left: 20px;">
+
+
+      </div>
+    </div>
+    <div style="background: #fff;">
+      <div id="myEchart" 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: 'line',
+          showSymbol: true,
+          smooth: true,
+          symbolSize: 5,
+          label: {
+              show: true,
+              position: 'top', // 在顶部显示
+              formatter: '{c}w' // 格式化金额，{c} 代表数据值
+          },
+          data: x.DetailList.map(y=>{return (y.Income/10000).toFixed(2)})	// 绑定实时数据数组
+        }
+        datas.push(obj)
+        if(indexs>10){
+          let name=x.Name;
+          Newobj[name]=false;
+        }
+        Stocklegend=Newobj;
+      })
+      let chartDom = document.getElementById('myEchart','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"
+                },
+                formatter: '{value}w',
+                margin: 20 // 标签距离y轴的距离为20
+              },
+              splitLine:{
+              show:true,
+                lineStyle:{
+                    // type:'dashed'
+                    color:'#EEEEEE',
+                  }
+              }
+            }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            lineStyle: {
+              type: 'dashed',
+              color: "#ddd"
+            }
+          },
+        },
+        dataZoom: [
+          {
+            type: 'inside',
+            disabled: true
+          }
+        ],
+        series:datas
+      }
+
+      myChart.setOption(option,true)
+    },
+
+  }
+}
+</script>
+
+<style>
+
+</style>

src/components/FinancialModule/DataAnalysis/components/twoEchart/IncomeShare.vue

+<template>
+  <div class="echartsBox">
+    <div class="titleBox" style="position: relative;">
+      <h3>月度收入占比 %</h3>
+      <div style="margin-left: 20px;position: absolute;top: 5px;left: 140px;">
+        <el-select v-model="CurrentMonth" @change="getEchart"
+        style="width: 120px;" size="small">
+          <el-option
+            v-for="item in MonthList"
+            :label="item"
+            :value="item"
+            :key="item"
+          ></el-option>
+        </el-select>
+
+      </div>
+    </div>
+    <div style="background: #fff;">
+      <div id="ShareMyEchart" class="allMyEchartBox" ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props:['msg','StatisticalData'],
+  data() {
+    return {
+      MonthList: [],//月份列表
+      LineAnalysisDataHZ: [],//各线路统计
+      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)'],
+      CurrentMonth: null
+    }
+  },
+  created() {
+    window.addEventListener('resize', this.handleResize);
+  },
+  destroyed() {
+    window.removeEventListener('resize', this.handleResize);
+  },
+  watch: {
+    StatisticalData:{
+      handler(n,o){
+        this.MonthList = n.MonthList//月份列表
+        this.LineAnalysisDataHZ = n.LineAnalysisDataHZ//各线路统计
+        this.CostAnalysisData = n.CostAnalysisData//各成本统计
+        this.CurrentMonth = this.MonthList[this.MonthList.length-1]
+        this.getEchart()
+      },
+      deep: true,
+      immediate: false,
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    handleResize() {
+
+      location.reload()
+    },
+    getEchart(){
+      let datas = [{
+        name: this.CurrentMonth,
+        type: 'pie',
+        radius: '50%',
+        data: [], // 绑定实时数据数组
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 5,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        }
+      }]
+      let titles = []
+      let Stocklegend = {}
+      let Newobj = {}
+      this.LineAnalysisDataHZ.forEach((x,indexs)=>{
+
+        let Name = `${x.Name}`
+        if(Name!='合计'){
+          titles.push(Name)
+
+          let newDetailList = []
+          x.DetailList.forEach(y=>{
+            if(y.Month==this.CurrentMonth) {
+              newDetailList.push(y)
+            }
+          })
+          if(newDetailList.length>0){
+            newDetailList.forEach((y,index)=>{
+              datas[0].data.push({
+                value: y.IncomeRate,
+                name: x.Name,
+              })
+
+            })
+          }
+
+
+          // if(indexs>3){
+          //   let name=x.Name;
+          //   Newobj[name]=false;
+          // }
+          // Stocklegend=Newobj;
+        }
+
+      })
+      let chartDom = document.getElementById('ShareMyEchart');
+      let myChart = this.$echarts.init(chartDom);
+      let option
+      option = {
+        color:this.colorList,
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          bottom:'bottom',
+          left: 'left',
+          type:'scroll',
+          icon: "circle",
+          padding:  [25, 20, 20, 20] ,
+          selected: Stocklegend
+        },
+        series: datas
+      }
+
+      myChart.setOption(option,true)
+    },
+
+  }
+}
+</script>
+
+<style>
+
+</style>

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

+<template>
+  <div class="echartsBox">
+    <div class="titleBox row">
+      <h3>月度毛利变化趋势图(折线图)</h3>
+      <div style="margin-left: 20px;">
+
+
+      </div>
+    </div>
+    <div style="background: #fff;">
+      <div id="WoolMyEchart" 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: 'line',
+          showSymbol: true,
+          smooth: true,          
+          symbolSize: 5,
+          label: {
+              show: true,
+              position: 'top', // 在顶部显示
+              formatter: '{c}w' // 格式化金额，{c} 代表数据值
+          },
+          data: x.DetailList.map(y=>{return (y.MaoLi/10000).toFixed(2)})	// 绑定实时数据数组
+        }
+        datas.push(obj)
+        if(indexs>10){
+          let name=x.Name;
+          Newobj[name]=false;
+        }
+        Stocklegend=Newobj;
+      })
+      let chartDom = document.getElementById('WoolMyEchart','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"
+                },
+                formatter: '{value}w',
+                margin: 20 // 标签距离y轴的距离为20
+              },
+              splitLine:{
+              show:true,
+                lineStyle:{
+                    // type:'dashed'
+                    color:'#EEEEEE',
+                  }
+              }
+            }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            lineStyle: {
+              type: 'dashed',
+              color: "#ddd"
+            }
+          }
+        },
+        dataZoom: [
+          {
+            type: 'inside',
+            disabled: true
+          }
+        ],
+        series:datas
+      }
+
+      myChart.setOption(option,true)
+    },
+
+  }
+}
+</script>
+
+<style>
+
+</style>

src/components/FinancialModule/DataAnalysis/components/twoEchart/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',
+          label: {
+              show: true,
+              position: 'top', // 在顶部显示
+              formatter: '{c}w' // 格式化金额，{c} 代表数据值
+          },
+          itemStyle:{
+            barBorderRadius: 5,
+          },
+          barWidth: 30,
+          data: x.DetailList.map(y=>{return (y.MaoLi/10000).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"
+                },
+                formatter: '{value}w',
+                margin: 50 // 标签距离y轴的距离为20
+              },
+              splitLine:{
+              show:true,
+                lineStyle:{
+                    // type:'dashed'
+                    color:'#EEEEEE',
+                  }
+              }
+            }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            lineStyle: {
+              type: 'dashed',
+              color: "#ddd"
+            }
+          }
+        },
+        dataZoom: [
+          {
+            type: 'inside',
+            disabled: true
+          }
+        ],
+        series:datas
+      }
+
+      myChart.setOption(option,true)
+    },
+
+  }
+}
+</script>
+
+<style>
+
+</style>