在vue 2.5 中使用highcharts图表

1、使用环境环境:

dependencies:{
		...
		"vue": "^2.5.16" ,
 		"highcharts": "^8.2.2",
	}

2、使用步骤
安装: npm install highcharts-S 或者 cnpm install highcharts -S
在需要的文件中引入 import HighCharts from "highcharts";
我这边是在Home组件中使用到，如下图:

3、Home.vue文件

<template>
  <!--首页-->
  <div>

    <div>
      <div id="content"></div>
    </div>


  </div>
</template>

<script>
var pieOption = {
  credits:{
    enabled: false,
  },
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
  },
  title: {
    text: '2018年1月浏览器市场份额'
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: true,
        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
        style: {
          // color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
        }
      }
    }
  },
  series: [{
    name: 'Brands',
    colorByPoint: true,
    data: [{
      name: 'Chrome',
      y: 61.41,
      sliced: true,
      selected: true
    }, {
      name: 'Internet Explorer',
      y: 11.84
    }, {
      name: 'Firefox',
      y: 10.85
    }, {
      name: 'Edge',
      y: 4.67
    }, {
      name: 'Safari',
      y: 4.18
    }, {
      name: 'Sogou Explorer',
      y: 1.64
    }, {
      name: 'Opera',
      y: 1.6
    }, {
      name: 'QQ',
      y: 1.2
    }, {
      name: 'Other',
      y: 2.61
    }]
  }]
}
import HighCharts from "highcharts";

export default {
  name: "Home",
  data() {
    return {
      options: pieOption
    }
  },
  mounted() {
    HighCharts.chart("content", this.options);
  }
}
</script>

<style scoped>

</style>

最后完成效果:

highcharts官网地址:https://www.highcharts.com.cn/demo/highcharts