在Vue中使用Highcharts（图形报表库）

效果图：

具体步骤：

[$]

1、首先通过npm安装highcharts 依赖

npm install highcharts --save

2、创建图标容器

<div ref="chartContainer" style="width: 500px;height: 300px" />

3、然后在.vue文件中局部引入 HighCharts

import HighCharts from 'highcharts';

4、然后编写图表配置项

// 图表配置
const options = {
  chart: {
    type: 'bar' // 指定图表的类型，默认是折线图（line）
  },
  title: {
    text: '我的第一个图表' // 标题
  },
  xAxis: {
    categories: ['苹果','香蕉','橙子'] // x 轴分类
  },
  yAxis: {
    title: {
      text: '吃水果个数' // y 轴标题
    }
  },
  series: [{ // 数据列
    name: '小明', // 数据列名
    data: [1,0,4] // 数据
  },{
    name: '小红',
    data: [5,7,3]
  }]
};

4、然后通过HighCharts中的chart函数渲染图表

HighCharts.chart(this.$refs.chartContainer,options);

全部代码如下：

<template>
  <div class="barrages-drop">
    ============================40、Highcharts 开源库的学习和使用 ============================
    <div ref="chartContainer" style="width: 500px;height: 300px" />

  </div>
</template>
<script>
import HighCharts from 'highcharts';
export default {
  name: 'Highcharts40',
  data(){
    return {

    };
  },
  mounted(){
    this.initHightChart();
  },
  methods: {
    initHightChart(){
      // 图表配置
      const options = {
        chart: {
          type: 'bar' // 指定图表的类型，默认是折线图（line）
        },
        title: {
          text: '我的第一个图表' // 标题
        },
        xAxis: {
          categories: ['苹果','香蕉','橙子'] // x 轴分类
        },
        yAxis: {
          title: {
            text: '吃水果个数' // y 轴标题
          }
        },
        series: [{ // 数据列
          name: '小明', // 数据列名
          data: [1,0,4] // 数据
        },{
          name: '小红',
          data: [5,7,3]
        }]
      };

      HighCharts.chart(this.$refs.chartContainer,options);
    }
  }
};
</script>
<style  lang="less">

</style>

[/$]