Echarst柱状图+饼状图+vue2 商品案例

最终效果展示：

echarst非常简单，就是使用的数据需要按照规定的格式，往往是获取数据较难

首先前端，只需要一个div，用ref指定名称，定好宽高，就ok，div多大，图就会自适应多大

<div><h1 style="display: inline-block;width: 800px">商品分类柱状图</h1><h1 style="display: inline-block;width: 400px">商品类型占比图</h1><--柱状图div--><div style="width: 600px;height: 600px;float: left" ref="zhu"></div><--饼状图div--><div style="width: 600px;height: 600px;float: right" ref="bing"></div></div>

然后写一个方法用$refs指定div设置图表

 //柱状图getZhu(){const Echarst=echarts.init(this.$refs.zhu)Echarst.setOption({xAxis: {type: 'category',data: this.zhuData1},yAxis: {type: 'value'},series: [{data: this.zhuData2,type: 'bar'}]})},//饼状图getBing(){const Echarts=echarts.init(this.$refs.bing)Echarts.setOption({series:[{name: 'Access From',type: 'pie',radius: '50%',label: {show: true},data: this.bingData},]})}

上面用到的data数据，我们也创建一下，饼状图需要一个数组，柱状图需要两个

data(){return{bingData:[],zhuData1:[],zhuData2:[],}},

最后就是获取这些数据，也可以写si数据试一下能跑起来不，反正就是要获取到以下结构的数据：

data(){return{bingData:[{name:"水果类",value:6},{name:"零食类",value:3},{name:"蔬菜类",value:9},],zhuData1:["水果类","零食类","蔬菜类"],zhuData2:[6,3,9],}},

我是怎么获取的这里也展示一下，

后端代码：

在typeController只要两个方法：

@CrossOrigin
@RequestMapping("/types")
@RestController
public class TypeController {@GetMappingpublic Result findAll(){//获取所有typereturn service.findAll();}@GetMapping("/count")public Result getTypeCount(){//获取每个类型有多少商品countreturn service.getTypeCount();}
}

typeService,相信大家都会写：

public interface TypeService extends IService<Type> {Result findAll();Result getTypeCount();}

@Service
public class TypeServiceImpl extends ServiceImpl<TypeMapper, Type> implements TypeService {@Overridepublic Result findAll() {return Result.ok(list());}@Overridepublic Result getTypeCount() {return Result.ok(typeMapper.getTypeCount());}
}

mapper层只有一个方法

@Mapper
public interface TypeMapper extends BaseMapper<Type>{List<Type> getTypeCount();
}

typeMapper.xml 需要自己写sql语句了

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.mapper.TypeMapper"><select id="getTypeCount" resultType="Type">select t.type_name typeName,count(*) `count`from goods ginner join `type` t on t.tid=g.tidgroup by type_name</select>
</mapper>

yml的配置

spring:datasource:url: jdbc:mysql://localhost:3306/goods?useUnicode=true&characterEncoding=utf-8&serverTimezone=GMT-8&useSSL=falsedriver-class-name: com.mysql.cj.jdbc.Driverusername: rootpassword: rootserver:port: 8088servlet:context-path: /goodsmybatis-plus:configuration:log-impl: org.apache.ibatis.logging.stdout.StdOutImplmap-underscore-to-camel-case: truetype-aliases-package: com.example.entityglobal-config:db-config:id-type: automapper-locations: classpath:mapper/*.xml

前端的this.baseUrl也记得换成相对应的路径（http://localhost:8088/goods）

最后启动前端后端，访问

http://localhost:8088

Echarst柱状图+饼状图+vue2 商品案例相关推荐

java excel 饼图,java 导入导出excle 和生成柱状图饼状图的demo/excle数据如何转成饼状图...
在EXCEL中,如何把表格中的数据转换成饼状图? 在Excel中,把中的数据转换状图的操作步骤如下: 想转换的数据源,插入饼状图,Excel会自动根据选择的数据源生成饼状图.接下来,可以自定义饼状图的 ...
Word中插入表格与柱状图饼状图技术经验分享
最近公司一个项目里要求自动生成报告功能,研究了1周多,主要实现方式是通过调用微软Office COM组件来实现操作word文档,生成段落,表格,及各种图表. 本人发现操作word地方也有几个坑人的地方 ...
Superset 制作地图柱状图饼状图
文章目录制作地图制作柱状图制作饼状图制作地图 1)创建 Chart 2)配置 Chart 3)结果图制作柱状图 1)创建 Chart 2)配置 Chart 3)结果图制作饼状图 1)创建 ...
java实现将数据生成图表至excel导出(包括折线图,柱状图,饼状图)
1. 目的根据已有数据,手动(java后台)生成图表至excel并导出.用于后台查询到数据后直接创建图表,可以代替直接使用图表信息字符串. 2. 说明使用jfree图表绘制类库绘制图表,并生成到本 ...
poi导出excel文件,并生成原生图表(包括折线图,柱状图,饼状图,面积图)
前段时间,因为客户需要,要做一个导出excel文件功能,并能生成原生的图表的(不是把图片插入到excel文档),找了很多文档看,也看了很多别人的代码,个人也总结了一下,不足之处,请各位大牛谅解. 需要 ...
mysql 柱状图统计_js/jquery 进行动态统计各种柱状图饼状图线条图等
1.简单示例1 线条图 $(document).ready(function(){ var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]); }) ...
matlab柱状斜线_Matlab：柱状图饼状图填充不同条纹
下面就是重点:如何把上述图像转换成黑白图像,并填充不同条纹. 首先,创建名为"applyhatch.m"的函数脚本. 在同一路径下. 代码如下:--复制即可. function a ...
动态绘制柱状图饼状图
http://www.cnblogs.com/haian/archive/2009/12/08/1619751.html 转载于:https://www.cnblogs.com/modernsky20 ...
封装构造函数，用canvas写饼状图和柱状图
封装构造函数,用canvas写饼状图和柱状图封装函数 // 场景 function XDLScence( options ) {this.stage = options.stage;//执行场景的初 ...

Echarst柱状图+饼状图+vue2 商品案例

Echarst柱状图+饼状图+vue2 商品案例相关推荐

最新文章

热门文章