优化分析图显示

src/utils/echarts-utils.js

@@ -148,8 +148,10 @@ export function barUtilsOne(id, name, Xdata, Ydata, seriesName, yAxisName) {
   }
 
   let series = []
+  let gradientColor = getGradientColor(seriesName.length)
 
   for (let i = 0; i < seriesName.length; i++) {
+    let arrColor = gradientColor[i]
     series.push({
       name: seriesName[i],
       type: 'bar',
@@ -163,23 +165,24 @@ export function barUtilsOne(id, name, Xdata, Ydata, seriesName, yAxisName) {
         colorStops: [
           {
             offset: 0,
-            color: '#6633ff',
+            // color: '#6633ff',
+            color: arrColor[0]
           },
           {
             offset: 0.5,
-            color: '#6699ff'
+            // color: '#6699ff'
+            color: arrColor[1]
           },
           {
             offset: 1,
-            color: '#66ffff'
+            // color: '#66ffff'
+            color: arrColor[2]
           }
         ]
       },
       label: {
         show: true,
-        textStyle: {
-          color: '#0000ff'
-        },
+        color: '#000000',
         position: 'top',
         formatter(p) {
           return p.value > 0 ? p.value : ''
@@ -253,3 +256,189 @@ export function createColorCode(data) {
   }
   return list
 }
+
+function getGradientColor(num) {
+  let arr = createGradientColor()
+  let return_arr = []
+  for (let i = 0; i < num; i++) {
+    if (arr.length > 0) {
+      let arrIndex = Math.floor(Math.random() * arr.length)
+      return_arr[i] = arr[arrIndex]
+      arr.splice(arrIndex, 1)
+    } else {
+      break
+    }
+  }
+  return return_arr
+}
+
+function createGradientColor() {
+  let list = []
+  let a = ['#00C5CD', '#00E5EE', '#00F5FF']
+  let b = ['#CD4F39', '#EE5C42', '#FF6347']
+  let c = ['#6633FF', '#6699FF', '#66FFFF']
+  let d = ['#1E90FF', '#63B8FF', '#00BFFF']
+  let e = ['#BF3EFF', '#9B30FF', '#AB82FF']
+  let f = ['#6A5ACD', '#7B68EE', '#8470FF']
+  let g = ['#1E90FF', '#00BFFF', '#87CEFA']
+  let h = ['#00CED1', '#48D1CC', '#40E0D0']
+  let i = ['#00CD66', '#00FF7F', '#9AFF9A']
+  let j = ['#9400D3', '#A020F0', '#BA55D3']
+  list.push(a)
+  list.push(b)
+  list.push(c)
+  list.push(d)
+  list.push(e)
+  list.push(f)
+  list.push(g)
+  list.push(h)
+  list.push(i)
+  list.push(j)
+  return list
+}
+
+// unit：新增tip单位
+export function barUtilsTwo(id, name, Xdata, Ydata, seriesName, yAxisName, unit) {
+  // 验证 这个 是否被创建了
+  let linearBarDom = echarts.getInstanceByDom(id)
+  if (linearBarDom == null) {
+    linearBarDom = echarts.init(id)
+  }
+
+  linearBarDom.setOption({
+    title: {
+      text: name,
+      x: 'center',
+      y: 'bottom',
+      textAlign: 'left',
+    },
+    xAxis: {
+      type: 'category',
+      data: Xdata,
+      axisLabel: {
+        color: '#bb3137',
+        fontSize: 16
+      }
+    },
+    yAxis: {
+      type: 'value',
+      name: yAxisName,
+      nameLocation: 'end',
+      axisLabel: {
+        show: true,
+        interval: 0,
+        formatter: function (value, index) {
+          return value / 1000000
+        }
+      }
+    },
+    legend: {
+      data: [
+        {
+          name: seriesName,
+          icon: 'rect',
+        }
+      ],
+      top: "0%"
+    },
+    tooltip: {
+      trigger: 'axis',
+      confine: true,
+      formatter: function (param) {
+        let relVal = param[0].name + '<br>'
+        param.forEach((item, index) => {
+          if (item.value && 'bar' == param[index].seriesType) {
+            relVal += item.marker + ' ' + item.seriesName + ' : ' + item.value + unit + '</br>'
+          } else if (item.value && 'line' == param[index].seriesType) {
+
+          } else {
+            relVal += item.marker + ' ' + item.seriesName + ' : - </br>'
+          }
+        })
+        return relVal
+      }
+
+    },
+    toolbox: {
+      show: 1,
+      itemSize: 24,
+      x: 'right',
+      y: 'top',
+      feature: {
+        saveAsImage: {
+          show: true,
+          title: '下载图片',
+          type: 'png'
+        }
+      }
+    },
+    series: [
+      {
+        name: seriesName,
+        type: 'bar',
+        // stack: 'all',
+        barMaxwidth: 35,
+        barGap: '10%',
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: '#6633ff',
+            },
+            {
+              offset: 0.35,
+              color: '#6699ff'
+            },
+            {
+              offset: 1,
+              color: '#66ffff'
+            }
+          ]
+        },
+        label: {
+          show: true,
+          color: '#000000',
+          position: 'top',
+          formatter(p) {
+            return (p.value / 1000000).toFixed(2)
+          }
+        },
+        data: Ydata,
+        emphasis: {
+          itemStyle: {
+            borderRadius: 30
+          }
+        },
+        itemStyle: {
+          borderRadius: [12, 12, 0, 0],
+        }
+      },
+      {
+        name: seriesName,
+        type: 'line',
+        data: Ydata,
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 1,
+        itemStyle: {
+          lineStyle: {
+            with: 3,
+            color: '#27dba0'
+          }
+        },
+        emphasis: {
+          itemStyle: {
+            color: '#4ccefe'
+          }
+        }
+      }
+    ]
+  })
+  window.onresize = function () {
+    //自适应大小, 不用的话不会自适应大小。
+    linearBarDom.resize()
+  }
+}

src/views/medical-insurance/allpatient/InsurIncomeAnalysis.vue

@@ -10,7 +10,7 @@
       <el-divider direction="vertical"></el-divider>
       <el-button icon="Search" type="success" @click="fetchSetlinfos">查询</el-button>
       <el-button icon="Download" type="primary" @click="exportSetlinfoExcel">导出Excel</el-button>
-      <el-button type="primary" @click="selectChart">图形</el-button>
+      <el-button type="primary" @click="selectChart">分析图</el-button>
     </el-header>
     <el-main>
       <el-tabs type="border-card" v-model="setlCondition.selectType" @tab-click="handleClick">
@@ -126,8 +126,26 @@
         </el-tab-pane>
       </el-tabs>
     </el-main>
-    <el-drawer :title="titleChart" v-model="qxtDrawer" size="70%">
-      <div style="width: 100%; height: 90%" id="ybChart"></div>
+    <el-drawer :title="titleChart" v-model="qxtDrawer" size="80%">
+      <!-- <div style="width: 100%; height: 90%" id="ybChart"></div> -->
+      <el-main>
+        <el-row>
+          <el-col :span="12">
+            <div style="width: 100%; height: 400px" id="zfyDst"></div>
+          </el-col>
+          <el-col :span="12">
+            <div style="width: 100%; height: 400px" id="zjjDst"></div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div style="width: 100%; height: 400px" id="ypfDst"></div>
+          </el-col>
+          <el-col :span="12">
+            <div style="width: 100%; height: 400px" id="clfDst"></div>
+          </el-col>
+        </el-row>
+      </el-main>
     </el-drawer>
   </el-container>
 </template>
@@ -144,7 +162,7 @@ import { clone } from '@/utils/clone'
 import { Export } from '@/utils/ExportExcel'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { downloadExcel } from '@/utils/excel'
-import { barUtilsOne } from '@/utils/echarts-utils'
+import { barUtilsOne, barUtilsTwo } from '@/utils/echarts-utils'
 import Setlinfo from '../../../components/medical-insurance/setlinfo/Index.vue'
 
 export default {
@@ -380,11 +398,11 @@ export default {
       } else {
         nameText = '门诊'
       }
-      nameText = titleChart.value + '(' + nameText + ')'
-      let yAxisName = '单位：元'
+      nameText = titleChart.value + '(' + nameText + ')-'
+      let yAxisName = '单位：百万元'
+      let tipUnit = '元'
 
       let echartsXdata = []
-      let echartsYdatas = []
       let zfy = []
       let zjj = []
       let ypf = []
@@ -392,15 +410,18 @@ export default {
       chartData.value.forEach((item) => {
         zfy.push(item.zfy_jn)
         zjj.push(item.zjj_jn)
-        ypf.push(item.ypf_jn)
-        clf.push(item.clf_jn)
+        if (item.ypf_jn > 0.00) {
+          ypf.push(item.ypf_jn)
+        }
+        if (item.clf_jn > 0.00) {
+          clf.push(item.clf_jn)
+        }
         echartsXdata.push(item.month)
       })
-      echartsYdatas.push(zfy)
-      echartsYdatas.push(zjj)
-      echartsYdatas.push(ypf)
-      echartsYdatas.push(clf)
-      barUtilsOne(ybChart, nameText, echartsXdata, echartsYdatas, barTitles, yAxisName)
+      barUtilsTwo(zfyDst, nameText + barTitles[0], echartsXdata, zfy, barTitles[0], yAxisName, tipUnit)
+      barUtilsTwo(zjjDst, nameText + barTitles[1], echartsXdata, zjj, barTitles[1], yAxisName, tipUnit)
+      barUtilsTwo(ypfDst, nameText + barTitles[2], echartsXdata, ypf, barTitles[2], yAxisName, tipUnit)
+      barUtilsTwo(clfDst, nameText + barTitles[3], echartsXdata, clf, barTitles[3], yAxisName, tipUnit)
     })
 
     const handleClick = (tab, event) => {