vue或webpack加载highcharts与highcharts-3d

木心操作2024-02-22 19:57

highcharts与highcharts-3d下载

bash 复制代码

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

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

引入

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

javascript 复制代码

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

调用

在vue中使用

javascript 复制代码

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]
            ]
          }
        ]
      })
    }
  }
})