vue+highcharts使用教程--每天努力一点点，必可东山再起！

首先安装依赖 1npm install -S vue-highcharts 　　在main.js 中进行配置1234567891011121314151617...

jingtian678

3749人浏览 · 2019-01-03 14:18:30

jingtian678 · 2019-01-03 14:18:30 发布

首先安装依赖

1	`npm install -S vue-highcharts`

在main.js 中进行配置

import Vue from 'vue'

import App from './App'

import router from './router'

//highcharts的引入

import VueHighcharts from 'vue-highcharts';

Vue.use(VueHighcharts)

Vue.config.productionTip = false

new Vue({

el: '#app',

router,

template: '<App/>',

components: { App },

methods:{

moreChart() {

var options = this.getMoreOptions(this.type);

if (this.chart) {

this.chart.destroy();

};

// 初始化 Highcharts 图表

this.chart = new Highcharts.Chart('highcharts-more', options);

}

})

图表组件名charts.vue，代码如下(div绑定obj属性是用于动态改变数据，调用update方法，其他博客没有讲解这一点)：

<template>
<div class="x-bar">
<div :id="id" :option="option" :obj="chartObj"></div>
</div>
</template>
<script>
//import exportCSV from '@/export-csv.js';
import HighCharts from 'highcharts';
export default {
// 验证类型
   data() {
       return {
           chartObj:{}
       }
   },
props: {
id: {
type: String
},
option: {
type: Object
}
},
watch: {
option () {
HighCharts.chart(this.id,this.option);
}
},
mounted() {
HighCharts.chart(this.id,this.option);
       this.chartObj=HighCharts.chart(this.id,this.option);
}
}
</script>

在需要使用的页面调用组件

<template>

<div class="hello">

<div class="charts">

<x-chart :id="id" :option="option" ref="wish"></x-chart>

</div>

</template>

<script>

// 导入chart组件

import XChart from './charts.vue'

export default {

data() {

return {

id: 'test',

option: {

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: true // 开启数据标签

},

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]

}]

}

},

components: {

XChart

}

</script>

动态改变数据语句：

this.$refs.wish.chartObj.series[0].update({ data: [29.9, 71.5, 306.4, 429.2, 144.0, 176.0, 135.6, 248.5, 216.4, 194.1, 95.6, 54.4] });

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^