在vue项目中引入highcharts图表的方法

npm进行highchars的导入，导入完成后就可以进行highchars的可视化组件开发了

npm install highcharts --save

1、components目录下新建一个chart.vue组件

<template>
  <div class="chart" id="myChart" >
    <div class="emcs_charts" :id="id" ></div>
  </div>
</template>
<script>
// 引入highCharts模块
import HighCharts from 'highcharts'
// 引入这个图表的外部资源数据
import data from '../echarts_data/chart.js'
export default {
 data() {
  // 将引入的数据写在自己的组件中
  let dataObj = data.bar
  return{
   id: 'chart',
   dataObj: dataObj
  }
 },
 mounted() {//钩子函数挂载时实例化这个图表
  // chart(参数1,参数2);第一个参数挂载组件的容器，第二个参数为图表所需要的数据对象
  HighCharts.chart(this.id,this.dataObj)
 }
}
</script>
<style scoped lang='stylus'>
.chart{
 float left ;
 background-color #fff;
 padding 10px 0;
 margin-top 20px;
 border-radius 6px
 width 49.5%;
 .emcs_charts{
  min-width 890px;
  height 280px;
 }
}
</style>

2、chart组件建好后，开始创建chart-options目录，里面创建一个chart.js用来存放模拟的chart数据

如下图我写的一个面积图的数据

module.exports = {
  bar: {
    chart: {//图表样式
      type:'area',//指定图表的类型,这里是面积图
    },
    //是否启用Labels。x，y轴默认值都是true，如果想禁用（或不显示）Labels，设置该属性为false即可
    credits: {
     enabled:false
    },
    title: {//指定图表标题
      text: ' 设备监控',
      align: 'left',
      style:{
        color: '#666',
        fontSize:'16px',
      }
    },
    colors: ['rgba(86,199,99,1)','rgba(226,188,37,1)','rgba(255,133,133,1)'],
    xAxis: {//图表的横坐标,一个轴为{ }
      title:{//横坐标标题
        text:''
      },
      //x坐标轴的刻度值
      categories: ['4:40','4:41','4:42','4:43','4:44', '4:45', '4:46', '4:47', '4:48', '4:49', '4:50','4:51','4:52','4:53','4:54', '4:55', '4:56', '4:57', '4:58', '4:59', '5:00', '5:01', '5:02', '5:03', '5:04', '5:05', '5:06', '5:07', '5:08', '5:09', '5:10', '5:11', '5:12', '5:13', '5:14', '5:15', '5:16', '5:17', '5:18', '5:19', '5:20', '5:21', '5:22', '5:23', '5:24', '5:25', '5:26', '5:27', '5:28', '5:29', '5:30', '5:31', '5:32', '5:33', '5:34', '5:35', '5:36', '5:37', '5:38', '5:39', '5:40'], //指定x轴分组
      labels: {//坐标轴上的刻度值（显示间隔、样式、单位）
       style: {								 
 1/4    1 2 3 4 下一页 尾页