vue柱状图展示
<template>
<div ref="echarts" class="simpleDemo"></div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'max',
data() {
return {
chart: null,
option: {
title: {
text: '自定义柱状图'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [30, 20, 36, 40, 50, 60],
}
],
color: ['#66FF99'],
}
}
},
mounted() {
this.getPage()
},
methods: {
getPage() {
this.chart = echarts.init(this.$refs.echarts);
this.chart.setOption(this.option);
}
}
}
</script>
<style scoped>
.simpleDemo {
width: 600px;
height:400px;
float: left;
margin: 0 auto;
}
</style>