echarts图表演示图表演示
Posted teayear
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts图表演示图表演示相关的知识，希望对你有一定的参考价值。
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.效果
二.引入项目
1.在webapp下增加对js的引用
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
@Autowired
SalaryService salaryService;
@RequestMapping("/selectSalary")
@ResponseBody
public 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
@Autowired
SalaryDao salaryDao;
@Override
public 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 e
INNER JOIN salary s
on e.EID=s.EID
</select>
</mapper>
6.效果
扩展：
柱状图，精炼格式：
<%@ 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-pattern
data : ,
dataType : 'json', //返回数据形式为json
success : function(result)
if (result)
//初始化xAxis[0]的data
option.xAxis[0].data = [];
for (var i=0; i<result.length; i++)
option.xAxis[0].data.push(result[i].name);
//初始化series[0]的data
option.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'
]
;
//加载数据到option
loadData(option);
//设置option
myChart.setOption(option);
</script>
</body>
</html>
: [
type : 'category'
],
yAxis : [
type : 'value'
],
series : [
name : '销量',
type : 'bar'
]
;
//加载数据到option
loadData(option);
//设置option
myChart.setOption(option);
</script>
</body>
</html>
以上是关于echarts图表演示图表演示的主要内容，如果未能解决你的问题，请参考以下文章