在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实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
Vue如何从1.0迁移到2.0
Oct 19 Javascript
深入浅析Vue中的 computed 和 watch
Jun 06 Javascript
JavaScript创建对象的常用方式总结
Aug 10 Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
利用es6 new.target来对模拟抽象类的方法
May 10 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
微信小程序渲染性能调优小结
Jul 30 Javascript
为react组件库添加typescript类型提示的方法
Jun 15 Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 Javascript
React四级菜单的实现
Apr 08 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
10条PHP高级技巧[修正版]
2011/08/02 PHP
深入php数据采集的详解
2013/06/02 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
用jscript实现新建word文档
2007/06/15 Javascript
jquery tools系列 expose 学习
2009/09/06 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
详解Vue.directive 自定义指令
2019/03/27 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
Python与Java间Socket通信实例代码
2017/03/06 Python
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
如何基于python生成list的所有的子集
2019/11/11 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
中科创达面试题
2016/12/28 面试题
如何签定毕业生就业协议书
2014/09/28 职场文书
个人自我剖析材料
2014/09/30 职场文书
合作与交流自我评价
2015/03/09 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
《我是什么》教学反思
2016/02/16 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python
vue+iview实现手机号分段输入框
2022/03/25 Vue.js