在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 相关文章推荐
Jquery 插件开发笔记整理
Jan 17 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
Jul 09 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
Jun 13 Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
Mar 15 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 Javascript
layer弹出子iframe层父子页面传值的实现方法
Nov 22 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制作简单的内容采集器的原理分析
2008/10/01 PHP
PHP高级OOP技术演示
2009/08/27 PHP
PHP setTime 设置当前时间的代码
2012/08/27 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
2010/07/24 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
详解Python中的变量及其命名和打印
2016/03/11 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
python 搜索大文件的实例代码
2019/07/08 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
加热夹克:RAVEAN
2018/10/19 全球购物
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
计算机工程学院个人求职信
2013/10/05 职场文书
小学国庆节活动方案
2014/02/11 职场文书
学校清明节活动总结
2014/07/04 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
永远是春天观后感
2015/06/12 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书
运动会广播稿200字
2015/08/19 职场文书
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书
Java 超详细讲解数据结构中的堆的应用
2022/04/02 Java/Android
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript