vue highcharts使用

1、安装 highcharts

npm install highcharts --save

2、安装highcharts-vue

npm install highcharts-vue

3、在main中引入

import HighchartsVue from 'highcharts-vue'
Vue.use(HighchartsVue)

4、使用

html代码

<highcharts :options="chartOptions"></highcharts>

data中的数据

  data() {
    return {
      chartOptions: {
        series: [
          {
            data: [1, 2, 3], // sample data
          },
        ],	
      },
    };
  },

效果图

5、3d图形的使用

main.js中加入

import highcharts from 'highcharts'

import highcharts3d from 'highcharts/highcharts-3d'

highcharts3d(highcharts)

6方法任一都可

6.1 3d图形的实现（一）通过highcharts标签实现

将配置项的内容改为3d配置项的内容

<template>
  <div>
    <highcharts :options="chartOptions"></highcharts>
  </div>
</template>

<script>
export default {
  name: "",
  // 接收父组件传递过来的参数
  props: {},
  // 注册组件
  components: {},
  // 定义变量
  data() {
    return {
      chartOptions: {
        chart: {
          type: "pie",
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0,
          },
        },
        title: {
          text: "2014年某网站不同浏览器访问量占比",
        },
        tooltip: {
          pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            depth: 35,
            dataLabels: {
              enabled: true,
              format: "{point.name}",
            },
          },
        },
        series: [
          {
            type: "pie",
            name: "浏览器占比",
            data: [
              ["Firefox", 45.0],
              ["IE", 26.8],
              {
                name: "Chrome",
                y: 12.8,
                sliced: true,
                selected: true,
              },
              ["Safari", 8.5],
              ["Opera", 6.2],
              ["Others", 0.7],
            ],
          },
        ],
      },
    };
  },
  // 事件方法执行
  methods: {},
  // 页面初始化方法
  mounted() {},
  // 监听值变化
  watch: {},
  // 计算
  computed: {},
};
</script>

<style scoped lang='scss'>
</style>

效果图

6.2 3d图形的实现（二）通过HighCharts方法实现 (建议)

在需要的地方引入前5步的基础上

import HighCharts from 'highcharts'

全部代码

<template>
  <div>
    <div :id="id" :option="option"></div>
  </div>
</template>

<script>
import HighCharts from "highcharts";
export default {
  name: "",
  // 接收父组件传递过来的参数
  props: {},
  // 注册组件
  components: {},
  // 定义变量
  data() {
    return {
      id: "test",
      option: {
        chart: {
          type: "pie", //饼图
          options3d: {
            enabled: true, //使用3d功能
            alpha: 60, //延y轴向内的倾斜角度
            beta: 0,
          },
        },
        title: {
          text: "测试用", //图表的标题文字
        },
        subtitle: {
          text: "", //副标题文字
        },

        plotOptions: {
          pie: {
            allowPointSelect: true, //每个扇块能否选中
            cursor: "pointer", //鼠标指针
            depth: 35, //饼图的厚度
            dataLabels: {
              enabled: true, //是否显示饼图的线形tip
            },
          },
        },
        series: [
          {
            type: "pie",
            name: "测试用1", //统一的前置词,非必须
            data: [
              ["测试1", 12], //模块名和所占比，也可以{name: '测试1',y: 12}
              ["测试2", 23],
              ["测试3", 19],
              ["测试4", 29],
            ],
          },
        ],
      },
    };
  },
  // 事件方法执行
  methods: {},
  // 页面初始化方法
  mounted() {
    HighCharts.chart(this.id, this.option)
  },
  // 监听值变化
  watch: {},
  // 计算
  computed: {},
};
</script>

<style scoped lang='scss'>
</style>

效果图

去掉默认title

          title: {
            text: null
          },

去掉版权

和title同级

   credits: { enabled: false},