Vue-cil项目中制作highcharts3D柱状图（鼠标控制旋转效果，图例点击效果）

先看效果图

基于highcharts官网的实例，使用的是JQuery的方法。
在vue项目中无法识别$,因此需要先引入JQuery包

npm install jquery

在main.js中全局注册：

import $ from 'jquery'
Vue.prototype.$ = $

在新建的.vue文件中：

import $ from 'jquery'
import Highcharts from 'highcharts'

在template下写入前端代码：

<div id="container" style="border: 1px solid black;height:750px;background:rgb(84, 92, 100)"></div>

在axios获取数据后进行作图：

const chart = Highcharts.chart('container', {
        chart: {
          backgroundColor: {
            linearGradient: [0, 0, 500, 500],
            stops: [
              [0, 'rgb(84, 92, 100)'],
              [1, 'rgb(84, 92, 100)']
            ]
          },
          type: 'column',
          options3d: {
            enabled: true,
            alpha: 20, //初始状态下，所看到的highcharts图的内旋视角
            beta: 0, //初始状态下，所看到的highcharts图的外旋视角
            depth: (process.length * 100), // 初始状态下，highcharts图纵深的长度（我这里为图例的个数乘以100）
            viewDistance: 5,
            frame: {
              bottom: {
                size: 1,
                color: 'rgba(0, 0, 0, 0.05)'
              }
            }
          }
        },
        xAxis: {
          categories: time,
          // type: 'category',
          gridLineWidth: 1,
          title: {
            text: '时间',
            style: {
              color: '#E0E0E3'
            }
          },
          gridLineColor: '#707073',
          labels: {
            style: {
              color: '#E0E0E3'
            }
          }
        },
        yAxis: [{
          min: 0,
          title: {
            text: '数量(个)',
            style: {
              color: '#E0E0E3'
            }
          },
          gridLineColor: '#707073',
          labels: {
            style: {
              color: '#E0E0E3'
            }
          }
        }],
        zAxis: {
          min: 0,
          max: process.length - 1,
          title: {
            text: '工序',
            style: {
              color: '#E0E0E3'
            }
          },
          categories: process,
          gridLineColor: '#707073',
          labels: {
            style: {
              color: '#E0E0E3'
            }
          }
        },
        tooltip: {
          // shared: true,
          formatter: function () {
            return '<b>时间：' + this.point.name + '</b><br><b>总投入：' + this.point.y + '</b><br><b>通过：' + this.point.pass + '</b>'
          }
        },
        plotOptions: {
          series: {
            groupZPadding: 50,
            depth: 50,
            groupPadding: 0,
            grouping: false,
            events: {
              // 图例点击的事件（初始状态下，点击一个图例，会隐藏那个其他图例，单独显示点击的图例）
              legendItemClick: function (e) {
                var series = this.chart.series
                var mode = that.getVisibleMode(series, this.name)
                var enableDefault = false
                if (!this.visible) {
                  enableDefault = true
                } else if (mode === 'all-visible') {
                  series.forEach((series, k) => {
                    series.hide()
                  })
                  this.show()
                } else if (mode === 'all-hidden') {
                  series.forEach((series, k) => {
                    series.show()
                  })
                } else {
                  enableDefault = true
                }
                return enableDefault
              }
            }
          },
          column: {
            grouping: false,
            shadow: false,
            borderWidth: 0,
            dataLabels: {
              enabled: false
            }
          }
        },
        legend: {
          enabled: true
        },
        credits: {
          enabled: false // 禁用网址
        },
        series: series
      })

鼠标控制旋转的功能：

$(chart.container).on('mousedown.hc touchstart.hc', function (eStart) {
        eStart = chart.pointer.normalize(eStart)
        var posX = eStart.pageX
        var posY = eStart.pageY
        var alpha = chart.options.chart.options3d.alpha
        var beta = chart.options.chart.options3d.beta
        var sensitivity = 1 // lower is more sensitive
        $(document).on({
          'mousemove.hc touchdrag.hc': function (e) {
            // Run beta
            var newBeta = beta + (posX - e.pageX) / sensitivity
            chart.options.chart.options3d.beta = newBeta
            // Run alpha
            var newAlpha = alpha + (e.pageY - posY) / sensitivity
            chart.options.chart.options3d.alpha = newAlpha
            chart.redraw(false)
          },
          'mouseup touchend': function () {
            $(document).off('.hc')
          }
        })
      })