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

互联网 20-11-11

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

vue中使用hightchats

1、安装highcharts

npm install highcharts --save

2、在main.js中

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: '<App/>',   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组件

<template>     <p class="chart">         <p :id="id" :option="option"></p>     </p> </template>  <script> import HighCharts from 'highcharts'     export default {         // 验证类型         props: {             id: {                 type: String             },             option: {                 type: Object             }         },         mounted() {             HighCharts.chart(this.id, this.option)         }     } </script>  <style scoped>  </style>

4、其他组件引用图表

<Chart :id="id" :option="option"></Chart> 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             ]           }         ]       } } }