3d饼图

一：

highcharts在vue中的使用和配置方法

npm install vue-highcharts --save

由于vue-highcharts依赖于highcharts，我们还需要安装后者

npm install highcharts --save

二：

安装完成后，进入项目main.js进行配置：

import highcharts from 'highcharts'

import VueHighCharts from 'vue-highcharts'

import highcharts3d from 'highcharts/highcharts-3d'

highcharts3d(highcharts)

OK，到此为止已经在vue中配置好highcharts,接下来根据API绘制一份3d饼图

新建一个饼图的组件：

<template>
  <div class="container">
    <div id="yeartest" />
  </div>
</template>
<script>
import HighCharts from 'highcharts'
export default {
  props: {
    // id: {
    //   type: String
    // },
    // option: {
    //   type: Object
    // }
  },
  data() {
    return {

    }
  },
  mounted() {
    this.pieChart()
  },
  methods: {
    pieChart() {
      const yeartest = document.getElementById('yeartest')
      var option1 = {
        credits: { enabled: false },
        chart: {
          type: 'pie', // 饼图
          options3d: {
            enabled: true, // 使用3d功能
            alpha: 60, // 延y轴向内的倾斜角度
            beta: 0
          }
        },
        // colors: ['#096fd3', '#fd7523'], // 饼图颜色设置
        title: {
          text: '年度完成进度'// 图表的标题文字
        },
        subtitle: {
          text: ''// 副标题文字
        },
        // tooltip: {
        //   pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        // },
        plotOptions: {
          pie: {
            allowPointSelect: true, // 每个扇块能否选中
            cursor: 'pointer', // 鼠标指针
            depth: 30, // 饼图的厚度
            dataLabels: {
              enabled: true,// 是否显示饼图的线形tip
              format: '{point.name}{point.percentage:.2f} %',
            }
          },
        },
        series: [
          {
            type: 'pie',
            name: '进度', // 统一的前置词,非必须
            data: [
              ['已经完成电量', 12], // 模块名和所占比，也可以{name: '测试1',y: 12}
              ['未完成电量', 23]
            ]
          }
        ]
      }
      HighCharts.chart(yeartest, option1)
    }
  }
}
</script>

<style scoped>
  /* 容器 */
  .container {
    width: 500px;
    height: 500px;
  }
</style>

猜你喜欢