echart 配置

显示echarts数据千位符

<template>
  <div id="vulnerabilityLevel" class="vulnerabilityLevel" />
</template>

<script>
import * as echarts from 'echarts'
import {
    reportByLevel } from '../../../api/coraxObj'
export default {
   
  name: 'VulnerabilityLevel',
  props: ['scan_task_id'],
  data() {
   
    return {
   
      dataList: ''
    }
  },
  mounted() {
   
    this.getRreportByLevel()
  },
  methods: {
   

    getRreportByLevel() {
   
      reportByLevel({
    scan_task_id: this.scan_task_id }).then(res => {
   
        this.dataList = res.results.data
        // 初始化ecarts
        this.initChart()
      })
    },
    initChart() {
   
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(
        document.getElementById('vulnerabilityLevel')
      )
      const option = {
   
        title: {
   
          text: '缺陷数量统计',
          subtext: '单位：个',
          textStyle: {
   
            // 文字颜色
            color: '#333333',
            // 字体风格,'normal','italic','oblique'
            fontStyle: 'normal',
            // 字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
            fontWeight: 'bold',
            // 字体系列
            fontFamily: 'sans-serif',
            // 字体大小
            fontSize: '1rem'
          },
          subtextStyle: {
    // 副标题文本样式{"color": "#aaa"}
            fontSize: '0.8rem'

          }
        },
        // 提示信息
        tooltip: {
   
          trigger: 'item'
        },
        legend: {
   
          orient: 'vertical',
          left: 'right',
          top: 'bottom'
        },
        series: [
          {
   
            // 显示数据
            label: {
   
              formatter: '{c}   ({per|{d}%})\n',
              minMargin: 1,
              edgeDistance: 2,
              lineHeight: 15,

              rich: {
   
                time: {
   
                  fontSize: 10,
                  color: '#999'
                }
              }
            },
            // 设置数据上面的线
            labelLayout: function(params) {
   
              console.log(params)
              var isLeft = params.labelRect.x < myChart.getWidth() / 2
              var points = params.labelLinePoints
              // Update the end point.
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width

              return {
   
                labelLinePoints: points
              }
            },
            top: '24',
            type: 'pie',
            radius: '55%',
            // 数据
            data: [
              {
   
                value: this.dataList.high,
                name: '高',
                itemStyle: {
   
                  color: '#FF7279'
                }
              },
              {
   
                value: this.dataList.Medium,
                name: '中',
                itemStyle: {
   
                  color: '#FFC73E'
                }
              },
              {
   
                value: this.dataList.Low,
                name: '低',
                itemStyle: {
   
                  color: '#61DFC4'
                }
              }
            ],
            emphasis: {
   
              itemStyle: {
   
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            // 设置线的样式
            itemStyle: {
   
              normal: {
   
                // 设置线的长度和位置
                label: {
   
                  minMargin: 1,
                  edgeDistance: 2,
                  lineHeight: 15,
                  rich: {
   
                    time: {
   
                      fontSize: 10,
                      color: '#999'
                    }
                  },
                  // 设置线上的数据的位置
                  position: 'outside',
                  padding: [-10, 10, 10, 10],
                  // 添加千位符
                  formatter: function(p) {
   
                    let value = p.value
                    if (value > 999) {
   
                      const parts = value.toString().split('.')
                      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
                      value = parts.join('.')
                    }
                    const res = value + ' (' + p.percent + '%)'
                    return res
                  }
                }
              }
            },
            // 设置线的行高
            labelLine: {
   
              length: 15,
              length2: 3,
              maxSurfaceAngle: 80
            }

          }
        ]
      }
      myChart.setOption(option)
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
   
        myChart.resize()
      })