数据可视化大屏项目开发中，需要显示3d饼状图，这里我们使用的是highcharts来实现3d饼状图。

饼状图要求鼠标移上去后，显示详细的数值。默认的情况下，是只显示名称和占比的，tooltip按照我们的要求显示了，但是数字千分位会出现空格，客户不想看到，所以前端仍然要处理一下。

处理前代码

highcharts除了pointFormat过滤数据外，还可以formatter的方式进行过滤。

tooltip: {
  pointFormat: '{point.y}人<br><b>{point.percentage:.1f}%</b>'
},

处理后代码

tooltip: {
    formatter: function () {
    return this.key +
        '<br/><b>人次:' + this.y + '</b><br/>' +
        +this.percentage.toFixed(2) + '%';
    }
},

这样处理后，数字在千分位上就没有空格了。

完整代码

<template>
  <div class="echarts1" :id="className" ref="echarts1">

  </div>
</template>

<script>

import highcharts from "highcharts";
import highcharts3d from 'highcharts/highcharts-3d'

highcharts3d(highcharts)
export default {
  name: 'echarts1',
  components: {},
  data() {
    return {
      className: ''
    }
  },

  props: {
    colorList: {
      type: Array,
      default() {
        return [];
      }
    },
    list: {
      type: Array,
      default() {
        return [];
      }
    },
  },
  computed: {
    listData: function () {
      var that = this;
      var data = []
      that.list.forEach((type) => {
        var data2 = []
        data2.push(type.name)
        data2.push(Number(type.value))
        data.push(data2)
      });
      console.log(data)
      return data
    }
  },
  mounted() {
    this.className = 'container' + this.randomString(10)
    this.$nextTick(() => {
      this.drawLine()
    })
  },
  methods: {
    randomString(e) {
      e = e || 32;
      var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
          a = t.length,
          n = "";
      for (var i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
      return n
    },
    drawLine() {
      var that = this;
      var chart = highcharts.chart(this.className, {
        title: {
          text: ''
        },
        chart: {
          type: 'pie',
          backgroundColor: 'rgba(0,0,0,0)',
          options3d: {
            enabled: true,
            alpha: 60,
            beta: 0
          }
        },
        colors: ['rgba(249, 137, 66, 1)', 'rgba(38, 237, 183, 1)', 'rgba(48, 114, 228, 1)', 'rgba(133, 199, 251, 1)'],
        legend: { // 【图例】位置样式
          backgroundColor: 'rgba(0,0,0,0)',
          shadow: false,
          layout: 'vertical',
          align: 'right', // 水平方向位置
          verticalAlign: 'middle', // 垂直方向位置
          symbolPadding: 10,
          symbolHeight: 10,
          padding: 0,
          itemMarginTop: 5,
          itemStyle: {
            fontSize: '12px',
            color: '#fff'
          }
        },
        credits: {
          enabled: false
        },
        // tooltip: {
        //   pointFormat: '{series.name}: <b>{point.y}<br>{point.percentage:.1f}%</b>'
        // },
        tooltip: {
          formatter: function () {
            return this.key +
                '<br/><b>人次:' + this.y + '</b><br/>' +
                +this.percentage.toFixed(2) + '%';
          }
        },
        plotOptions: {
          pie: {
            allowPointSelect: false,
            cursor: 'pointer',
            depth: 10,
            width: 1,
            size: 80,
            innerSize: 0,
            showInLegend: true,
            lineWidth: 1,
            borderWidth: 1,
            dataLabels: {
              padding: 0,
              format: '{y}<br>({point.percentage:.1f}%)',
              show: false,
              enabled: false,
              style: {
                color: '#fff'
              }
            },
          }
        },
        series: [{
          type: 'pie',
          name: '各年级借阅情况',
          data: that.listData
        }]
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.echarts1 {
  position: relative;
  width: 100%;
  height: calc(100% - 0px);
}

</style>