没有合适的资源?快使用搜索试试~ 我知道了~
在vue项目中引入highcharts图表的方法(详解)
12 下载量 19 浏览量
2020-08-27
21:58:09
上传
评论
收藏 54KB PDF 举报
温馨提示
试读
2页
下面小编就为大家分享一篇在vue项目中引入highcharts图表的方法(详解),具有很好的参考价值,希望对大家有所帮助
资源推荐
资源详情
资源评论
在在vue项目中引入项目中引入highcharts图表的方法图表的方法(详解详解)
下面小编就为大家分享一篇在vue项目中引入highcharts图表的方法(详解),具有很好的参考价值,希望对大家有
所帮助
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数据,如下图目录数据,如下图目录
如下图我写的一个柱状图的数据
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
资源评论
weixin_38688890
- 粉丝: 6
- 资源: 964
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功