【add】- 完善制修订大屏

src/screenApi/api.js

@@ -12,16 +12,37 @@ const GetPreparationRevisionSC = (params) => getActionZxd( '/serviceInterface/ge
 // 标准归口情况（各SC）- 各SC归口在研项目和标准数量
 const GetCentralizedData = (params) => getActionZxd( '/serviceInterface/getDpData3', params)
 
+/*历年计划下达情况-------开始*/
+// 历年计划下达情况--（总体）逐年下达计划数量
+const GetReleasePlanData = (params) => getActionZxd( '/serviceInterface/getDpData4_1', params)
+// 历年计划下达情况--（各SC）逐年下达计划数量 --获取所有的SC值
+const GetReleasePlanSCData = (params) => getActionZxd( '/serviceInterface/getDpData4_2_1', params)
+// 历年计划下达情况--（各SC）逐年下达计划数量 -- 通过SC查询
+const GetReleasePlanDataBySC = (params) => getActionZxd( '/serviceInterface/getDpData4_2_2', params)
+/*历年计划下达情况-------结束*/
+
+/*历年标准发布情况-------开始*/
+const GetReleaseStandardData = (params) => getActionZxd( '/serviceInterface/getDpData5_1', params)
+// 历年计划下达情况--（各SC）逐年下达计划数量 --获取所有的SC值
+const GetReleaseStandardSCData = (params) => getActionZxd( '/serviceInterface/getDpData5_2_1', params)
+// 历年计划下达情况--（各SC）逐年下达计划数量 -- 通过SC查询
+const GetReleaseStandardDataBySC = (params) => getActionZxd( '/serviceInterface/getDpData5_2_2', params)
+
+/*历年标准发布情况-------结束*/
+
+
 // 各SC超期情况统计
 const GetOverdueData = (params) => getActionZxd( '/serviceInterface/getDpData7_ext', params)
 
-
 // 各SC每年计划完成率 --各年应完成项目情况
 const GetShouldBeCompletedProjectData = (params) => getActionZxd( '/serviceInterface/getDpData6_1_1', params)
 
 // 各SC历年应完成项目情况
 const GetCompletionProjectData = (params) => getActionZxd( '/serviceInterface/getDpData6_1_2', params)
 
+// 第一起草单位贡献度排名
+const GetEnterpriseContributionData = (params) => getActionZxd( '/serviceInterface/getDpData8', params)
+
 
 
 export {
@@ -29,7 +50,18 @@ export {
   GetPreparationRevisionSituation,
   GetPreparationRevisionSC,
   GetCentralizedData,
+
+  GetReleasePlanData,
+  GetReleasePlanSCData,
+  GetReleasePlanDataBySC,
+
+  GetReleaseStandardData,
+  GetReleaseStandardSCData,
+  GetReleaseStandardDataBySC,
+
   GetOverdueData,
   GetShouldBeCompletedProjectData,
-  GetCompletionProjectData
+  GetCompletionProjectData,
+
+  GetEnterpriseContributionData
 }

src/screenApi/manage.js

@@ -11,4 +11,18 @@ export function getActionZxd(url, parameter) {
     method: 'get',
     params: parameter
   })
+}
+export function getActionWP(url, parameter) {
+  return axios({
+    url: '/WPApi' + url,
+    method: 'get',
+    params: parameter
+  })
+}
+export function getActionISO(url, parameter) {
+  return axios({
+    url: '/ISOApi' + url,
+    method: 'get',
+    params: parameter
+  })
 }

src/views/screen/HomePage.vue

@@ -8,7 +8,7 @@
     <!-- 来款-->
     <template>
       <div class="sub-title"><span>汽车标准化工作平台</span></div>
-<!--      <income-payment-screen></income-payment-screen>-->
+      <income-payment-screen></income-payment-screen>
     </template>
 
     <!-- 制修订 -->
@@ -16,6 +16,18 @@
       <div class="sub-title"><span>汽车标准制修订管理系统 </span></div>
       <preparation-revision-screen></preparation-revision-screen>
     </template>
+
+    <!-- 中国汽车国际法规工作平台-ISO-->
+    <template>
+      <div class="sub-title"><span>中国汽车国际标准工作平台-ISO</span></div>
+<!--      <preparation-revision-screen></preparation-revision-screen>-->
+    </template>
+
+    <!-- 中国汽车国际法规工作平台-WP.29  -->
+    <template>
+      <div class="sub-title"><span>中国汽车国际法规工作平台-WP.29</span></div>
+<!--      <w-p-screen></w-p-screen>-->
+    </template>
   </div>
 </template>
 
@@ -23,6 +35,7 @@
 
 import IncomePaymentScreen from './incomePayments/index'
 import PreparationRevisionScreen from './preparationRevision/index'
+import WPScreen from './wp29/index'
 
 export default {
   name: 'HomePage',

src/views/screen/incomePayments/DepartmentTotalEcharts.vue

@@ -29,6 +29,10 @@
             </a-tooltip>
           </template>
 
+          <span v-for="item in columns" :slot="item.dataIndex" :key="item.dataIndex">
+             <j-ellipsis :length="7" :value=" item[item.dataIndex] "></j-ellipsis>
+          </span>
+
           <template slot="allMoney" slot-scope="text">
             <a-tooltip>
               <template slot="title">{{ formatMoney(text) }}</template>
@@ -145,16 +149,18 @@ export default {
         {
           title: '',
           align: 'center',
-          width: 140,
+          width: 120,
           dataIndex: 'indexName',
           scopedSlots: {customRender: 'text'}
         },
       ]
       data.map((item, index) => {
         this.columns.push({
-          title: item.name,
+          // title: item.name,
+          slots:{title: 'key' + index},
+          ['key' + index]:item.name,
           align: 'center',
-          width: index < 7 ? 190 : 120,
+          width: 130,
           dataIndex: 'key' + index,
           scopedSlots: {customRender: 'allMoney'}
         },)
@@ -165,12 +171,12 @@ export default {
       let xData = data.reduce((pre, val) => {
         return pre.concat(val.name)
       }, [])
-      xData = xData.slice(0,7)
+      xData = xData.filter(e => e !== '总数')
       // 处理y轴数据
-      data.map((item,index) => {
+      data.map(item => {
-        if(index < 7){
+        if (item.name !== '总数') {
-          this.echartsData.allMoney.push({value:item.allMoney,percent:item.value})
+          this.echartsData.allMoney.push({value: item.allMoney, percent: item.value})
-          this.echartsData.confirmAmount.push({value:item.confirmAmount,percent:item.value})
+          this.echartsData.confirmAmount.push({value: item.confirmAmount, percent: item.value})
         }
       })
 

src/views/screen/preparationRevision/CompletionProjectChart.vue

@@ -74,8 +74,8 @@ export default {
       })
     },
     /*
-* {"应报批总数2":2,"完成率字符串":"0.00%","应报批总数":2,"完成率数值2":0.00,"完成率数值":0.00,"tm_code":"SC1","完成数":0,"完成率字符串2":"0.00%","完成数2":0}
+    * {"应报批总数2":2,"完成率字符串":"0.00%","应报批总数":2,"完成率数值2":0.00,"完成率数值":0.00,"tm_code":"SC1","完成数":0,"完成率字符串2":"0.00%","完成数2":0}
-* */
+    * */
     initSCData(arr) {
       this.SCOptionData = []
       arr.map(item => {

src/views/screen/preparationRevision/EnterpriseContributionChart.vue

@@ -9,8 +9,79 @@
 </template>
 
 <script>
+import { GetEnterpriseContributionData } from "../../../screenApi/api";
+import { createBarChart } from "../util/BarOptions";
+import * as echarts from "echarts";
+
 export default {
-  name: 'EnterpriseContributionChart'
+  name: 'EnterpriseContributionChart',
+  data() {
+    return {
+      // 纵坐标分类的数据
+      categoryData: [],
+      barData: [[], []]
+    }
+  },
+  methods: {
+    getData() {
+      GetEnterpriseContributionData().then(res => {
+        if(res.success) {
+          this.initData(res.result || [])
+          this.$nextTick(() => {
+            this.initChart()
+          })
+        }
+      })
+    },
+    /*
+    * 初始化图表显示的数据  计划数量、标准数量
+    * {"unit":"中国汽车技术研究中心","planNum":4,"total":232,"stdNum":228}
+    * */
+    initData(arr) {
+      let barData = [[], []]
+      let categoryData = []
+      arr.map(item => {
+        categoryData.unshift(item.unit)
+        barData[0].unshift(item.planNum) // 计划数量
+        barData[1].unshift(item.stdNum) // 标准数量
+      })
+      this.barData = barData
+      this.categoryData = categoryData
+    },
+    initChart() {
+      let option = {
+        yAxis: {
+          data: this.categoryData
+        },
+        series: [
+          {
+            name:'计划数量',
+            type: 'bar',
+            stack: 'total',
+            barMaxWidth:20,
+            itemStyle:{
+              borderRadius:[0,0,0,0],
+            },
+            data: this.barData[0]
+          },
+          {
+            name:'标准数量',
+            type: 'bar',
+            stack: 'total',
+            barMaxWidth:20,
+            itemStyle:{
+              borderRadius:[0,4,4,0]
+            },
+            data: this.barData[1]
+          }
+        ]
+      }
+      createBarChart('enterpriseContributionChart', option, true)
+    }
+  },
+  created() {
+    this.getData()
+  }
 }
 </script>
 

src/views/screen/preparationRevision/OverdueChart.vue

@@ -9,9 +9,8 @@
 </template>
 
 <script>
-import {  GetOverdueData } from "../../../screenApi/api";
+import {  GetOverdueData } from '../../../screenApi/api'
-import { createBarChart } from "../util/BarOptions";
+import { createBarChart } from '../util/BarOptions'
-import * as echarts from 'echarts'
 
 export default {
   name: 'OverdueChart',
@@ -79,7 +78,6 @@ export default {
             // 获取xAxis data中的数据
             let dataStr = ''
             params.forEach(item => {
-              // console.log('--item--------', item)
               let color = ''
               if(typeof item.color === 'string') {
                 color = item.color

src/views/screen/preparationRevision/PreparationRevisionChart.vue

@@ -9,7 +9,7 @@
         :class="{'active': selectType === 2}"
         v-model="selectValue"
         style="width: 70px"
-        placeholder="SC"
+        placeholder="各SC"
         :bordered="false"
         show-search
         :show-arrow="false"

src/views/screen/preparationRevision/ReleasePlanChart.vue

@@ -9,7 +9,7 @@
         :class="{'active': selectType === 2}"
         v-model="selectValue"
         style="width: 70px"
-        placeholder="SC"
+        placeholder="各SC"
         :bordered="false"
         show-search
         :show-arrow="false"
@@ -33,6 +33,14 @@
 </template>
 
 <script>
+import {
+  GetReleasePlanData,
+  GetReleasePlanDataBySC,
+  GetReleasePlanSCData
+} from '../../../screenApi/api'
+import { createBarAndLineChart } from '../util/BarAndLineOptions'
+import * as echarts from 'echarts'
+
 export default {
   name: 'ReleasePlanChart',
   data() {
@@ -40,6 +48,8 @@ export default {
       selectType: 1, // 统计的维度 1-总体  2-SC下拉框
       selectValue: undefined, // 选中的SC
       SCOptionData: [],
+      yearData: [],
+      allData: [], // 总体请求的数据
     }
   },
   methods: {
@@ -47,19 +57,149 @@ export default {
       this.selectType = val
       this.selectValue = undefined
       //  操作数据
-      // this.initData(this.allData)
+      this.initData(this.allData)
-      // this.initChart()
+      this.initChart()
     },
     selectChange(val) {
       if(val) {
         this.selectType = 2
-        //  操作数据
+        // 获取数据
-        // this.initData(this.SCData[val])
+        this.getDataBySC(val)
-        // this.initChart()
       } else {
         this.selectType = 1
       }
+    },
+    getYearData() {
+      let year = new Date().getFullYear()
+      let yearData = []
+      for(let i = year; i > year - 5; i--) {
+        yearData.unshift({value: i, label: i + '年'})
+      }
+      this.yearData = yearData
+    },
+    /*
+    * 初始化SC下拉框的数据
+    * {"gbNum":23,"num":82,"hbNum":59,"tm_code":"SC1"}
+    * */
+    initSCData(arr) {
+      this.SCOptionData = []
+      arr.map(item => {
+        this.SCOptionData.push(item.tm_code)
+      })
+    },
+    // 获取SC下拉框的数据
+    getOptionData() {
+      // 先通过接口获取所有的SC数据
+      GetReleasePlanSCData().then((res) => {
+        if (res.success) {
+          this.initSCData(res.result || [])
+        }
+      })
+    },
+    /*
+    * 初始化图表显示的数据--取5年的数据做展示
+    * {"gbNum":51,"year":2012,"num":110,"hbNum":59}
+    * */
+    initData(arr) {
+      this.yData = [[], []]
+      this.yearData.map(year => {
+        let item = arr.find(a => (a.year + '') === (year.value + ''))
+        console.log(item, '11111111111')
+        if(item) {
+          this.yData[0].push(item.gbNum) // 国家标准
+          this.yData[1].push(item.hbNum) // 行业标准
+        }
+      })
+    },
+    // 获取图表的数据-总体
+    getAllData() {
+      // 总体
+      GetReleasePlanData().then((res) => {
+        if (res.success) {
+          this.allData = res.result || []
+          // 默认显示全部
+          this.initData(this.allData)
+          this.$nextTick(() =>{
+            this.initChart()
+          })
+        }
+      })
+
+    },
+    // 获取图表的数据- SC
+    getDataBySC(scCode) {
+      GetReleasePlanDataBySC({scCode}).then((res) => {
+        if (res.success) {
+          this.initData(res.result || [])
+          this.$nextTick(() =>{
+            this.initChart()
+          })
+        }
+      })
+    },
+    initChart() {
+      let option = {
+        color: [
+          {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0, color: '#4471EF' // 0% 处的颜色
+              },
+              {
+                offset: 0.8, color: '#2D419A' // 100% 处的颜色
+              },
+              {
+                offset: 1, color: 'transparent' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          },
+          '#6CFBCE'],
+        xAxis: { data: this.yearData },
+        series: [
+          {
+            name:'国家标准',
+            data: this.yData[0]
+          },
+          {
+            name:'行业标准',
+            type: 'line',
+            showSymbol: false,
+            symbol: 'path://M 30 10 A 20 20 0 1 0 30 50 A 20 20 0 1 0 30 10 Z M 30 15 A 15 15 0 1 1 30 45 A 15 15 0 1 1 30 15 Z',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#6CFBCE'
+                },
+                {
+                  offset: 1,
+                  color: '#1B2451'
+                }
+              ])
+            },
+            data: this.yData[1],
+          }
+        ]
+      }
+      console.log('------option------', option)
+      createBarAndLineChart('releasePlanChart', option)
     }
+  },
+  created() {
+    this.selectType = 1
+    // 操作进5年的年份值
+    this.getYearData()
+    // 获取SC下拉框数据
+    this.getOptionData()
+    // 获取总体图表数据
+    this.getAllData()
   }
 }
 </script>

src/views/screen/preparationRevision/ReleaseStandardChart.vue

@@ -9,7 +9,7 @@
         :class="{'active': selectType === 2}"
         v-model="selectValue"
         style="width: 70px"
-        placeholder="SC"
+        placeholder="各SC"
         :bordered="false"
         show-search
         :show-arrow="false"
@@ -32,6 +32,14 @@
 </template>
 
 <script>
+import {
+  GetReleaseStandardData,
+  GetReleaseStandardSCData,
+  GetReleaseStandardDataBySC
+} from '../../../screenApi/api'
+import { createBarAndLineChart } from '../util/BarAndLineOptions'
+import * as echarts from 'echarts'
+
 export default {
   name: 'ReleaseStandardChart',
   data() {
@@ -39,6 +47,7 @@ export default {
       selectType: 1, // 统计的维度 1-总体  2-SC下拉框
       selectValue: undefined, // 选中的SC
       SCOptionData: [],
+      allData: [], // 总体请求的数据
     }
   },
   methods: {
@@ -46,19 +55,147 @@ export default {
       this.selectType = val
       this.selectValue = undefined
       //  操作数据
-      // this.initData(this.allData)
+      this.initData(this.allData)
-      // this.initChart()
+      this.initChart()
     },
     selectChange(val) {
       if(val) {
         this.selectType = 2
-        //  操作数据
+        // 获取数据
-        // this.initData(this.SCData[val])
+        this.getDataBySC(val)
-        // this.initChart()
       } else {
         this.selectType = 1
       }
+    },
+    getYearData() {
+      let year = new Date().getFullYear()
+      let yearData = []
+      for(let i = year; i > year - 5; i--) {
+        yearData.unshift({value: i, label: i + '年'})
+      }
+      this.yearData = yearData
+    },
+    /*
+    * 初始化SC下拉框的数据
+    * {"gbNum":23,"num":82,"hbNum":59,"tm_code":"SC1"}
+    * */
+    initSCData(arr) {
+      this.SCOptionData = []
+      arr.map(item => {
+        this.SCOptionData.push(item.tm_code)
+      })
+    },
+    // 获取SC下拉框的数据
+    getOptionData() {
+      // 先通过接口获取所有的SC数据
+      GetReleaseStandardSCData().then((res) => {
+        if (res.success) {
+          this.initSCData(res.result || [])
+        }
+      })
+    },
+    /*
+    * 初始化图表显示的数据--取5年的数据做展示
+    * {"gbNum":51,"year":2012,"num":110,"hbNum":59}
+    * */
+    initData(arr) {
+      this.yData = [[], []]
+      this.yearData.map(year => {
+        let item = arr.find(a => (a.year + '') === (year.value + ''))
+        if(item) {
+          this.yData[0].push(item.gbNum) // 国家标准
+          this.yData[1].push(item.hbNum) // 行业标准
+        }
+      })
+    },
+    // 获取图表的数据-总体
+    getAllData() {
+      // 总体
+      GetReleaseStandardData().then((res) => {
+        if (res.success) {
+          this.allData = res.result || []
+          // 默认显示全部
+          this.initData(this.allData)
+          this.$nextTick(() =>{
+            this.initChart()
+          })
+        }
+      })
+
+    },
+    // 获取图表的数据- SC
+    getDataBySC(scCode) {
+      GetReleaseStandardDataBySC({scCode}).then((res) => {
+        if (res.success) {
+          this.initData(res.result || [])
+          this.$nextTick(() =>{
+            this.initChart()
+          })
+        }
+      })
+    },
+    initChart() {
+      let option = {
+        color: [
+          {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0, color: '#4471EF' // 0% 处的颜色
+              },
+              {
+                offset: 0.8, color: '#2D419A' // 100% 处的颜色
+              },
+              {
+                offset: 1, color: 'transparent' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          },
+          '#6CFBCE'],
+        xAxis: { data: this.yearData },
+        series: [
+          {
+            name:'国家标准',
+            data: this.yData[0]
+          },
+          {
+            name:'行业标准',
+            type: 'line',
+            showSymbol: false,
+            symbol: 'path://M 30 10 A 20 20 0 1 0 30 50 A 20 20 0 1 0 30 10 Z M 30 15 A 15 15 0 1 1 30 45 A 15 15 0 1 1 30 15 Z',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#6CFBCE'
+                },
+                {
+                  offset: 1,
+                  color: '#1B2451'
+                }
+              ])
+            },
+            data: this.yData[1],
+          }
+        ]
+      }
+      createBarAndLineChart('releaseStandardChart', option)
     }
+  },
+  created() {
+    this.selectType = 1
+    // 操作进5年的年份值
+    this.getYearData()
+    // 获取SC下拉框数据
+    this.getOptionData()
+    // 获取总体图表数据
+    this.getAllData()
   }
 }
 </script>

src/views/screen/preparationRevision/ShouldBeCompletedProjectChart.vue

@@ -7,7 +7,7 @@
         class="active"
         v-model="selectValue"
         style="width: 70px"
-        placeholder="SC"
+        placeholder="各SC"
         :bordered="false"
         show-search
         :show-arrow="false"

src/views/screen/util/BarAndLineOptions.js

@@ -50,7 +50,6 @@ export const BarAndLineOptions = {
       // 获取xAxis data中的数据
       let dataStr = ''
       params.forEach(item => {
-        console.log('--item--------', item)
         let color = ''
         if(typeof item.color === 'string') {
           color = item.color
@@ -66,7 +65,11 @@ export const BarAndLineOptions = {
           </div>
         </div>`
         } else {
-          let valueText = item.value === undefined ? '-' : `${item.value}%`
+          let valueText = item.value
+          // 求比例的时候特殊处理
+          if(item.seriesName.indexOf('比例') > -1) {
+            valueText = item.value === undefined ? '-' : `${item.value}%`
+          }
           dataStr += `<div>
           <div style="margin: 0 8px;">
             <span style="display:inline-block;margin-right:5px;width:15px;height:2px;background-color:${color};vertical-align: middle"></span>

src/views/screen/util/BarOptions.js

@@ -2,7 +2,7 @@ import * as echarts from 'echarts'
 import { formatMoney } from '../../../utils/formatMoney'
 import { deepMerge } from '../../../utils/util'
 
-
+// 正常的柱状图配置
 export const BarOptions = {
   // color: ['#4471EF', '#00D8F1', '#6CFBCE'],
   color: [
@@ -135,7 +135,6 @@ export const BarOptions = {
         }
         return newParamsName
       }
-
     },
     type: 'category',
     boundaryGap: ['30%', '20%'],
@@ -170,12 +169,164 @@ export const BarOptions = {
   }
 }
 
-// 生成柱状图
+// X轴是value的配置
-export function createBarChart(idName, option) {
+export const BarAxisTransformOptions = {
+  color: [
+    {
+      type: 'linear',
+      x: 1,
+      y: 0,
+      x2: 0,
+      y2: 0,
+      colorStops: [
+        {
+          offset: 0, color: '#4471EF' // 0% 处的颜色
+        },
+        {
+          offset: 0.9, color: '#2D419A' // 100% 处的颜色
+        },
+        {
+          offset: 1, color: 'transparent' // 100% 处的颜色
+        }
+      ],
+      global: false // 缺省为 false
+    },
+    '#69C4F3'
+  ],
+  tooltip: {
+    trigger: 'axis',
+    formatter: params => {
+      // 获取xAxis data中的数据
+      let dataStr = ` <div style="color:#7599E8">${params[0].name}</div>`
+      params.forEach(item => {
+        let color = ''
+        if(typeof item.color === 'string') {
+          color = item.color
+        } else {
+          color = item.color.colorStops[0].color
+        }
+        dataStr += `<div>
+          <div style="margin: 0 8px;">
+            <span style="display:inline-block;margin-right:5px;width:15px;height:10px;background-color:${color};border-radius: 3px"></span>
+            <span style="color:#7599E8">${item.seriesName}</span>
+            <span style="color:#7599E8;">${item.value}</span>
+          </div>
+        </div>`
+      })
+      return dataStr
+    },
+    borderWidth: 0,
+    //提示框浮层的背景颜色
+    backgroundColor: '#233062',
+    //额外附加到浮层的 css 样式。如下为浮层添加阴影的示例：
+    extraCssText: 'box-shadow: 0 0 4px #7599E8 inset;'
+  },
+
+  legend: {
+    //图例的公用文本样式。
+    textStyle: {
+      color: '#7599E8'
+    },
+    itemWidth: 14,
+    right: '3%'
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  toolbox: {},
+  yAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#7599E8'
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: '#7FA6FB',
+      interval: 0,
+      formatter: function(params) {
+        let newParamsName = '' // 最终拼接成的字符串
+        let paramsNameNumber = params.length // 实际标签的个数
+        let provideNumber = 10 // 每行能显示的字的个数
+        let rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
+        /**
+         * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
+         */
+        // 条件等同于rowNumber>1
+        if (paramsNameNumber > provideNumber) {
+          /** 循环每一行,p表示行 */
+          for (let p = 0; p < rowNumber; p++) {
+            let tempStr = ''// 表示每一次截取的字符串
+            let start = p * provideNumber // 开始截取的位置
+            let end = start + provideNumber // 结束截取的位置
+            // 此处特殊处理最后一行的索引值
+            if (p === rowNumber - 1) {
+              // 最后一次不换行
+              tempStr = params.substring(start, paramsNameNumber)
+            } else {
+              // 每一次拼接字符串并换行
+              tempStr = params.substring(start, end) + '\n'
+            }
+            newParamsName += tempStr // 最终拼成的字符串
+          }
+        } else {
+          // 将旧标签的值赋给新标签
+          newParamsName = params
+        }
+        return newParamsName
+      }
+    },
+    type: 'category',
+    boundaryGap: ['30%', '20%'],
+    // 刻度线设置
+    axisTick: {
+      show: false
+    },
+    // TODO 需要自己扩展的
+    data: []
+  },
+  xAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#7599E8'
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: '#7FA6FB'
+    },
+    splitLine: {
+      lineStyle: {
+        color: '#7599E8',
+        type: 'dashed'
+      }
+    },
+    type: 'value',
+    nameTextStyle: {
+      color: '#7FA6FB'
+    }
+  }
+}
+
+/**
+ * 生成柱状图
+ * @param idName --- 当前dom的id
+ * @param option --- 配置项
+ * @param xValue --- 横坐标是否是value，默认不传
+ */
+export function createBarChart(idName, option, xValue) {
   const chartDom = document.getElementById(idName)
   echarts.dispose(chartDom)
   // debugger
   let chartOption = deepMerge({}, BarOptions, option)
+  if(xValue) {
+    chartOption = deepMerge({},BarAxisTransformOptions, option)
+  }
   let myChart = echarts.init(chartDom)
   chartOption && myChart.setOption(chartOption)
   window.addEventListener('resize', () => {