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 ] } ] }}}
相关推荐：
2020年前端vue面试题大汇总（附答案）
vue教程推荐：2020最新的5个vue.js视频教程精选
更多编程相关知识，请访问：编程学习网站！！
以上就是vue中如何使用hightchats？方法介绍的详细内容。