在vue的项目开发中,数据的可视化可以用echarts来实现,具体用法如下:
(1)安装echarts,进入项目目录,执行如下命令,安装echarts:
npm install echarts --save-dev
(2)引入echarts,并对相关的横坐标和纵坐标进行赋值,该实例直接写入了app.vue中,具体代码如下:
<template>
<div id="app">
<div id="echarts" :style="{height:height,width:width}"></div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
dataX:["周一","周二","周三","周四","周五","周六","周日"],
dataY:[5, 20, 36, 10, 10, 20, 30]
}
},
props:{
height: {
type: String,
'default': '300px'
},
width: {
type: String,
'default' :"500px"
}
},
mounted() {
this.draw();
},
methods: {
draw: function(){
let echart = this.$echarts.init(document.getElementById('echarts'));
var option = ({
title: { text: '在Vue中使用echarts' },
tooltip: {},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
color:['green'],
data: []
}]
});
for(var i = 0; i < this.dataX.length;i++){
option.xAxis.data[i] = this.dataX[i];
option.series[0].data[i] = this.dataY[i];
}
echart.setOption(option);
}
}
}
</script>
<style lang="scss">
#echarts{margin:auto;}
</style>
(3)效果图如下: