安装echarts
cnpm install --save vue-echarts-v3
新建一个一个通用的折线图组件 line.vue
<template>
<div id="line">
<IEcharts :option="line" :style="style"></IEcharts>
</div>
</template>
<script>
import IEcharts from 'vue-echarts-v3' // 导入IEcharts组件
export default {
props: {
obj: null
},
data () {
return {
line: {
tooltip: {
trigger: 'axis'
},
xAxis: { // 横坐标
boundaryGap: false,
data: this.obj.xAxis // 横坐标数据
},
yAxis: { // 纵坐标
},
series: [
{
name: '查询条数',
type: 'line', // 图表类型
data: this.obj.series // 纵坐标数据
}
]
},
style: 'width:890px;height:500px;'
}
},
components: {
IEcharts// 声明组件
}
}
</script>
<template>
<!-- :obj向子页面传值-->
<detailedAll :obj="data"></detailedAll>
</template>
<script>
import line from '@/components/echarts/line.vue' // 引用line
export default {
data () {
return {
data: null
}
},
methods: {
// 图表
detailedtab () {
let that = this
that.data = null
let params = {}
that.$api.get('###', params, function (req) {
that.data = req.content
})
}
},
components: {
detailedAll: line // 自定义组件
}
}
</script>