HighEcharts在Vue中的组件封装

1、安装

cnpm install highcharts --save

2、组件封装

<!--
 * @message: highcharts组件
-->
<template>
  <div ref="chart" id="container" :style="{width:width,height:height}"></div>
</template>
<script>
import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';
import Highcharts3D from 'highcharts/highcharts-3d';
import cylinder from 'highcharts/modules/cylinder'

HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
cylinder(Highcharts);


export default {
  name: 'highcharts',
  props: {
    width: {
      type: String,
      required: false,
      default: '0px'
    },
    height: {
      type: String,
      required: false,
      default: '0px'
    },
    option: {
      type: Object,
      required: false,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 初始化
    init() {
      // 全局配置，针对页面上所有图表有效,设置背景颜色透明，禁用版权信息
      Highcharts.setOptions({
        chart: {
          backgroundColor: 'rgba(0,0,0,0)',
        },
        credits: {
          enabled: false
        }
      });
      // 图表初始化
      if (this.chart) {
        this.chart.destroy()
      }
      // 3D效果初始化
      this.init3D()
      this.chart = new Highcharts.Chart(this.$refs.chart, this.option)
    },
    // 重绘
    reDraw() {
      this.chart = new Highcharts.Chart(this.$refs.chart, this.option)
    },
    // 初始3D效果
    init3D() {
      var each = Highcharts.each,
          round = Math.round,
          cos = Math.cos,
          sin = Math.sin,
          deg2rad = Math.deg2rad;
      Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'translate', function (proceed) {
        proceed.apply(this, [].slice.call(arguments, 1));
        // Do not do this if the chart is not 3D
        if (!this.chart.is3d()) {
          return;
        }

        //不同高度柱状图
        var series = this,
            chart = series.chart,
            options = chart.options,
            seriesOptions = series.options,
            depth = seriesOptions.depth || 0,
            options3d = options.chart.options3d,
            alpha = options3d.alpha,
            beta = options3d.beta,
            z = seriesOptions.stacking ? (seriesOptions.stack || 0) * depth : series._i * depth;
        z += depth / 2;
        if (seriesOptions.grouping !== false) {
          z = 0;
        }
        each(series.data, function (point) {
          var shapeArgs = point.shapeArgs,
              angle;
          point.shapeType = 'arc3d';
          var ran = point.options.h;
          shapeArgs.z = z;
          shapeArgs.depth = depth * 0.75 + ran;
          shapeArgs.alpha = alpha;
          shapeArgs.beta = beta;
          shapeArgs.center = series.center;
          shapeArgs.ran = ran;
          angle = (shapeArgs.end + shapeArgs.start) / 2;
          point.slicedTranslation = {
            translateX: round(cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)),
            translateY: round(sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad))
          };
        });
      });
      (function (H) {
        H.wrap(Highcharts.SVGRenderer.prototype, 'arc3dPath', function (proceed) {
          // Run original proceed method
          var ret = proceed.apply(this, [].slice.call(arguments, 1));
          ret.zTop = (ret.zOut + 0.5) / 100;
          return ret;
        });
      }(Highcharts));
    }
  },
  // 监听Option的改变,当改变时重新渲染图表
  watch: {
    option: function () {
      this.reDraw()
    }
  }
}
</script>

<style scoped>
</style>

3、基本使用

<template>
  <div id="situation-map">
      <HighCharts :width="'100%'" :height="'100%'" :option="educationOption"/>
  </div>
</template>
<script>
export default {
  data() {
    return {
      educationOption: {}
    }
  },
  components: {
    HighCharts: () => import('@/components/HighCharts/highcharts')
  },
 
  mounted() {
    this.educationOption = option(this.dataLists[this.activeIndex]).educationOption
    // 此处传入具体Option
  }

}
</script>

<style scoped="scoped" lang="scss">
</style>

4、相关文档

1. 中文API https://api.highcharts.com.cn/legacy#colors
2. 官网 兼容 IE6+、完美支持移动端、图表类型丰富的 HTML5 交互图表 | Highcharts