1. 生成的代码:后端代码我是直接放到system下,前端建立自己想要的路由,改代码。但直接生成system的代码,会默认在前端页面“系统管理”下生成相应页面,要去数据库的sys_menu下删除parentId为3的字段。
2.在若依中使用echars后,如何动态从后端获取数据?
前端项目中,新建对应api,格式如下,格式很重要:
import request from '@/utils/request'
// 查询商品销量信息
export function getBarVO() {
return request({
url: '/system/product/getSaleInfo',
method: 'get',
})
}
views中新建页面,代码如下:
<template>
<div className="Echarts">
<div id="main" style="width: 800px;height:500px; margin:auto;" ></div>
</div>
</template>
<script>
import { getBarVO } from '@/api/shopping/productbar/bar'
export default {
name: 'Echarts',
methods: {
myEcharts() {
//get:查询数据
getBarVO().then(response => {
// alert(response.data.quantities);
// 基于准备好的dom,初始化echarts实例
var myChart = this.$echarts.init(document.getElementById('main'));
// 显示标题,图例和空的坐标轴
myChart.setOption({
title: {
text: '数据示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: response.data.names
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: response.data.quantities
}
]
});
})
}
},
mounted() {
this.myEcharts();
}
}
</script>
<style>
</style>
注意,getBarVO().then(response => {})获取后端数据。
最终效果: