若依项目制作饼状图和柱状图 |
您所在的位置：网站首页 › 怎么生成统计图表 › 若依项目制作饼状图和柱状图 |
若依项目制作饼状图和柱状图
|
这里的是根据年两分段做一个饼状图，根据性别人数制作柱状图
echarts+vue 饼状图先写一个实体类，将查到的数据放在实体类中，写一个mapper->mapper.xml->controller 这里为了方便测试没有写service 实体类
mapper
mapper.xml 这里的SQL查到的值一定要和实体类定义的相同，要不然会报错， SQL里的where del_flag = 0这里我是判断是否删除，可以不写
controller 这里的AjaxResult是若依自带的，将查到的数据返回到前端
这里是写了按钮跳转
上张图片的@click里的值要和下面定义的相同
写完按钮，写pie页面 import * as echarts from 'echarts'; import {bing} from "@/api/system/member"; export default { name: "pie", //参数 data(){ return{ pName:[],//name值 pValue:[]//value值 } }, mounted() { this.$nextTick(()=>{ this.getList(); }) }, created() { }, methods:{ getList() { bing().then(res => { if (res.code == 200) { this.myEachars(res.data); } }) }, //饼图 myEachars(datm){ var datas = [] for (let i = 0; i { this.list(); }); }, created() { }, methods: { list() { zhu().then(res => { if (res.code==200){ this.zhuzhuangtu(res.data); }else { //验证失败 this.zhuzhuangtu(null); } }) }, zhuzhuangtu(datm) { //参数拼接 var datas = [] var xData=[] if (datm==null){ datas.push(0,0); xData.push("男","女"); }else { for (let i = 0; i { myChart.resize(); }); } } };在index.js写跳转页面
在member.js写后端接口
|
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |