前端：新首页

src/dashoo.cn/frontend_web/src/pages/indexNew.vue

@@ -11,23 +11,42 @@
     <div class="chart-box">
       <div class="chart-box-row">
         <div class="chart-box-row-item">
-          <div style="height: 100%">
-            <highcharts :options="chartOptions"></highcharts>
+          <div class="item-more-button"><span>更多类型</span></div>
+          <div class="item-chart-body">
+            <!--<highcharts class="item-high-chart" :options="supplierTypeChartOptions"></highcharts>-->
+            <div id="supplier-type" class="item-high-chart" :option="supplierTypeOptions"></div>
+          </div>
+        </div>
+        <div class="chart-box-row-item">
+          <div class="item-more-button"><span>更多等级</span></div>
+          <div class="item-chart-body">
+            <!--<highcharts class="item-high-chart" :options="chartOptions"></highcharts>-->
+            <div id="supplier-level" class="item-high-chart" :option="supplierLevelOptions"></div>
           </div>
         </div>
-        <div class="chart-box-row-item"></div>
       </div>
       <div class="chart-box-row">
-        <div class="chart-box-row-item"></div>
-        <div class="chart-box-row-item"></div>
+        <div class="chart-box-row-item">
+          <div class="item-more-button"><span>更多准入方式</span></div>
+          <div class="item-chart-body">
+            <!--<highcharts class="item-high-chart" :options="chartOptions"></highcharts>-->
+            <div id="access-type" class="item-high-chart" :option="accessTypeOptions"></div>
+          </div>
+        </div>
+        <div class="chart-box-row-item">
+          <div class="item-more-button"><span>更多规模</span></div>
+          <div class="item-chart-body">
+            <!--<highcharts class="item-high-chart" :options="chartOptions"></highcharts>-->
+            <div id="supplier-scale" class="item-high-chart" style="width: 80%" :option="supplierScaleOption"></div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-  import echarts from 'echarts'
-
+  import Highcharts from 'highcharts'
   import {
     mapGetters
   } from 'vuex'
@@ -35,103 +54,10 @@
     name: 'index',
     data () {
       return {
-        chartOptions: {
-          chart: {
-            type: 'pie',
-            options3d: {
-              enabled: true,
-              alpha: 45,
-              beta: 0,
-              viewDistance: 25
-            }
-          },
-          title: false,
-          tooltip: {
-            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
-          },
-          plotOptions: {
-            pie: {
-              allowPointSelect: false, // 设置饼图不可点击选择
-              cursor: 'pointer',
-              depth: 35, // 饼图的厚度
-              dataLabels: {
-                enabled: false, // 隐藏连线提示
-                format: '{point.name}'
-              }
-            }
-          },
-          series: [{
-            type: 'pie',
-            name: '浏览器占比',
-            data: [
-              ['Firefox', 45.0],
-              ['IE', 26.8],
-              {
-                name: 'Chrome',
-                y: 12.8,
-                sliced: false, // 是否默认突出
-                selected: true
-              },
-              ['Safari', 8.5],
-              ['Opera', 6.2],
-              ['Others', 0.7]
-            ]
-          }],
-          credits: {
-            enabled: false // 不显示LOGO
-          },
-          legend: {
-            enabled: true
-          }
-        },
-        todoNumList: {
-          newAccess: 0, // 新准入
-          append: 0, // 增项
-          yearAudit: 0, // 年审
-          infoChange: 0, // 信息变更
-          business: 0 // 业绩评价
-        },
-        // 饼状图&柱状图
-        deviceChartPie: null,
-        deviceChartBar: null,
-        // 折线图
-        deviceContractLine: null, // 合同
-        deviceCustomerLine: null, // 客户
-        deviceCollectionline: null, // 样本采集
-        devicePrepareline: null, // 制备
-        // num: 0,
-        usertotal: {},
-        user: {
-          photo: '',
-          name: '',
-          Realname: '',
-          host: ''
-        },
-        contracttotal: { // 合同统计
-          Total: 0, // 总数
-          Inprogress: 0, // 执行中
-          Addcontract: 0, // 本月新增
-          MonthTotal: [] // 月总数
-        },
-        customertotal: { // 客户统计
-          Total: 0, // 总数
-          Addcontract: 0, // 本月新增
-          MonthTotal: [] // 月总数
-        },
-        collectiontotal: { // 样本采集统计
-          Total: 0, // 总数
-          Addcontract: 0, // 本月新增
-          MonthTotal: [] // 月总数
-        },
-        preparetotal: { // 制备统计
-          InPreparation: 0, // 制备中
-          EndPreparation: 0, // 制备完成
-          MonthTotal: [] // 月总数
-        },
-        tjzztitles: [], // 样本统计图
-        tjzzdata: [], // 样本统计图
-        tjdevicex: [], // 容器统计图
-        tjdevicey: [], // 容器统计图
+        supplierTypeOptions: null,
+        accessTypeOptions: null,
+        supplierLevelOptions: null,
+        supplierScaleOption: null,
         tjdevicecolor: [
           '#6A5ACD', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B',
           '#60C0DD', '#E87C25', '#27727B', '#FE8463'
@@ -141,279 +67,357 @@
     },
     created () {
       // this.getToDoNumList()
-      // this.initData()
-      // this.getContractinfo() // 合同统计
-      // this.getCustomerinfo() // 客户统计
-      // this.getCollectioninfo() // 采集
-      // this.getPrepareinfo() // 制备
-      let _this = this
-      _this.user.photo = _this.authUser.Profile.Photo
-      _this.user.name = _this.authUser.Profile.name
-      _this.user.Realname = _this.authUser.Profile.Realname
-      _this.user.host = _this.authUser.Profile.Host
+      this.getSupplierChart()
     },
     computed: mapGetters({
       authUser: 'authUser'
     }),
     methods: {
-      getToDoNumList () {
-        this.$axios.get('/supplier/todo-num', {}).then(res => {
-          console.log('待办任务数据返回结果', res)
-        })
-      },
-      initData () {
-        let _this = this
-        this.$axios.get('/users/getaccountingo', {})
-          .then(res => {
-            _this.usertotal = res.data
-            _this.getgroupzzqg()
-            _this.getgroupdevice()
-          })
-          .catch(err => {
-            // handle error
-            this.downloading = false
-            console.error(err)
-          })
-      },
-      toUrl (type) {
-        console.log('跳转到：', type)
-      },
-      // 获取合同信息
-      getContractinfo () {
-        let _this = this
-        this.$axios.get('/cellstotal/getcontractinfo', {})
-          .then(res => {
-            _this.contracttotal = res.data.items
-            _this.contracttotal.Addcontract = _this.contracttotal.MonthTotal[0].Count
-            let time = new Array()
-            let total = new Array()
-            let length = _this.contracttotal.MonthTotal.length
-            for (let index = 0; index < length; index++) {
-              time[index] = _this.contracttotal.MonthTotal[length - 1 - index].Year + '.' + _this.contracttotal.MonthTotal[
-                length - 1 - index].Month
-              total[index] = _this.contracttotal.MonthTotal[length - 1 - index].Count
-            }
-            _this.drawContractline('deviceContractLine', time, total) // 合同
-          })
-          .catch(err => {
-            // handle error
-            console.error(err)
-          })
-      },
-      // 获取客户信息
-      getCustomerinfo () {
-        let _this = this
-        this.$axios.get('/cellstotal/getcustomerinfo', {})
-          .then(res => {
-            _this.customertotal = res.data.items
-            _this.customertotal.Addcontract = _this.customertotal.MonthTotal[0].Count
-            let time = new Array()
-            let total = new Array()
-            let length = _this.customertotal.MonthTotal.length
-            for (let index = 0; index < length; index++) {
-              time[index] = _this.customertotal.MonthTotal[length - 1 - index].Year + '.' + _this.customertotal.MonthTotal[
-                length - 1 - index].Month
-              total[index] = _this.customertotal.MonthTotal[length - 1 - index].Count
-            }
-            _this.drawContractline('deviceCustomerLine', time, total) // 客户
-          })
-          .catch(err => {
-            // handle error
-            console.error(err)
-          })
-      },
-      // 获取采集信息
-      getCollectioninfo () {
-        let _this = this
-        this.$axios.get('/cellstotal/getcollectioninfo', {})
-          .then(res => {
-            _this.collectiontotal = res.data.items
-            _this.collectiontotal.Addcontract = _this.collectiontotal.MonthTotal[0].Count
-            let time = new Array()
-            let total = new Array()
-            let length = _this.collectiontotal.MonthTotal.length
-            for (let index = 0; index < length; index++) {
-              time[index] = _this.collectiontotal.MonthTotal[length - 1 - index].Year + '.' + _this.collectiontotal.MonthTotal[
-                length - 1 - index].Month
-              total[index] = _this.collectiontotal.MonthTotal[length - 1 - index].Count
-            }
-            _this.drawContractline('deviceCollectionline', time, total) // 样本采集
-          })
-          .catch(err => {
-            // handle error
-            console.error(err)
-          })
-      },
-      // 获取制备信息
-      getPrepareinfo () {
-        let _this = this
-        this.$axios.get('/cellstotal/getprepareinfo', {})
-          .then(res => {
-            _this.preparetotal = res.data.items
-            _this.preparetotal.EndPreparation = _this.preparetotal.MonthTotal[0].Count
-            let time = new Array()
-            let total = new Array()
-            let length = _this.preparetotal.MonthTotal.length
-            for (let index = 0; index < length; index++) {
-              time[index] = _this.preparetotal.MonthTotal[length - 1 - index].Year + '.' + _this.preparetotal.MonthTotal[
-                length - 1 - index].Month
-              total[index] = _this.preparetotal.MonthTotal[length - 1 - index].Count
-            }
-            _this.drawContractline('devicePrepareline', time, total) // 制备
-          })
-          .catch(err => {
-            // handle error
-            console.error(err)
-          })
-      },
-      getgroupzzqg () {
-        let _this = this
-        _this.$axios.get('/users/gettotalbysampletype', {})
-          .then(res => {
-            _this.downloading = false
-            for (var i = 0; i < res.data.length; i++) {
-              if (res.data[i].Name === '') {
-                res.data[i].Name = '未知'
+      getSupplierChart () {
+        this.$axios.get('/supplier/statisticalNum', {}).then(res => {
+          console.log('供应商服务商个数', res)
+          this.supplierTypeOptions = Highcharts.chart('supplier-type', {
+            chart: {
+              type: 'pie',
+              marginLeft: 1, // 饼图距左距离
+              options3d: {
+                enabled: true,
+                alpha: 45,
+                beta: 0,
+                viewDistance: 25
               }
-              if (i < 5) {
-                _this.tjzztitles.push({
-                  name: res.data[i].Name
-                })
-                _this.tjzzdata.push({
-                  name: res.data[i].Name,
-                  value: res.data[i].Num
-                })
-              } else {
-                _this.tjzzdata.push({
-                  name: res.data[i].Name,
-                  value: res.data[i].Num
-                })
+            },
+            title: false,
+            tooltip: {
+              pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+            },
+            plotOptions: {
+              pie: {
+                size: '100%', // 饼图大小
+                allowPointSelect: false, // 设置饼图不可点击选择
+                cursor: 'pointer',
+                depth: 35, // 饼图的厚度
+                dataLabels: {
+                  enabled: false, // 隐藏连线提示
+                  format: '{point.name}'
+                },
+                showInLegend: true,
+                point: {
+                  events: {
+                    legendItemClick: function (e) {
+                      e.preventDefault()
+                    }
+                  }
+                }
               }
+            },
+            series: [{
+              type: 'pie',
+              name: '占比',
+              // #6c757d #007fbb  #c7000a
+              data: [
+                {
+                  name: '供应商  30 家',
+                  color: '#60C0DD',
+                  y: 30,
+                  sliced: false, // 是否默认突出
+                  selected: false
+                }, {
+                  name: '服务商 12 家',
+                  color: '#E87C25',
+                  y: 12,
+                  sliced: false, // 是否默认突出
+                  selected: false
+                }, {
+                  name: '承包商 42 家',
+                  color: '#007fbb',
+                  y: 42,
+                  sliced: false, // 是否默认突出
+                  selected: false
+                }
+              ]
+            }],
+            credits: {
+              enabled: false // 不显示LOGO
+            },
+            legend: {
+              enabled: true,
+              layout: 'vertical',
+              align: 'right',
+              verticalAlign: 'bottom',
+              borderWidth: 0,
+              borderRadius: 0,
+              itemMarginTop: 10, // 图例每行举上高度
+              itemMarginBottom: 10,
+              itemStyle: {
+                fontWeight: 'bold',
+                fontSize: 18 // 图例项文字大小
+              },
+              squareSymbol: true, // 默认就是true
+              itemDistance: 150, // 图例项间距
+              symbolHeight: 12,
+              symbolWidth: 12,
+              symbolRadius: 1 // 将图例圆角设置为 值越大就变圆点  https://api.highcharts.com.cn/highcharts#legend.symbolRadius
             }
-            _this.drawPieChart()
-          })
-          .catch(err => {
-            // handle error
-            _this.downloading = false
-            console.error(err)
           })
-      },
-      getgroupdevice () {
-        let _this = this
-        _this.$axios.get('/users/gettotalbygroupbydevice', {})
-          .then(res => {
-            for (var i = 0; i < res.data.length; i++) {
-              if (res.data[i].Name === '') {
-                res.data[i].Name = '未知'
+          this.accessTypeOptions = Highcharts.chart('access-type', {
+            chart: {
+              type: 'pie',
+              marginLeft: 1, // 饼图距左距离
+              options3d: {
+                enabled: true,
+                alpha: 45,
+                beta: 0,
+                viewDistance: 25
               }
-              if (i > 12) {
-                _this.tjdevicecolor.push(_this.tjdevicecolor[i % 12])
+            },
+            title: false,
+            tooltip: {
+              pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+            },
+            plotOptions: {
+              pie: {
+                size: '100%', // 饼图大小
+                allowPointSelect: false, // 设置饼图不可点击选择
+                cursor: 'pointer',
+                depth: 35, // 饼图的厚度
+                dataLabels: {
+                  enabled: false, // 隐藏连线提示
+                  format: '{point.name}'
+                },
+                showInLegend: true,
+                point: {
+                  events: {
+                    legendItemClick: function (e) {
+                      e.preventDefault()
+                    }
+                  }
+                }
               }
-              _this.tjdevicex.push(res.data[i].Name)
-              _this.tjdevicey.push(res.data[i].Num)
+            },
+            series: [{
+              type: 'pie',
+              name: '占比',
+              // #6c757d #007fbb  #c7000a
+              data: [
+                {
+                  name: '评审准入 30 家',
+                  color: '#60C0DD',
+                  y: 30,
+                  sliced: false, // 是否默认突出
+                  selected: false
+                }, {
+                  name: '招标准入 12 家           ',
+                  color: '#E87C25',
+                  y: 12,
+                  sliced: false, // 是否默认突出
+                  selected: false
+                }, {
+                  name: '战略准入 42 家           ',
+                  color: '#007fbb',
+                  y: 42,
+                  sliced: false, // 是否默认突出
+                  selected: false
+                }
+              ]
+            }],
+            credits: {
+              enabled: false // 不显示LOGO
+            },
+            legend: {
+              enabled: true,
+              layout: 'vertical',
+              align: 'right',
+              verticalAlign: 'bottom',
+              borderWidth: 0,
+              borderRadius: 0,
+              itemMarginTop: 10,
+              itemMarginBottom: 10,
+              itemStyle: {
+                fontWeight: 'bold',
+                fontSize: 18 // 图例项文字大小
+              },
+              squareSymbol: true, // 默认就是true
+              itemDistance: 150, // 图例项间距
+              symbolHeight: 12,
+              symbolWidth: 12,
+              symbolRadius: 1 // 将图例圆角设置为 值越大就变圆点  https://api.highcharts.com.cn/highcharts#legend.symbolRadius
             }
-            _this.drawBarChart()
-          })
-          .catch(err => {
-            // handle error
-            console.error(err)
           })
-      },
-      // 统计样本总数的饼状图
-      drawPieChart () {
-        var chartPie = echarts.init(document.getElementById('deviceChartPie'))
-        chartPie.setOption({
-          title: {
-            text: ''
-          },
-          tooltip: {
-            trigger: 'item',
-            formatter: '{b} {c} ({d}%)'
-          },
-          legend: {
-            orient: 'vertical',
-            left: 'right',
-            itemHeight: 20,
-            itemWidth: 20,
-            data: this.tjzztitles
-          },
-          color: ['#D1EEEE', '#FFE1FF', '#FFA500', '#6A5ACD', '#D1EEEE', '#CAE1FF', '#C0FF3E', '#1E90FF', '#000080'],
-          series: [{
-            name: '样本类型',
-            type: 'pie',
-            radius: '92%',
-            label: {
-              normal: {
-                show: false
+          this.supplierLevelOptions = Highcharts.chart('supplier-level', {
+            chart: {
+              type: 'pie',
+              marginLeft: 1, // 饼图距左距离
+              options3d: {
+                enabled: true,
+                alpha: 45,
+                beta: 0,
+                viewDistance: 25
               }
             },
-            data: this.tjzzdata
-          }]
-        })
-      },
-      // 容器数据统计柱状图
-      drawBarChart () {
-        let _this = this
-        var chartBar = echarts.init(document.getElementById('deviceChartBar'))
-        chartBar.setOption({
-          title: {
-            text: ''
-          },
-          tooltip: {
-            trigger: 'item',
-            formatter: '({b}) {c}'
-          },
-          xAxis: {
-            data: this.tjdevicex,
-            axisLabel: {
-              interval: 0,
-              rotate: 40
+            title: false,
+            tooltip: {
+              pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+            },
+            plotOptions: {
+              pie: {
+                size: '100%', // 饼图大小
+                allowPointSelect: false, // 设置饼图不可点击选择
+                cursor: 'pointer',
+                depth: 35, // 饼图的厚度
+                dataLabels: {
+                  enabled: false, // 隐藏连线提示
+                  format: '{point.name}'
+                },
+                showInLegend: true,
+                point: {
+                  events: {
+                    legendItemClick: function (e) {
+                      e.preventDefault()
+                    }
+                  }
+                }
+              }
+            },
+            series: [{
+              type: 'pie',
+              name: '占比',
+              // #6c757d #007fbb  #c7000a
+              data: [
+                {
+                  name: '一级供应商 30 家          ',
+                  color: '#60C0DD',
+                  y: 30,
+                  sliced: false, // 是否默认突出
+                  selected: false
+                }, {
+                  name: '二级制造商 12 家          ',
+                  color: '#E87C25',
+                  y: 12,
+                  sliced: false, // 是否默认突出
+                  selected: false
+                }, {
+                  name: '二级贸易/代理商 42 家       ',
+                  color: '#007fbb',
+                  y: 42,
+                  sliced: false, // 是否默认突出
+                  selected: false
+                }
+              ]
+            }],
+            credits: {
+              enabled: false // 不显示LOGO
+            },
+            legend: {
+              enabled: true,
+              layout: 'vertical',
+              align: 'right',
+              verticalAlign: 'bottom',
+              borderWidth: 0,
+              borderRadius: 0,
+              itemMarginTop: 10,
+              itemMarginBottom: 10,
+              itemStyle: {
+                fontWeight: 'bold',
+                fontSize: 18 // 图例项文字大小
+              },
+              squareSymbol: true, // 默认就是true
+              itemDistance: 150, // 图例项间距
+              symbolHeight: 12,
+              symbolWidth: 12,
+              symbolRadius: 1 // 将图例圆角设置为 值越大就变圆点  https://api.highcharts.com.cn/highcharts#legend.symbolRadius
             }
-          },
-          yAxis: {},
-          series: [{
-            name: '容器类型',
-            type: 'bar',
-            label: {
-              normal: {
-                show: false
+          })
+          this.supplierScaleOption = Highcharts.chart('supplier-scale', {
+            chart: {
+              type: 'pie',
+              marginLeft: 1, // 饼图距左距离
+              options3d: {
+                enabled: true,
+                alpha: 45,
+                beta: 0,
+                viewDistance: 25
               }
             },
-            data: this.tjdevicey,
-            itemStyle: {
-              normal: {
-                color: function (params) {
-                  var colorList = _this.tjdevicecolor
-                  return colorList[params.dataIndex]
+            title: false,
+            tooltip: {
+              pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+            },
+            plotOptions: {
+              pie: {
+                size: '100%', // 饼图大小
+                allowPointSelect: false, // 设置饼图不可点击选择
+                cursor: 'pointer',
+                depth: 35, // 饼图的厚度
+                dataLabels: {
+                  enabled: false, // 隐藏连线提示
+                  format: '{point.name}'
+                },
+                showInLegend: true,
+                point: {
+                  events: {
+                    legendItemClick: function (e) {
+                      e.preventDefault()
+                    }
+                  }
                 }
               }
+            },
+            series: [{
+              type: 'pie',
+              name: '占比',
+              // #6c757d #007fbb  #c7000a
+              data: [
+                {
+                  name: '注册资金500万以下 30 家',
+                  color: '#FE8463',
+                  y: 30,
+                  sliced: false, // 是否默认突出
+                  selected: false
+                }, {
+                  name: '注册资金500万-1000万 12 家',
+                  color: '#60C0DD',
+                  y: 12,
+                  sliced: false, // 是否默认突出
+                  selected: false
+                }, {
+                  name: '注册资金1000万-2000万 42 家',
+                  color: '#E87C25',
+                  y: 42,
+                  sliced: false, // 是否默认突出
+                  selected: false
+                }, {
+                  name: '注册资金2000万-5000万 42 家',
+                  color: '#007fbb',
+                  y: 42,
+                  sliced: false, // 是否默认突出
+                  selected: false
+                }
+              ]
+            }],
+            credits: {
+              enabled: false // 不显示LOGO
+            },
+            legend: {
+              enabled: true,
+              layout: 'vertical',
+              align: 'right',
+              verticalAlign: 'bottom',
+              borderWidth: 0,
+              borderRadius: 0,
+              itemMarginTop: 10,
+              itemMarginBottom: 10,
+              itemStyle: {
+                fontWeight: 'bold',
+                fontSize: 18 // 图例项文字大小
+              },
+              squareSymbol: true, // 默认就是true
+              itemDistance: 10, // 图例项间距
+              symbolHeight: 12,
+              symbolWidth: 12,
+              symbolRadius: 1 // 将图例圆角设置为 值越大就变圆点  https://api.highcharts.com.cn/highcharts#legend.symbolRadius
             }
-          }]
-        })
-      },
-      // 折线图
-      drawContractline (val, xdata, ydata) {
-        let _this = this
-        var chartBar = echarts.init(document.getElementById(val))
-        chartBar.setOption({
-          title: {
-            text: ''
-          },
-          tooltip: {
-            trigger: 'axis'
-          },
-          xAxis: {
-            type: 'category',
-            boundaryGap: false,
-            data: xdata
-          },
-          yAxis: {
-            type: 'value'
-          },
-          series: [{
-            data: ydata,
-            type: 'line'
-          }]
+          })
         })
       }
     }
@@ -438,33 +442,60 @@
     flex-direction: column;
     .todo-box {
       display: flex;
-      height: 20%;
-      padding-top: 0px;
+      height: 25%;
+      padding-top: 0;
       margin-bottom: 1%;
       .todo-box-item {
         width: 20%;
         margin: 0 5px;
-        border: 1px solid #F6931F
+        background-color: white;
       }
     }
     .chart-box {
       width: 100%;
-      height: 80%;
-      padding-top: 0px;
+      height: 75%;
+      padding-top: 0;
       margin-bottom: 1%;
       .chart-box-row {
         display: flex;
         width: 100%;
         height: 50%;
-        padding-top: 0px;
+        padding-top: 0;
         margin-bottom: 1%;
         .chart-box-row-item {
+          position: relative;
           width: 50%;
           height: 100%;
-          margin: 0 5px;
-          padding-top: 0px;
-          border: 1px solid #00ffff;
-          margin-bottom: 1%
+          padding-top: 0;
+          margin: 0 7px 1%;
+          background-color: white;
+          .item-more-button {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            /*display:table-cell;*/
+            vertical-align:middle;
+            /*height: 15%;*/
+            /*padding-top: 20px;*/
+            font-size: 16px;
+            text-align: right;
+            color: #2F79F6;
+            align-items: center;
+            justify-content: flex-end;
+            padding-right: 20px;
+          }
+          .item-chart-body {
+            height: 100%;
+            text-align: left;
+            position: relative;
+            .item-high-chart {
+              position: absolute;
+              left: 40px;
+              margin: 0 auto;
+              width: 80%;
+              height: 100%;
+            }
+          }
         }
       }
     }