<template>
<el-radio-group v-model="radio" @change="radioChange">
<el-radio-button label="1">用户数据图</el-radio-button>
<el-radio-button label="2">产品兴趣图</el-radio-button>
</el-radio-group>
</template>
<script >
/* const fits = ['非常不满意', '不满意', '较满意', '满意', '非常满意'] */
export default{
data() {
return {
buttonList: "primary",//默认显示表格
buttonChart: "",//默认图形不显示
legendData: ['正向有功实时需量','反向有功实时需量','正向无功实时需量','反向无功实时需量'],
tableData: [],
}
},
methods: {
handleList(){
this.buttonList = "primary";
this.buttonChart = "";
this.$nextTick(()=>{
this.drawRealDemandBar();
})
},
handleChart() {
this.buttonList = "";
this.buttonChart = "primary";
this.$nextTick(()=>{
this.drawRealDemandLine();
})
},
drawRealDemandBar() {
let myChart1 = this.$echarts.init(
document.getElementById("orderStatistics"),
"light"
),
option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
myChart1.setOption(option);
window.onresize = function () {
setTimeout(() => {
myChart1.resize();
}, 500);
};
},
drawRealDemandLine() {
let myChart1 = this.$echarts.init(
document.getElementById("orderStatistics"),
"light"
),
option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'line',
data: [5, 20, 36, 10, 10, 20]
}
]
};
myChart1.setOption(option);
window.onresize = function () {
setTimeout(() => {
myChart1.resize();
}, 500);
};
},
}
</script>
<style>
</style>
相似问题