highcharts 3d功能饼状图

下载依赖highcharts": "9.3.2"

main.js 引入

//引入3decharts

import highcharts from 'highcharts';

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

highcharts3d(highcharts);

使用组件页面index.vue

 <Pie2 :data="patrolNumAnalysisInfo" />

值：

let patrolNumAnalysisInfo = {

        check: 0,

        keep: 1,

       repair: 0,

}

<template>
  <div :id="id" style="width: 100%; height: 100%" />
</template>

<script>
import HighCharts from 'highcharts';
import { guid } from '@/utils/util';
import { reactive, toRefs, onMounted, watch, nextTick } from 'vue';

export default {
  name: 'Pie2',
  props: {
    data: Object,
  },
  setup(props) {
    const state = reactive({
      id: guid(),
      chart: null,
    });
    const resizeTheChart = () => {
      if (state.chart) {
        state.chart.zoom();
      }
    };
    const init = () => {
      let check,
        keep,
        repair,
        hisrainlist = [];
      check = props.data.check;
      keep = props.data.keep;
      repair = props.data.repair;
      let option = {
        chart: {
          type: 'pie', //饼图
          backgroundColor: 'transparent',
          options3d: {
            enabled: true, //使用3d功能
            alpha: 45, //延y轴向内的倾斜角度
          },
        },
        title: {
          style: {
            color: 'transparent',
          },
        },
        credits: {
          enabled: false, // 禁用版权信息
        },
        tooltip: {
          backgroundColor: '#F5F8FA',
          borderColor: 'transparent',
          formatter: function () {
            var s = this.point.options.name + ':' + this.point.options.y;
            return s;
          },
          animation: true, // 是否启用动画效果
          style: {
            // 文字内容相关样式\
            fontSize: '14px',
            fontFamily: 'Alibaba PuHuiTi',
            color: '#666666',
          },
        },
        legend: {
          align: 'left',
          layout: 'vertical',
          x: 20,
          y: -40,
          width: 120,
          symbolHeight: 10,
          symbolPadding: 10,
          symbolRadius: 0,
          symbolWidth: 10,
          itemStyle: {
            color: 'rgba(166, 201, 203, 1)',
            fontSize: '14px',
            fontWeight: 500,
          },
          itemMarginBottom: 10,
          navigation: {
            enabled: false,
          },
          itemHoverStyle: {
            color: '#fff',
          },
          labelFormatter: function () {
            let str = '';
            str += `<div style="display:flex; align-items:center;just-content:space-around">
            <div>${this.options.name}</div> <div>${this.options.y}</div>
            </div>`;
            return str;
          },
        },
        plotOptions: {
          pie: {
            innerSize: 100,
            allowPointSelect: true, //每个扇块能否选中
            cursor: 'pointer', //鼠标指针
            depth: 90, //饼图的厚度
            showInLegend: true,
            dataLabels: {
              enabled: true, //是否显示饼图的线形tip
              style: {
                color: 'rgba(93, 245, 255, 1)',
                fontSize: '12px',
                fontWeight: '500',
              },
            },
            events: {
              click: function (e) {},
            },
            center: ['50%', '25%'],
          },
        },
        series: [
          {
            type: 'pie',
            size: '120%',
            innerSize: '60%',
            data: [
              ['巡检次数', check],
              ['保养次数', keep],
              ['维修次数', repair],
            ],
            dataLabels: {
              enabled: true,
              // connectorColor: "rgba(93, 245, 255, 1)", // 连接线颜色，默认是扇区颜色
              distance: 20, // 数据标签与扇区距离
              formatter: function (val) {
                //通过函数判断是否显示数据标签，为了防止数据标签过于密集
                return this.point.options.name + ':' + this.point.options.y;
              },
            },
            colors: [
              'rgba(50, 206, 228, .8)',
              'rgba(207, 160, 36, .8)',
              'rgba(23, 213, 171, .8)',
              'rgba(243, 100, 100, .8)',
              'rgba(9, 145, 253, .8)',
            ],
          },
        ],
      };
      HighCharts.chart(state.id, option);
    };
    watch(
      () => props.data,
      (newVal, oldVal) => {
        init();
      }
    );
    onMounted(() => {
      nextTick(() => {
        props.data && init();
        window.addEventListener('resize', resizeTheChart);
      });
    });
    return {
      ...toRefs(state),
      init,
      resizeTheChart,
    };
  },
};
</script>

<style lang="less" scoped>
.legend {
  position: absolute;
  top: 40px;
  left: 40px;
  .title {
    padding: 10px 0 0 10px;
    height: 40px;
    font-size: 16px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #1dfdf8;
  }
  ul {
    padding: 0 10px;
    li {
      // display: flex;
      // align-items: center;
      line-height: 30px;
      .color {
        margin-top: 10px;
        float: left;
        width: 10px;
        height: 10px;
        &.class0 {
          background: #4ce6e4;
        }
        &.class1 {
          background: #f88300;
        }
        &.class2 {
          background: #67a4e1;
        }
        &.class3 {
          background: #a48fbd;
        }
        &.class4 {
          background: #e5ba52;
        }
        &.class5 {
          background: #fff529;
        }
      }
      .name {
        margin: 0 10px;
        font-size: 14px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #d5fffe;
      }
      .value {
        font-size: 16px;
        font-family: DIN;
        font-weight: 500;
        color: #ffffff;
        float: right;
      }
    }
  }
}
</style>