vue或webpack加载highcharts与highcharts-3d

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]
            ]
          }
        ]
      })
    }
  }
})
相关推荐
_丿丨丨_4 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
拼图2098 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode8 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
hbrown9 小时前
Flask+LayUI开发手记(十一):选项集合的数据库扩展类
前端·数据库·python·layui