HighCharts的安装及使用

1.配置HighCharts环境

1.1安装HighCharts

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

1.2 在main.js全局引入

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

2.HighCharts的使用

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

import HighCharts from "highcharts";

<template>
  <div class="app-container">
    <div class="charts">
      <div :id="id" :option="option"></div>
    </div>
  </div>
</template>

<script>
import HighCharts from "highcharts";
export default {
  data() {
    return {
      id: "test",
      option: {
        chart: {
          type: "pie", //饼图
          backgroundColor: "rgb(242, 242, 242)",
          options3d: {
            enabled: true, //使用3d功能
            alpha: 60, //延y轴向内的倾斜角度
            beta: 0,
          },
        },
        credits: {
          enabled: false, //不显示LOGO
        },
        title: {
          text: "状态图", //图表的标题文字
        },
        subtitle: {
          text: "", //副标题文字
        },
        tooltip: {
          pointFormat: "{series.name}: {point.percentage:.2f}%",
          style: {
            color: "#000",
          },
        },
        plotOptions: {
          pie: {
            allowPointSelect: true, //每个扇块能否选中
            cursor: "pointer", //鼠标指针
            depth: 35, //饼图的厚度
            dataLabels: {
              enabled: true, //是否显示饼图的线形tip
              formatter: function () {
                return (
                  '<span style="color:#000">' +
                  this.point.name +
                  "</span><br/><span>占比：" +
                  this.percentage.toFixed(2) +
                  "%</span><br/>" +
                  "</span>"
                );
              },
              style: {
                // textOutline: "0px 0px ",
                fontSize: 15,
                color: "#000",
              },
            },
            colors: [
              "#714fe3",
              "rgb(153, 153, 255)",
              "rgb(153, 51, 102)",
              "rgb(255, 255, 204)",
            ],
          },
        },
        series: [
          {
            type: "pie",
            name: "占比", //统一的前置词,非必须
            data: [
              { name: "二级单位", y: 10 }, //模块名和所占比，也可以{name: '测试1',y: 12}
              { name: "三级单位", y: 10 },
              { name: "四级单位", y: 10 },
            ],
          },
        ],
      },
    };
  },

  created() {},
  mounted() {
    HighCharts.chart(this.id, this.option);
  },
  methods: {},
};
</script>