<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>
chart架子搭好后，开始创建chart-options目录，里面创建一个options.js用来存放模拟的chart数据
这里我模拟写了一个柱状图的数据
module.exports = {
bar: {
chart: {
type: 'bar',
},
series: [{
data: [50, 235, 809, 947]}]}
}四、引用chart组件
这里直接就把引用写到App.vue这么一个接口文件中吧
<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>到这里，chart组件也引入成功，我们直接看一下最后页面中显示的效果吧
这里需要说明一点的就是对于所有highchars组件的适用度。大家通过看我写的模拟数据也可以看出来，这里我是把一些通用的属性给直接忽略了。如果实际项目的开发中需要的话，大家可以把通用的一些属性的数据直接写到chart.vue文件中。通过props验证，写好default默认值作为通用属性。直接给大家看下我实际开发当中对于一些通用属性的处理吧
这里还是需要看你们项目的需求，然后制定一套属于自己的通用的属性。然后再单独对每个组件进行操作。
以上所述是小编给大家介绍的Vue组件开发，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
