echarts图表演示图表演示

news/2024/11/8 22:46:44/

eCharts图表演示

比如说，公司现在接一个项目，这个中信银行，针对之前所有的贷款、大 小客户，要做出来图表系统（演示和查看）、报表系统（用来打印）。

郑州的大数据产业局，黄强：图表系统。

官网：

https://echarts.apache.org/zh/index.html

源于百度

一.超简单入门

1.引入 ECharts

<script src="echarts.min.js"></script>

2.绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。这个DOM容器的作用，就是一块画布。图表在这个画布上进行绘制。

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

3.绘制

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="echarts.min.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例,init初始化操作；//var myChart=echarts.init($("#main")),这种形式出不来。这里用的原生js来获取main对象var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据,option如何配置的呢？//采用的是什么样的形式？？？json格式//option={title:{}}var option = {title: {text: 'ECharts 入门示例'},tooltip: {},   //提示信息legend: {data:['销量']},xAxis: {//data：数据,x 轴的数据data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>
</html>

4.效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6BSiETFa-1672666125763)(E:\政通路\课堂笔记\S2\echarts\assets\image-20200825125201105.png)]

二.引入项目

1.在webapp下增加对js的引用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CN3s8Iqd-1672666125765)(E:\政通路\课堂笔记\S2\echarts\assets\image-20200825125252486.png)]

2.echarts页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>测试echarts案例</title><script src="static/js/echarts.min.js"></script><script src="static/js/jquery-2.1.0.min.js"></script><script></script>
</head>
<body><%--构建div主体--%><div id="main" style="width: 600px;height: 400px;"></div><script type="text/javascript">$(function() {// 初始化var myChart = echarts.init(document.getElementById('main'));//var myChart = echarts.init($('#main')[0]); // 注意：这里init方法的参数的javascript对象，使用jQuery获取标签时，要将jQuery对象转成JavaScript对象；// 配置图标参数var options = {title: {text: '员工工资',show: true, // 是否显示标题subtext: '实发工资',textStyle: {fontSize: 18 // 标题文字大小}},tooltip: {// trigger: 'axis',// axisPointer: {//     type: 'shadow'// }trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},legend: {//orient: 'vertical',//left: 'left',data: ['销量']},// X轴xAxis: {data: [] // 异步请求时,这里要置空},// Y轴yAxis: {},series: [{name: '销量',type: 'pie', // 设置图表类型为柱状图data: [] // 设置纵坐标的刻度(异步请求时,这里要置空)}]};// 给图标设置配置的参数myChart.setOption(options);myChart.showLoading(); // 显示加载动画
// 异步请求加载数据$.ajax({url: 'selectSalary',type: 'get',dataType: 'json',success: function(data) {var names = [];var fa = [];var result=[];console.log(names)$.each(data, function(index, obj) {names.push(obj.name);fa.push(obj.value);//  result[index]["name"]=obj.EName;//result[index]["value"]=obj.fa;})console.log(JSON.stringify(result))myChart.hideLoading(); // 隐藏加载动画myChart.setOption({legend: {/*//图例垂直排列orient: 'vertical',*/type: 'scroll',orient: 'vertical',padding:[80,50,0,0],x: 'left',data: names},xAxis: {data: []},yAxis:{data:[]},series: [{name: '工资',type: 'pie', // 设置图表类型为柱状图data: data    // 设置纵坐标的刻度}]});},error:function (data) {console.log(data);}});});</script>
</body>
</html>

核心代码：

异步加载

({url: 'selectSalary',type: 'get',dataType: 'json',success: function(data) {var names = [];var fa = [];var result=[];console.log(names)$.each(data, function(index, obj) {names.push(obj.name);fa.push(obj.value);//  result[index]["name"]=obj.EName;//result[index]["value"]=obj.fa;})console.log(JSON.stringify(result))myChart.hideLoading(); // 隐藏加载动画myChart.setOption({legend: {/*//图例垂直排列orient: 'vertical',*/type: 'scroll',orient: 'vertical',padding:[80,50,0,0],x: 'left',data: names},xAxis: {data: []},yAxis:{data:[]},series: [{name: '工资',type: 'pie', // 设置图表类型为柱状图data: data    // 设置纵坐标的刻度}]});},error:function (data) {console.log(data);}
});

3.控制器

SalaryController

@Controller
public class SalaryController {@AutowiredSalaryService salaryService;@RequestMapping("/selectSalary")@ResponseBodypublic List<Map<String,Object>> selectSalary(){List<Map<String,Object>> salaries = salaryService.selectSalary();return salaries;}
}

4.service层

public interface SalaryService {List<Map<String,Object>> selectSalary();
}

@Service("salaryService")
public class SalaryServiceImpl implements SalaryService {@AutowiredSalaryDao salaryDao;@Overridepublic List<Map<String,Object>> selectSalary() {return salaryDao.selectSalary();}
}

5.dao层和xml实现

public interface SalaryDao {List<Map<String,Object>>selectSalary();
}

<mapper namespace="com.aaa.mapper.SalaryDao">
<!--注意，我这里使用了别名,???--><select id="selectSalary" resultType="java.util.Map">select e.EName 'name',s.fa  'value' from    emp eINNER JOIN salary son e.EID=s.EID</select>
</mapper>

6.效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ojcq5d1O-1672666125767)(E:\政通路\课堂笔记\S2\echarts\assets\image-20200825125816288.png)]

扩展：

柱状图，精炼格式：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>我的echarts案例</title><script src="static/js/jquery-2.1.0.min.js"></script><script src="static/js/echarts.min.js"></script>
</head>
<body><%--1.设计一个div--%><div id="main" style="width:600px;height: 400px;"></div><%--2.js 进行异步调用--%><script>function loadData(option) {$.ajax({type : 'get',  //传输类型async : false, //同步执行url : 'salary/selectSalary',   //web.xml中注册的Servlet的url-patterndata : {},dataType : 'json', //返回数据形式为jsonsuccess : function(result) {if (result) {//初始化xAxis[0]的dataoption.xAxis[0].data = [];for (var i=0; i<result.length; i++) {option.xAxis[0].data.push(result[i].name);}//初始化series[0]的dataoption.series[0].data = [];for (var i=0; i<result.length; i++) {option.series[0].data.push(result[i].value);}}},error : function(errorMsg) {alert("加载数据失败");}});//AJAX}//loadData()var myChart = echarts.init(document.getElementById('main'));var option = {title: {text: 'ECharts技术(柱状图)'},tooltip : {show : true},legend : {data : [ '工资' ]},xAxis : [ {type : 'category'} ],yAxis : [ {type : 'value'} ],series : [ {name : '销量',type : 'bar'} ]};//加载数据到optionloadData(option);//设置optionmyChart.setOption(option);</script>
</body>
</html>
: [ {type : 'category'} ],yAxis : [ {type : 'value'} ],series : [ {name : '销量',type : 'bar'} ]};//加载数据到optionloadData(option);//设置optionmyChart.setOption(option);</script>
</body>
</html>

http://www.ppmy.cn/news/8997.html

相关文章

第一章 R语言介绍

第一章 R语言介绍

1.为何使用R 与起源于贝尔实验室的S语言类似&#xff0c;R也是一种为统计计算和绘图而生的语言和环境&#xff0c;它是一套开源的数据分析解决方案&#xff0c;由一个庞大且活跃的全球性研究型社区维护。但是&#xff0c;市面上也有许多其他流行的统计和制图软件&#xff0c;如…
阅读更多...
# 分布式理论协议与算法 第二弹 ACID原则

# 分布式理论协议与算法 第二弹 ACID原则

ACID 原则是在 1970年 被 Jim Gray 定义&#xff0c;用以表示事务操作&#xff1a;一个事务是指对数据库状态进行改变的一系列操作变成一个单个序列逻辑元操作&#xff0c;数据库一般在启动时会提供事务机制&#xff0c;包括事务启动 停止 取消或回滚。 但是上述事务机制并不真…
阅读更多...
ODT在手，DDR5布线可以任性走？

ODT在手，DDR5布线可以任性走？

作者&#xff1a;一博科技高速先生成员 姜杰 ODT是On Die Termination的缩写&#xff0c;又叫片内端接&#xff0c;顾名思义&#xff0c;就是把端接电阻放在了芯片内部。作为一种端接&#xff0c;ODT可以减小反射&#xff0c;对信号质量的改善显而易见&#xff0c;SI攻城狮很…
阅读更多...
【C++】网络编程（TCPUDP）

【C++】网络编程（TCPUDP）

网络编程是C API操作中很重要的一部分&#xff0c;包含TCP和UDP。 网络传输模型可以抽象为7个层&#xff1a;物理层、数据链路层、网络层、传输层、会话层、表示层、应用层。 但在使用TCP/IP协议时&#xff0c;可以简化为这4层&#xff1a;网络接口、网络层、传输层、应用层。…
阅读更多...
国产FPGA应用--易灵思Programming Mode完全解析

国产FPGA应用--易灵思Programming Mode完全解析

本文介绍易灵思的几种配置模式&#xff0c;方便大家参考。 一、易灵思下载模式&#xff1a; 二、下载模式选择&#xff1a; 1、SPI Active mode 时序图如下&#xff1a; 2、SPI Passive Mode 时序图如下&#xff1a; SPI Active using JTAG Bridge 实际项目中&#xff0c;SPI…
阅读更多...
Spring Boot内存泄露，排查

Spring Boot内存泄露，排查

背景 为了更好地实现对项目的管理&#xff0c;我们将组内一个项目迁移到MDP框架&#xff08;基于Spring Boot&#xff09;&#xff0c;随后我们就发现系统会频繁报出Swap区域使用量过高的异常。笔者被叫去帮忙查看原因&#xff0c;发现配置了4G堆内内存&#xff0c;但是实际使…
阅读更多...
企业电子招投标采购系统源码之登录页面

企业电子招投标采购系统源码之登录页面

电子招标采购&#xff0c;是指在网上寻源和采购产品和服务的过程。对于企业和企业主来说&#xff0c;这是个既省钱又能提高供应链效率的有效方法。对建筑业来说&#xff0c;通过信息化系统在网上开展招标采购流程的电子招标采购&#xff0c;是管理复杂供应链和多层供应商的高效…
阅读更多...
＜C++＞二叉树进阶

＜C++＞二叉树进阶

文章目录为什么要学这一节1. 二叉搜索树1.1 二叉搜索树概念1.2 二叉搜索树操作1.3 二叉搜索树的实现1.4 二叉搜索树的应用1.5 二叉搜索树的性能分析2. 经典题目2.1 最近公共祖先2.2 从前序与中序遍历序列构造二叉树2.3 二叉树的前序遍历&#xff08;非递归&#xff09;为什么要…
阅读更多...
最新文章

Copyright @ 2022~2023