vue或webpack加载highcharts与highcharts-3d-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue或webpack加载highcharts与highcharts-3d。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

highcharts与highcharts-3d下载

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

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

vue或webpack加载highcharts与highcharts-3d,webpack,vue,vue.js,webpack,前端

引入

两种引入 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中使用文章来源地址https://www.toymoban.com/news/detail-836239.html

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的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！