未加星标

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

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

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图表的方法(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。


您可能感兴趣的文章:在Vue中使用highCharts绘制3d饼图的方法Vue 中使用vue2-highcharts实现曲线数据展示的方法

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 数据模拟数据折线图
tags: gt,lt,chart,option,id,options,div,highcharts,组件,template,script,vue,图表,components
分页:12
转载请注明
本文标题:在vue项目中引入highcharts图表的方法(详解)
本站链接:http://www.codesec.net/view/573051.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(30)