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: '', 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组件
import HighCharts from 'highcharts' export default { // 验证类型 props: { id: { type: String }, option: { type: Object } }, mounted() { HighCharts.chart(this.id, this.option) } }
登录后复制
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视频教程精选
更多编程相关知识，请访问：vue.js栏目！！
以上就是vue中如何使用hightchats？方法介绍的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3022343.html
