day60_echarts

Echarts

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。

2021年1月26日晚，Apache基金会官方宣布ECharts项目正式毕业。1月28日，ECharts 5线上发布会举行

echarts文档:
菜鸟教程:https://www.runoob.com/echarts/echarts-tutorial.html
官网: https://echarts.apache.org/zh/index.html

所有的配置：
https://echarts.apache.org/zh/option.html#title

下载地址或者使用CDN：
https://echarts.apache.org/zh/download.html

入门使用

下载js
页面准备存放图标的dom
cv官方代码

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script src="/lib/echarts.min.js"></script>
<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
 
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
      data: ['销量']
    },
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  };
 
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
</script>
</body>
</html>复制

各种图形

改变series:中的type即可

type:‘bar’ 柱状图

type:‘line’ 折线图

type:‘pie’ 饼状图

具体参考常用图表类型 - 应用篇 - Handbook - Apache ECharts

交互

异步数据加载

动态的异步数据 - 数据处理 - 应用篇 - Handbook - Apache ECharts

设置[报表]按钮

 <script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
    <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加</button>
    <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="deleteBatch"> 删除 </button>
    <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="baobiao"> 报表</button>
    </div>
</script>复制

绑定事件

  } else if (obj.event === 'baobiao') {
     let content = miniPage.getHrefContent('/page/house/baobiao.html');
     let openWH = miniPage.getOpenWidthHeight();
     let index = layer.open({
         title: '报表统计',
         type: 1,
         shade: 0.2,
         maxmin: true,
         shadeClose: true,
         area: [openWH[0] + 'px', openWH[1] + 'px'],
         offset: [openWH[2] + 'px', openWH[3] + 'px'],
         content: content,
     });
     $(window).on("resize", function () {
         layer.full(index);
     });
 }复制

baobiao.html

因为是单页面开发,所以baobiao.html页面就是一个div容器

 <div class="layuimini-main">
    <!-- 报表容器 -->
    <div id="main" style="width: 600px;height:400px;"></div>
</div>
<script src="/lib/echarts.min.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption({
        title: {
            text: '房屋价格'
        },
        tooltip: {},
        legend: {
            data: ['价格']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [
            {
                name: '价格',
                type: 'bar',
                data: []
            }
        ]
    });
    layui.use(['jquery'], function () {
        let $ = layui.jquery;
        $(function (){
            $.get('/house/list/bb.do', function (ret) {
                // 填入数据
                myChart.setOption({
                    xAxis: {
                        // 后台返回的数据,后台需要返回的是数组/list集合
                        data: ret.data.name
                    },
                    series: [
                        {
                            // 根据名字对应到相应的系列
                            name: '销量',
                            data: ret.data.num
                        }
                    ]
                });
            })
        })
    })
</script>复制

后台

 // HouseController.java
@RequestMapping("/list/bb")
public ResultData listBaobiao(){
    ResultData data = houseService.findAll4Baobiao();
    return data;
}
 
// HouseServiceImpl.java
@Override
public ResultData findAll4Baobiao() {
    //1.查询全部
    List<House> list = houseMapper.findAll4Baobiao();
    //2.组装数据
    Map<String, ArrayList> map=new HashMap<>();
    map.put("name",new ArrayList());
    map.put("num",new ArrayList());
    list.forEach(d->{
        map.get("name").add(d.getAddress());
        map.get("num").add(d.getPrice());
    });
    return ResultData.ok(map);
}复制

练习:

按照房屋朝向,统计每个朝向的平均房价

     @Override
    public ResultData findAll4Baobiao2() {
        List<Map<String, Object>> list = houseMapper.findAll4Baobiao2( );
        System.out.println("报表--->" + list);
 
        ArrayList<Object> priceList = new ArrayList<>( );
        ArrayList<Object> dirList = new ArrayList<>( );
        for (Map<String, Object> map : list) {
            Object price = map.get("price");
            priceList.add(price);
 
            Object dir = map.get("dir");
            dirList.add(dir);
        }
 
        HashMap<String, List<Object>> resultMap = new HashMap<>( );
        resultMap.put("dirs",dirList);
        resultMap.put("price",priceList);
        return ResultData.ok(resultMap);
    }复制

 public interface HouseMapper {
    // 返回的是一个Map
    List<Map<String, Object>> findAll4Baobiao2();
}复制

  <select id="findAll4Baobiao2" resultType="java.util.Map">
        select dir,avg(price) price from house group by dir
  </select>复制

 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
 
<script src="echarts.min.js"></script>
<script src="/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script>
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
  $.get('/house/list/bb2.do',function (ret){
    // 绘制图表
    myChart.setOption({
      title: {
        text: '房屋朝向均价'
      },
      tooltip: {},
      xAxis: {
        data: ret.data.dirs
      },
      yAxis: {},
      series: [{
        name: '均价',
        type: 'bar',// bar柱状图
        data: ret.data.price
      }]
    });
  })
 
</script>复制

day60_echarts

Echarts

入门使用

各种图形

交互

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

JQuery中的load()、$

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

文本，wangEditor5展示HTML无样式，wangEditor5如何看源码，Ctrl U看CSS文件，代码高亮，Prism.js可以实现，解决方法，参考网页源代码的写法

【html】新建一个html并且在浏览器运行

SSM基于html的网上购物系统2nluo 在线充值

前端哥

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

解决npm install 报错 “npm err code 1“

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

JQuery中的load()、$

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	</head>
	<body>

	<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
	<div id="main" style="width: 600px;height:400px;"></div>
	<script src="/lib/echarts.min.js"></script>
	<script type="text/javascript">
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));

	// 指定图表的配置项和数据
	var option = {
	title: {
	text: 'ECharts 入门示例'
	},
	tooltip: {},
	legend: {
	data: ['销量']
	},
	xAxis: {
	data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
	},
	yAxis: {},
	series: [
	{
	name: '销量',
	type: 'bar',
	data: [5, 20, 36, 10, 10, 20]
	}
	]
	};

	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
	</script>
	</body>
	</html>

	<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
	<button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加</button>
	<button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="deleteBatch"> 删除 </button>
	<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="baobiao"> 报表</button>
	</div>
	</script>

	} else if (obj.event === 'baobiao') {
	let content = miniPage.getHrefContent('/page/house/baobiao.html');
	let openWH = miniPage.getOpenWidthHeight();
	let index = layer.open({
	title: '报表统计',
	type: 1,
	shade: 0.2,
	maxmin: true,
	shadeClose: true,
	area: [openWH[0] + 'px', openWH[1] + 'px'],
	offset: [openWH[2] + 'px', openWH[3] + 'px'],
	content: content,
	});
	$(window).on("resize", function () {
	layer.full(index);
	});
	}

	<div class="layuimini-main">
	<!-- 报表容器 -->
	<div id="main" style="width: 600px;height:400px;"></div>
	</div>
	<script src="/lib/echarts.min.js"></script>
	<script type="text/javascript">
	var myChart = echarts.init(document.getElementById('main'));
	myChart.setOption({
	title: {
	text: '房屋价格'
	},
	tooltip: {},
	legend: {
	data: ['价格']
	},
	xAxis: {
	data: []
	},
	yAxis: {},
	series: [
	{
	name: '价格',
	type: 'bar',
	data: []
	}
	]
	});
	layui.use(['jquery'], function () {
	let $ = layui.jquery;
	$(function (){
	$.get('/house/list/bb.do', function (ret) {
	// 填入数据
	myChart.setOption({
	xAxis: {
	// 后台返回的数据,后台需要返回的是数组/list集合
	data: ret.data.name
	},
	series: [
	{
	// 根据名字对应到相应的系列
	name: '销量',
	data: ret.data.num
	}
	]
	});
	})
	})
	})
	</script>

	// HouseController.java
	@RequestMapping("/list/bb")
	public ResultData listBaobiao(){
	ResultData data = houseService.findAll4Baobiao();
	return data;
	}

	// HouseServiceImpl.java
	@Override
	public ResultData findAll4Baobiao() {
	//1.查询全部
	List<House> list = houseMapper.findAll4Baobiao();
	//2.组装数据
	Map<String, ArrayList> map=new HashMap<>();
	map.put("name",new ArrayList());
	map.put("num",new ArrayList());
	list.forEach(d->{
	map.get("name").add(d.getAddress());
	map.get("num").add(d.getPrice());
	});
	return ResultData.ok(map);
	}

	@Override
	public ResultData findAll4Baobiao2() {
	List<Map<String, Object>> list = houseMapper.findAll4Baobiao2( );
	System.out.println("报表--->" + list);

	ArrayList<Object> priceList = new ArrayList<>( );
	ArrayList<Object> dirList = new ArrayList<>( );
	for (Map<String, Object> map : list) {
	Object price = map.get("price");
	priceList.add(price);

	Object dir = map.get("dir");
	dirList.add(dir);
	}

	HashMap<String, List<Object>> resultMap = new HashMap<>( );
	resultMap.put("dirs",dirList);
	resultMap.put("price",priceList);
	return ResultData.ok(resultMap);
	}

	public interface HouseMapper {
	// 返回的是一个Map
	List<Map<String, Object>> findAll4Baobiao2();
	}

	<select id="findAll4Baobiao2" resultType="java.util.Map">
	select dir,avg(price) price from house group by dir
	</select>

	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="width: 600px;height:400px;"></div>

	<script src="echarts.min.js"></script>
	<script src="/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
	<script>
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));
	$.get('/house/list/bb2.do',function (ret){
	// 绘制图表
	myChart.setOption({
	title: {
	text: '房屋朝向均价'
	},
	tooltip: {},
	xAxis: {
	data: ret.data.dirs
	},
	yAxis: {},
	series: [{
	name: '均价',
	type: 'bar',// bar柱状图
	data: ret.data.price
	}]
	});
	})

	</script>

day60_echarts

Echarts

入门使用

各种图形

交互

微信扫一扫：分享