我们在vue中使用echarts是非常方便的
像这样一个典型的使用echarts的vue文件
chart.vue
<template>
<div id="chart"></div>
</template>
<script>
export default {
data() {
return {
deviceRec:[820, 932, 901, 934, 1290, 1330, 1320,110,1120,1900,1800,1700]
}
},
mounted() {
this.initDom()
},
methods: {
initDom() {
//基于准备好的dom,初始化echarts实例
var myChart = this.$echarts.init(document.getElementById('chart'));
let newData = []
for(let i=1;i<13;i++){
newData.push(i+'月')
}
let option = {
title: {
left: 'center',
text: '设备接入信息',
textStyle:{
color: '#00CBA7'
}
},
xAxis: {
type: 'category',
data: newData
},
yAxis: {
type: 'value'
},
series: [{
data: this.deviceRec,
type: 'line',
smooth: true,
itemStyle:{
color:'#00B9A1'
},
lineStyle:{
width: 1,
opacity: 0.8
},//线条样式
areaStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#00FFDE' // 0% 处的颜色
}, {
offset: 1, color: '#FBFAFC' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}]
}
// 绘制图表
myChart.setOption(option);
},
},
}
</script>
<style scoped>
#chart{
width: 800px;
height: 600px;
}
</style>
要动态更新其中deviceRec数据时,可在chart.vue中添加一个更新数据的方法,如下代码所示:
updateData(newData){
this.deviceRec = newData
this.initDom()
}
父组件引入chart.vue,在父组件中调用子组件的updateData方法即可
test.vue
<chart ref="chart" />
methods: {
changeData(data){
//调用接口获取该年份数据
let newData = []
this.$refs.chart.updateData(newData)
}
}