vue 中 highcharts 的简单使用

以柱形图举例，实现步骤如下：

npm安装 Highcharts 相关资源
```
npm install highcharts --save
```

在vue要引入图表的界面引入使用

引入：

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);

使用：
html5代码： <div id="container"></div>
js代码：在methods中封装一个方法

methods: {moreChart() {if (this.chart) {this.chart.destroy();}// 初始化 Highcharts 图表this.chart = new Highcharts.chart('container',{chart: {type: 'column'},title: {text: '月平均降雨量'},subtitle: {text: '数据来源: WorldClimate.com'},xAxis: {categories: ['一月','二月','三月','四月'],crosshair: true},yAxis: {min: 0,title: {text: '降雨量 (mm)'}},tooltip: {// head + 每个 point + footer 拼接成完整的 tableheaderFormat: '<span style="font-size:10px">{point.key}</span><table>',pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',footerFormat: '</table>',shared: true,useHTML: true},plotOptions: {column: {borderWidth: 0}},series: [{name: '东京',data: [49.9, 71.5, 106.4, 129.2]}, {name: '纽约',data: [83.6, 78.8, 98.5, 93.4]}, {name: '伦敦',data: [48.9, 38.8, 39.3, 41.4]}, {name: '柏林',data: [42.4, 33.2, 34.5, 39.7]}]
});}}

在mounted中加载方法

 mounted() {this.moreChart();},

运行结果如下：

完整代码如下

<template><div id="container"></div>
</template><script>
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);
export default {mounted() {this.moreChart();},methods: {moreChart() {if (this.chart) {this.chart.destroy();}// 初始化 Highcharts 图表this.chart = new Highcharts.chart('container',{chart: {type: 'column'},title: {text: '月平均降雨量'},subtitle: {text: '数据来源: WorldClimate.com'},xAxis: {categories: ['一月','二月','三月','四月'],crosshair: true},yAxis: {min: 0,title: {text: '降雨量 (mm)'}},tooltip: {// head + 每个 point + footer 拼接成完整的 tableheaderFormat: '<span style="font-size:10px">{point.key}</span><table>',pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',footerFormat: '</table>',shared: true,useHTML: true},plotOptions: {column: {borderWidth: 0}},series: [{name: '东京',data: [49.9, 71.5, 106.4, 129.2]}, {name: '纽约',data: [83.6, 78.8, 98.5, 93.4]}, {name: '伦敦',data: [48.9, 38.8, 39.3, 41.4]}, {name: '柏林',data: [42.4, 33.2, 34.5, 39.7]}]
});}}}
</script><style scoped>
#container{width: 500px;
}
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

vue 中 highcharts 的简单使用相关推荐

vue中align_Vue的简单Treeview组件，没有额外的依赖——VueTeatree
介绍 Vue Teatree是一个不依赖第三方库的Vue树组件,简单易用! Github https://github.com/sarimabbas/vue-teatree 安装 yarn add v ...
9.Vue中mounted的简单理解
mounted是vue中的一个钩子函数,一般在初始化页面完成后,再对dom节点进行相关操作.官方文档的解释如下,钩子函数的官方链接为 https://cn.vuejs.org/v2/api/# ...
Vue中watch的简单应用
Vue.js 有一个方法 watch,它可以用来监测Vue实例上的数据变动. 如果对应一个对象,键是观察表达式,值是对应回调,值也可以是方法名,或者是对象,包含选项. 下面写两个demo,参考demo ...
vue中v-on指令的使用之Vue知识点归纳(四)
本文章中描述 v-on 指令的基本使用点击按钮动态修改数据 1 简述 vue 中 v-on 指令简单点来讲,是用来给元素设置绑定事件. 格式 v-on:事件名称="方法名称" 这 ...
vue中实现双向数据绑定原理,使用了Object.defineproperty()方法,方法简单
在vue中双向数据绑定原理,我们一般都是用v-model来实现的 ,但一般在面试话会问到其实现的原理, 方法比较简单,就是利用了es5中的一个方法.Object.defineproperty(),它有 ...
3d饼图 vue_在Vue中如何使用highCharts绘制3d饼图
本篇文章主要介绍了在Vue中使用highCharts绘制3d饼图的方法,现在分享给大家,也给大家做个参考. highcharts是国外知名基于javascript的图表库.由于中文官网的vue中使用h ...
vue全局安装jquery，vue使用bootstrap框架，vue中封装websocket通讯，vue引入element-ui 组件库，引入highcharts图表插件
vue安装jquery: 1.使用vue-cli创建好vue项目后,在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 2.修改项目文件 build ...
vue中简单的小插曲
我们现在来学习一下vue中一些简单的小东西: 首先我们必须要引入vue.js文件哦! 1.有关文本框里的checkbox js代码: new Vue({el:"#app",data ...
3d饼图 vue_在Vue中使用highCharts绘制3d饼图
highcharts是国外知名基于javascript的图表库.由于中文官网的vue中使用highcharts配置繁琐并且需要引入jquery作为依赖,所以弃用. 接下来,给各位伙伴简要的讲叙下hig ...

vue 中 highcharts 的简单使用

vue 中 highcharts 的简单使用相关推荐

最新文章

热门文章