3D饼图

1.下载

npm install vue-highcharts --save

npm install highcharts--save

2.main.js引入

import highcharts from 'highcharts'

import VueHighCharts from 'vue-highcharts'

import highcharts3d from 'highcharts/highcharts-3d'

Vue.use(VueHighCharts)

highcharts3d(highcharts)

3.饼图组件

<template>
<div :option="option" :style="{height:height/75+'rem',width:width}">
</div>
</template>
<script>
import HighCharts from 'highcharts'
export default {
  props: {
    option: {
      type: Object
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "260"
    }
  },
  mounted() {
    HighCharts.chart(this.$el, this.option)
  }
}
</script>
 
<style lang="scss" scoped>

</style>

4.使用

<template>
<div class="land_co land-wrap">
  <div class="land_lyxz">
    <jump name="全市土地储备" :index="index"></jump>
    <div class="content">
      <h2 class="land_title">
        土地储备目标任务(亩)
        <strong>{{area}}</strong>
      </h2>
      <pie :option="pieOption"></pie>
    </div>
  </div>
</div>
</template>

<script>
import jump from "@/components/jump";
import pie from "../components/chart/pie3D";
export default {
  props: {
    index: {
      default: 1
    }
  },
  data() {
    return {
      area: "23,519",
      pieOption: {
        chart: {
          type: "pie", //饼图
          options3d: {
            enabled: true, //使用3d
            alpha: 20, //延y轴向内的倾斜角度
            beta: 0
          }
        },
        // highchart 去掉highcharts.com
        credits: {
          enabled: false
        },
        title: {
          text: ""
        },
        subtitle: {
          text: ""
        },
        tooltip: {
          enabled: false
        },
        plotOptions: {
          pie: {
            allowPointSelect: true, //每个扇块能否选中
            cursor: "pointer", //鼠标指针
            depth: 30, //饼图的厚度
            center: ['46%', '50%'],
            dataLabels: {
              enabled: true,
              format: '<span style="font-size:12px;color:#FDAF33">{point.name}</span><br><b style="font-size:15px;font-weight:bold">9,843</b><br><b style="font-size:12px;">41.85%</b>',
              distance: 30,
              filter: {
                property: 'percentage',
                operator: '<',
                value: 50
              }
            }
          }
        },
        colors: ["#FDAF33", "#AFCDE0"],
        series: [{
          type: "pie",
          name: "",
          data: [{
              name: '累计实施',
              y: 41,
              sliced: true
            },
            ['累计实施', 59]
          ],

        }]
      }
    };
  },
  methods: {},
  watch: {
    jsyd: {
      handler() {
        this.$nextTick(() => {});
      },
      deep: true
    }
  },
  mounted() {},
  directives: {},
  components: {
    jump,
    pie
  }
};
</script>

<style lang="scss" scoped>
@import "../../../styles/mixin";
@import "../../../styles/zrzy_land_lyxz";
.land-wrap {
  .content {
    padding-right: 20px;
    margin-right: 20px;
    box-sizing: border-box;
  }
}
</style>