在VUE.CLI中使用highcharts
二、在VUE.CLI中引用三方开发插件相关地址:1.highcharts :https://www.highcharts.com.cn/demo/highcharts/line-basic1)引入highcharts1.在项目组安装highchartsnpm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了np...
·
二、在VUE.CLI中引用三方开发插件
相关地址:
1.highcharts :https://www.highcharts.com.cn/demo/highcharts/line-basic
1)引入highcharts
1.在项目组安装highcharts
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了
npm install highcharts --save
在 main.js中创建highcharts的vue对象
//引入HighCharts
import HighCharts from 'highcharts'
Vue.use(HighCharts)
3.在src目录中新增目录
3.1在src目录中新增chart-options目录,用来存放chart的js
3.2在src目录中的view新增charts目录,用来存放chart组件文件
4.代码编写:
4.1新建js代码,代码可以从 highcharts中拷贝拷贝方法如下:
拷贝部分:
编写部分:
新增js 在在src目录中新增chart-options目录中 hhhhxL.js
上图拷贝代码:拷贝在下图{}之间,该属性名可以自定义
module.exports = {
hhhhxL: {
title: {
text: '2010 ~ 2016 年太阳能行业就业人员发展情况'
},
subtitle: {
text: '数据来源:thesolarfoundation.com'
},
yAxis: {
title: {
text: '就业人数'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: '安装,实施人员',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: '工人',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: '销售',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: '项目开发',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: '其他',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
}
}
新增组件 src目录中的view新增charts目录中 HhhhxL.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>
5.组件调用:
5.1 在使用的地方分别引用:options.js和charts.vue例:
//导入chart组件
import XChart from '@/views/charts/HhhhxL.vue'
//导入chart组件模拟数据
import options from '@/chart-options/hhhhxL.js'
5.2 就和vue语法一样直接使用组件就可以了:
<template>
<div id="app">
<x-chart :id="id" :option="option"></x-chart>
</div>
</template>
<script>
//导入chart组件
import XChart from '@/views/charts/HhhhxL.vue'
//导入chart组件模拟数据
import options from '@/chart-options/hhhhxL.js'
export default {
name: 'app',
data() {
let option = options.hhhhxL
return {
id: 'test2',
option: option
}
},
components: {
XChart
}
}
</script>
<style>
#test {
width: 400px;
height: 400px;
margin: 40px auto;
}
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)