vue或webpack加载highcharts与highcharts-3d

本文主要是介绍vue或webpack加载highcharts与highcharts-3d，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

highcharts与highcharts-3d下载

https://jshare.com.cn/demos/hhhhiG

点击对应的文件可打开，复制代码到（创建一个同名文件）里面；放到项目对应目录下

引入

两种引入 highcharts.js 方法皆可用；注意 highcharts-3d 引入方式

import Highcharts from './static/js/highcharts.js'
// const Highcharts = require('./static/js/highcharts.js')
require('./static/js/highcharts-3d')(Highcharts)

 调用

在vue中使用

new Vue({el: '#app',data() {return {}},mounted() {this.$nextTick(() => {this.renderHighcharts()})},methods: {renderHighcharts() {var chart = Highcharts.chart('container', {chart: {type: 'pie',backgroundColor: 'rgba(0,0,0,0)',options3d: {enabled: true,alpha: 45,beta: 0}},title: {text: '访问量占比',style: {color: 'white',fontWeight: 'bold'}},credits: {enabled: false //去除图表右下角版权信息},tooltip: {pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'},plotOptions: {pie: {allowPointSelect: true,cursor: 'pointer',depth: 35,dataLabels: {enabled: true,format: '{point.name}({point.y})'}}},series: [{type: 'pie',name: '占比',style: {color: 'white'},data: [['Firefox', 45.0],['IE', 26.8],['Safari', 8.5]]}]})}}
})

这篇关于vue或webpack加载highcharts与highcharts-3d的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---