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