关于Highcharts图表的用法总结

一、前言

        在项目开发中可能会遇到一些图表展示的需求，所以这次我们一起总结学习一下关于Highcharts图表的用法。

二、如何优雅的渲染图表

        怎样安装就不多复述了。

        在想要展示图表的页面中引入Highcharts：

import Highcharts from 'highcharts'

        然后在需要展示图表的地方创建一个父元素，用于展示图表（大小可以通过内联样式进行设置）：

<div ref="monitor" style="width: 100%; height: 100%"></div>

        通过Highcharts.chart()方法渲染图表，两个参数，第一个是要渲染的图表元素，第二个是图表的配置项：

Highcharts.chart(this.$refs.monitor, option)

        然后就成功的渲染出一个图表了，其实渲染出来不麻烦，更多的是一些API的使用，真的有时候搞不懂，所以大家还是多看官网。

        附加一个如何在图表中添加坐标轴

  this.trendChart = Highcharts.chart(this.$refs.monitor, option)
      //添加转速轴
      this.trendChart.addAxis({
        title: {
          align: 'high',
          offset: 0,
          rotation: 0,
          y: 6,
          x: 0,
          text: '℃',
          margin: 1
        },
        opposite: true,
        gridLineColor: 'rgba(128,128,128,0.2)',
        minorGridLineColor: 'rgba(128,128,128,0.2)',
        minorGridLineDashStyle: 'Dot',
        minorTickInterval: 'auto',
        allowDecimals: true,
        showFirstLabel: true,
        showLastLabel: false
      })
      //添加转速系列数据
      this.trendChart.addSeries({
        name: '转速',
        data: transferTimeData(checkOrder(data)),
        yAxis: 1,
        tooltip: {
          valueSuffix: '℃'
        }
      })
    

        主要还是要多看官网。