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 ] } ] } } }
相关推荐:
更多编程相关知识,请访问:编程学习网站!!
以上就是vue中如何使用hightchats?方法介绍的详细内容,更多请关注php中文网其它相关文章!
已抢185715个
抢已抢66892个
抢已抢352187个
抢已抢665646个
抢已抢120129个
抢已抢20535个
抢