70 lines
1.8 KiB
Vue
70 lines
1.8 KiB
Vue
|
<template>
|
|||
|
|
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
|
|||
|
|
<div ref="chart" style="width: 100%;height:200px;"></div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import * as echarts from 'echarts'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data(){
|
|||
|
|
return {
|
|||
|
|
items:[]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted(){
|
|||
|
|
this.initWebsocket();
|
|||
|
|
},
|
|||
|
|
methods:{
|
|||
|
|
initChart(){
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
var myChart = echarts.init(this.$refs.chart);
|
|||
|
|
|
|||
|
|
// 指定图表的配置项和数据
|
|||
|
|
var option = {
|
|||
|
|
color:'#f60', //系列柱颜色
|
|||
|
|
tooltip: {},
|
|||
|
|
// legend: {
|
|||
|
|
// data: ['销量']
|
|||
|
|
// },
|
|||
|
|
xAxis: {
|
|||
|
|
data: ['1月', '2月', '3月', '裤子', '高跟鞋', '袜子'],
|
|||
|
|
axisLine:{
|
|||
|
|
lineStyle:{
|
|||
|
|
color:'#fff'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
axisLine:{
|
|||
|
|
lineStyle:{
|
|||
|
|
color:'#fff'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '销量',
|
|||
|
|
type: 'bar',
|
|||
|
|
data:this.items || [10,20,30,40,50,60,70]
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
grid:{
|
|||
|
|
left:'5%',
|
|||
|
|
right:'5%',
|
|||
|
|
top:'10%',
|
|||
|
|
bottom:'5%',
|
|||
|
|
containLabel:true
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
// 使用刚指定的配置项和数据显示图表。
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
},
|
|||
|
|
initWebsocket(){
|
|||
|
|
|
|||
|
|
this.initChart();
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|