vue中如何使用hightchats？方法介绍

vue中如何使用hightchats？下面vue.js栏目给大家介绍一下vue使用hightchats的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

vue中使用hightchats

1、安装highcharts

npm install highcharts --save

2、在main.js中

立即学习“前端免费学习笔记（深入）”；

站长俱乐部购物系统

功能介绍：1、模块化的程序设计，使得前台页面设计与程序设计几乎完全分离。在前台页面采用过程调用方法。在修改页面设计时只需要在相应位置调用设计好的过程就可以了。另外，这些过程还提供了不同的调用参数，以实现不同的效果；2、阅读等级功能，可以加密产品，进行收费管理；3、可以完全可视化编辑文章内容，所见即所得；4、无组件上传文件，服务器无需安装任何上传组件，无需支持FSO，即可上传文件。可限制文件上传的类

下载

import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';
import Highcharts3D from 'highcharts/highcharts-3d';
import Highmaps from 'highcharts/modules/map';

HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
Highmaps(Highcharts);
new Vue({
  el: '#app',
  router,
  axios,
  components: { App },
  template: '',
  methods:{
 
    moreChart() {
        var options = this.getMoreOptions(this.type);
 
        if (this.chart) {
            this.chart.destroy();
        };
    // 初始化 Highcharts 图表
    this.chart = new Highcharts.Chart('highcharts-more', options);
    }
  }
})

3、创建chart组件

4、其他组件引用图表

import Chart from "./Chart";
export default {
  name: "HelloWorld",
  components: {
    Chart
  },
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      id: "test",
      option: {
        credits: {
          enabled: false
        },
        chart: {
          type: "line"
        },
        title: {
          text: "月平均气温" //表头文字
        },
        subtitle: {
          text: "数据来源: WorldClimate.com" //表头下文字
        },
        xAxis: {
          //x轴显示的内容
          categories: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月"
          ],
          plotbands: [
            {
              //可以显示一个方块，如果需要的话可以更改透明度和颜色
              from: 4.5,
              to: 6.5,
              color: "rgba(68,170,213,0)" //透明度和颜色
            }
          ]
        },

        yAxis: {
          //y轴显示的内容
          title: {
            text: "气温 (°C)"
          }
        },
        plotOptions: {
          line: {
            dataLabels: {
              enabled: false // 开启数据标签
            },
            enableMouseTracking: false // 关闭鼠标跟踪，对应的提示框、点击事件会失效
          }
        },
        series: [
          {
            //两条数据
            name: "东京",
            data: [
              7.0,
              6.9,
              9.5,
              14.5,
              18.4,
              21.5,
              25.2,
              26.5,
              23.3,
              18.3,
              13.9,
              9.6
            ]
          },
          {
            name: "伦敦",
            data: [
              3.9,
              4.2,
              5.7,
              8.5,
              11.9,
              15.2,
              17.0,
              16.6,
              14.2,
              10.3,
              6.6,
              4.8
            ]
          }
        ]
      }
}
}

相关推荐：2020年前端vue面试题大汇总（附答案）vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程学习网站！！