在之前的文章中我们介绍了Vue中引入Echarts图表的组件,下面我们就来介绍一下如何使用这些组件构建一些基础的组件方便后续使用中的直接引用。
基础折线图的实现
第一步、创建组件文件
在components的文件夹中创建一个BaseLine的文件夹,并且创建一个index.vue的文件。
<template>
<div>
<Echart :options="options" id="id" height="300px" width="500px"/>
</div>
</template>
<script>
import Echart from '@/common/echart'
export default {
data() {
return {
options: {}
}
},
components: {
Echart
},
props: {
id: {
type: String,
required: true,
default: "baseLine"
},
tips: {
type: Array,
required: true
},
},
watch: {
tips: {
handler(newData) {
this.options = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: newData,
type: 'line',
smooth: true
}
]
}
},
immediate: true,
deep: true
}
},
}
</script>
<style lang="scss" scoped>
</style>
第二步、在主功能文件中引入相关组件
<template>
<div id="index" style="width: 500px;height: 300px">
<BaseLine :id="baseLineId" :tips="this.yData"/>
</div>
</template>
<script>
import BaseLine from "@/components/BaseLine"
export default {
data() {
return {
loading: true,
baseLineId:"baseLine",
yData:[150, 230, 224, 218, 135, 147, 260],
}
},
components:{
BaseLine
},
mounted(){
this.cancelLoading();
},
methods:{
cancelLoading(){
setTimeout(() => {
this.loading = false;
}, 1000);
}
}
}
</script>
<style lang="scss">
</style>