第一篇：VUE 使用 HighCharts 画 3D环 饼图_vue 3d饼图

<template>
  <div class="container" id="container">
    <div :id="id" :option="option" class="echart-container"></div>
  </div>
</template>
<script>
import HighCharts from 'highcharts'
export default {
  props: {
    // id用于区分多处复用highcharts文件
    id: {
      type: String
    },
    //option 是图表的配置数据
    option: {
      type: Object
    }
  },
  data() {
    return {
      charts: null
    }
  },
  mounted() {
    // 页面加载完成之后再渲染图表
    this.setOption()
  },
  methods: {
    setOption() {
      if (this.charts) {
        this.charts.destroy()
      }
      this.charts = HighCharts.chart(this.id, this.option)
      this.charts.reflow()
    }
  }
}
</script>

<style lang="scss" scoped>
/* 容器 */
::v-deep.container {
  width: 100%;
  height: 100%;
  background: #043b8c;
  .echart-container {
    width: 100%;
    height: 100%;
  }
  // 去除水印
  .highcharts-credits {
    display: none;
  }
}
</style>

4.书写 3D饼/环 需要的相关数据和相关配置。

<template>
  <div class="charts">
    <pie :id="id" :option="option"></pie>
  </div>
</template>

<script>
import pie from './pip.vue'
import HighCharts from 'highcharts'
export default {
  components: {
    pie
  },
  data() {
    return {
      id: 'echart-container',
      option: {
        title: {
          text: null //图表的标题文字
        },
        subtitle: {
          text: null //副标题文字
        },
        tooltip: {
          backgroundColor: '#b2bec3',
          borderColor: '#b2bec3',
          style: {
            color: '#FFFFFF'
          }
        },
        legend: {
          labelFormatter: function() {
            /*
             *  格式化函数可用的变量：this， 可以用 console.log(this) 来查看包含的详细信息
             *  this 代表当前数据列对象，所以默认的实现是 return this.name
             */
            return this.name
          },
          align: 'center', //程度标的目标地位
          verticalAlign: 'bottom', //垂直标的目标地位
          x: 0, //间隔x轴的间隔
          y: 0, //间隔Y轴的间隔
          symbolRadius: 0,
          itemStyle: {
            cursor: 'pointer',
            color: '#FFFFFF'
          },
          itemHoverStyle: {
            color: '#FFFFFF'
          }
        },
        // colors: ['#99FCFF', '#028EEF', '#F04864', '#854BF7'],
        chart: {
          type: 'pie',
          renderTo: 'container',
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          backgroundColor: null,
          animation: false,
          events: {
            load: function() {
              var each = HighCharts.each,
                points = this.series[0].points
              each(points, function(p) {
                p.graphic.attr({
                  translateY: -p.shapeArgs.ran
                })
                p.graphic.side1.attr({
                  translateY: -p.shapeArgs.ran
                })
                p.graphic.side2.attr({
                  translateY: -p.shapeArgs.ran
                })
              })
            }
          },
          options3d: {
            enabled: true,
            alpha: 65,
            beta: 0, //图表视图旋转角度
            viewDistance: 40 //定义图表的浏览长度
          }
        },
        plotOptions: {
          pie: {
            allowPointSelect: false,
            cursor: 'pointer',
            depth: 35,
            innerSize: '80%',
            textShadow: false,
            shadow: false,
            dataLabels: {
              enabled: true,
              formatter: function() {
                return (
                  this.point.name +
                  '<br><p style="color:' +
                  this.color +
                  '">(' +
                  this.y +
                  ',&nbsp' +
                  this.percentage.toFixed(1) +
                  '%)</p>'
                )
              },
              style: {
                color: '#FFFFFF',
                fontSize: '12px',
                textOutline: 'none'
              }
            },
            states: {
              inactive: {
                opacity: 0.7,
                size: '120%'
              },
              hover: {
                halo: {
                  size: '120%',
                  attributes: {
                    fill: HighCharts.getOptions().colors[2],
                    'stroke-width': 2,
                    stroke: HighCharts.getOptions().colors[1]
                  }
                }
              }
            }
          },
          series: {
            point: {
              events: {
                mouseOver: function() {},
                mouseOut: function() {},
                hover: {
                  backgroundColor: '#000000'
                }
              }
            }
          },
          column: {
            events: {}
          }
        },
        series: [
          {
            type: 'pie',
            name: 'Browser share',
            hoverAnimation: true,
            size: '90%',
            startAngle: 0,
            showInLegend: true, // 默认值
            colorByPoint: true,
            data: [
              { name: '个人网银', y: 50, h: 20, sliced: true, selected: true }, //模块名和所占比，也可以{name: '测试1',y: 12}
              { name: '个人手机银行', y: 40, h: 15 }, //模块名和所占比，也可以{name: '测试1',y: 12}
              { name: '企业网银', y: 50, h: 5 }, //模块名和所占比，也可以{name: '测试1',y: 12}
              { name: '企业手机银行', y: 50, h: 10 } //模块名和所占比，也可以{name: '测试1',y: 12}
            ]
          }
        ]
      }
    }
  },
  created() {
    // 设置颜色渐变
    this.setcolor()
    // 设置饼图高度
    this.setOptonHeight()
    // 设置点击事件
    this.setClick()
  },
  mounted() {},
  methods: {
    setOptonHeight() {
      var each = HighCharts.each,
        round = Math.round,
        cos = Math.cos,
        sin = Math.sin,
        deg2rad = Math.deg2rad