在vue项目中引入highcharts图表的方法(详解)


Posted in Javascript onMarch 05, 2018

npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了

npm install highcharts --save

1、components目录下新建一个chart.vue组件

<template>
 <div class="x-bar">
 <div :id="id"
 :option="option"></div>
 </div>
</template>
<script>
import HighCharts from 'highcharts'
export default {
 // 验证类型
 props: {
 id: {
 type: String
 },
 option: {
 type: Object
 }
 },
 mounted() {
 HighCharts.chart(this.id,this.option)
 }
}
</script>

2、chart组件建好后,开始创建chart-options目录,里面创建一个options.js用来存放模拟的chart数据,如下图目录

在vue项目中引入highcharts图表的方法(详解)

如下图我写的一个柱状图的数据

module.exports = {
 bar: {
 chart: {
 type:'column'//指定图表的类型,默认是折线图(line)
 },
 credits: {
 enabled:false
 },//去掉地址
 title: {
 text: '我的第一个图表' //指定图表标题
 },
 colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00',
  '#24CBE5' ],
 xAxis: {
  categories: ['1号', '2号', '3号','3号','3号'] //指定x轴分组
 },
 yAxis: {
  title: {
  text: '最近七天', //指定y轴的标题
 },
 },
 plotOptions: {
  column: {
  colorByPoint:true
  },
  },
 series: [{ //指定数据列
  name: '小明',
  data: [{
  y:1000,
  color:"red"}, 5000, 4000,5000,2000] //数据
 }]
 }
}

3、引用chart组件

<template>
 <div id="app">
 <x-chart :id="id" :option="option"></x-chart>
 </div>
</template>
<script>
// 导入chart组件
import XChart from 'components/chart.vue'
// 导入chart组件模拟数据
import options from './chart-options/options'
export default {
 name: 'app',
 data() {
 let option = options.bar
 return {
 id: 'test',
 option: option
 }
 },
 components: {
 XChart
 }
}
</script>
<style>
#test {
 width: 400px;
 height: 400px;
 margin: 40px auto;
}
</style>

效果如下图所示

在vue项目中引入highcharts图表的方法(详解)

以上这篇在vue项目中引入highcharts图表的方法(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS模拟面向对象全解(一、类型及传递)
Jul 13 Javascript
jquery连缀语法如何实现
Nov 29 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
jQuery简易图片放大特效示例代码
Jun 09 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
Dec 12 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
May 05 Javascript
Bootstrap基本插件学习笔记之折叠(22)
Dec 08 Javascript
JavaScript算法教程之sku(库存量单位)详解
Jun 29 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
Angular @HostBinding()和@HostListener()用法
Mar 05 #Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 #Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
Mar 05 #Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 #Javascript
axios拦截设置和错误处理方法
Mar 05 #Javascript
完美解决axios在ie下的兼容性问题
Mar 05 #Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 #Javascript
You might like
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
php eval函数一句话木马代码
2015/05/21 PHP
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
2016/01/04 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
2016/03/06 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
js的三种继承方式详解
2017/01/21 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
在Vue项目中,防止页面被缩放和放大示例
2019/10/28 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
求职简历的自我评价怎样写好
2013/10/07 职场文书
金融专业应届生求职信
2013/11/02 职场文书
一年级语文教学反思
2014/02/13 职场文书
行政办公室岗位职责
2014/03/18 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang
Python图片处理之图片裁剪教程
2021/05/27 Python
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers
python+opencv实现目标跟踪过程
2022/06/21 Python