在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 相关文章推荐
javaScript同意等待代码实现心得
Jan 01 Javascript
图片轮换效果实现代码(点击按钮停止执行)
Apr 12 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 Javascript
jquery实现图片切换代码
Oct 13 Javascript
JS前端加密算法示例
Dec 22 Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 Javascript
vue项目中v-model父子组件通信的实现详解
Dec 10 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
如何让vue长列表快速加载
Mar 29 Vue.js
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更新修改excel中的内容实例代码
2014/02/26 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
PHP静态成员变量
2017/02/14 PHP
javascript preload&amp;lazy load
2010/05/13 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
jQuery遍历Table应用示例
2014/04/09 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
关于vue-router路径计算问题
2017/05/10 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
angular+ionic返回上一页并刷新页面
2017/08/08 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
vue3自定义dialog、modal组件的方法
2021/01/04 Vue.js
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
Python中类型关系和继承关系实例详解
2015/05/25 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
手机配件第一品牌:ZAGG
2017/05/28 全球购物
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
教师党员公开承诺书
2014/03/25 职场文书
怎样填写就业意向
2014/04/02 职场文书
国际金融专业自荐信
2014/07/05 职场文书
个人廉洁自律总结
2015/03/06 职场文书
2015年统战工作总结
2015/05/19 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang