vue highcharts 3d环形图

1. 安装

npm install -S vue-highcharts
npm install highcharts --save

2. main.js引入

import Highcharts from 'highcharts'
 
import Highcharts3d from 'highcharts/highcharts-3d'
 
Highcharts3d(Highcharts)

3. 静态测试代码

<template>
  <div class="charts" style="width:100%;height:100%">
    <div :id="id" :option="option" class="echart-container"></div>
  </div>
</template>
 
<script>
import HighCharts from 'highcharts'
export default {
  data() {
    return {
      charts: null,
      id: 'echart-container',
      option:{
        chart: {
          type: "pie",
          backgroundColor: "rgba(0, 0, 0, 0)",//去掉白色背景
          marginTop:10,//上边距
          options3d: {
              enabled: true,//3D启用
              alpha: 50,//内旋转角度
              beta: 0,//外选择角度
          },
        },
        title: {
            text: "",
        },
        tooltip: {
            backgroundColor: '#939393',   // 背景颜色
            borderColor: 'black',         // 边框颜色
            borderRadius: 10,             // 边框圆角
            borderWidth: 0,               // 边框宽度
            shadow: false,                 // 是否显示阴影
            style: {                      // 文字内容相关样式
                color: "#FFFFFF",
                fontSize: "12px",
                fontWeight: "blod",
                fontFamily: "Courir new"
            }
        },
        colors: ['#637FEA', '#5AACD5', '#954CD9', '#EDCB30', '#25BD97'], //颜色
        plotOptions: {
            pie: {
              innerSize: '50%',//设置环，内环占比
              depth:50 ,//显示3d效果
              dataLabels: { //数据标签
                  enabled: true,
                  distance: "10%",
                  style: {
                    textOutline: "none", //去掉文字白边
                    color: '#b8c3d2',
                  },
                  // format: '{point.name}'
                  // formatter: function () {
                  //   return '<span >' + this.point.name + '</span><br/><span>占比：' + this.percentage.toFixed(2) + '%</span><br/>' + (this.y) + '人</span>';
                  // },
                  formatter: function () {
                    if(this.y>0){
                      return '<span >' + this.point.name + '</span><br/><span>占比：' + this.percentage.toFixed(2) + '%</span><br/>' + (this.y) + '人</span>';
                    }
                    
                  },
              },
              center: ['50%', '50%']
            }
        },
        yAxis: {        
          min:0.0001,
          type: 'logarithmic'
      },
        series: [ //数据列
            {
                type: "pie",
                data: [
                    ["邮政包裹", 30],
                    ["圆通快递", 20],
                    ["京东快递", 30],
                ],
            },
        ],
      }

    }
  },
  created() {
    this.setOption()
  },
  methods: {
    setOption() {
      if (this.charts) {
        this.charts.destroy()
      }
      this.charts = HighCharts.chart(this.id, this.option)
      this.charts.reflow()
    }
  }
}
</script>
<style lang="less" scoped>
.echart-container {
    width: 100%;
    height: 100%;
    margin:0 auto;
  }
  // 去除水印
  .highcharts-credits {
    display: none;
  }
</style>

5. 完整代码，因为动态渲染，接口在父组件调用的，所以 测试直接看上面3

<template>
  <div class="charts" style="width:100%;height:100%">
    <div :id="id" :option="option" class="echart-container"></div>
  </div>
</template>
 
<script>
import HighCharts from 'highcharts'
export default {
  props:{ // 这是从父级传入数据，可以直接在次页面写入数据
    allData:{
      type:Object
    }
  },
  watch:{
    allData(newVal) { //监听父组件的数据变化，改变直接重新渲染
      const flg = Object.keys(newVal).length
      if(flg) {
        this.setDom(newVal) 
      }
    },
  },
  data() {
    return {
      charts: null,
      id: 'echart-container',
      option:{
        chart: {
          type: "pie",
          backgroundColor: "rgba(0, 0, 0, 0)",//去掉白色背景
          marginTop:10,//上边距
          options3d: {
              enabled: true,//3D启用
              alpha: 50,//内旋转角度
              beta: 0,//外选择角度
          },
        },
        title: {
            text: "",
        },
        tooltip: {
            backgroundColor: '#939393',   // 背景颜色
            borderColor: 'black',         // 边框颜色
            borderRadius: 10,             // 边框圆角
            borderWidth: 0,               // 边框宽度
            shadow: false,                 // 是否显示阴影
            style: {                      // 文字内容相关样式
                color: "#FFFFFF",
                fontSize: "12px",
                fontWeight: "blod",
                fontFamily: "Courir new"
            }
        },
        colors: ['#637FEA', '#5AACD5', '#954CD9', '#EDCB30', '#25BD97'], //颜色
        plotOptions: {
            pie: {
              innerSize: '50%',//设置环，内环占比
              depth:50 ,//显示3d效果
              dataLabels: { //数据标签
                  enabled: true,
                  distance: "10%",
                  style: {
                    textOutline: "none", //去掉文字白边
                    color: '#b8c3d2',
                  },
                  // format: '{point.name}'
                  // formatter: function () {
                  //   return '<span >' + this.point.name + '</span><br/><span>占比：' + this.percentage.toFixed(2) + '%</span><br/>' + (this.y) + '人</span>';
                  // },
                  formatter: function () {
                    if(this.y>0){
                      return '<span >' + this.point.name + '</span><br/><span>占比：' + this.percentage.toFixed(2) + '%</span><br/>' + (this.y) + '人</span>';
                    }
                    
                  },
              },
              center: ['50%', '50%']
            }
        },
        yAxis: {        
          min:0.0001,
          type: 'logarithmic'
      },
        series: [ //数据列
            {
                type: "pie",
                data: [
                    ["邮政包裹", 30],
                    ["圆通快递", 20],
                    ["京东快递", 30],
                ],
            },
        ],
      }

    }
  },
  created() {
    const flag = Object.keys(this.allData).length
    if(flag) {
      this.setDom(this.allData)
    }
  },
  methods: {
    setDom(res) {
      const obj1 = res.allowanceMap
      const arr1 = Object.keys(obj1)
      const arrNew = []
      arr1.forEach(item => {
        if(!obj1[item]) {
          obj1[item] = 6
        }
        const arrLin = [item,obj1[item]]
        arrNew.push(arrLin)
      })
      this.option.series[0].data = arrNew
      console.log(arrNew,'重组数据')
      this.setOption()
    },
    setOption() {
      if (this.charts) {
        this.charts.destroy()
      }
      this.charts = HighCharts.chart(this.id, this.option)
      this.charts.reflow()
    }
  }
}
</script>
<style lang="less" scoped>
.echart-container {
    width: 100%;
    height: 100%;
    margin:0 auto;
  }
  // 去除水印,不知道为什么没生效
  .highcharts-credits {
    display: none;
  }
</style>

解决水印没有去除问题

将去除水印代码放到全局当中