基于Ecahrt的图表设计

最新推荐文章于 2024-04-10 12:54:18 发布

杨宇sss

最新推荐文章于 2024-04-10 12:54:18 发布

阅读量1.8k

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/m0_37942145/article/details/69831411

版权

java 专栏收录该内容

60 篇文章 0 订阅

订阅专栏

1.下载相应的架包,在下面根据自己的情况下载

2.在作品 -官方实例中找到自己想要的图表

然后复制相关的代码

这个是前端有相关的数据，可以直接运行

2.如果有后端的相关数据传输

1.1前端

<script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.min.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery-3.1.1.js"></script>
</head>
<body>

<div id="main" style="width: 600px;height:400px;"></div>

<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: []
}]
});

myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画

var names=[]; //类别数组（实际用来盛放X轴坐标值）
var nums=[]; //销量数组（实际用来盛放Y坐标值）

$.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "${pageContext.request.contextPath}/users.action", //请求发送到TestServlet处
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
for(var i=0;i<result.length;i++){
names.push(result[i].name); //挨个取出类别并填入类别数组
}
for(var i=0;i<result.length;i++){
nums.push(result[i].num); //挨个取出销量并填入销量数组
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis: {
data: names
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: nums
}]
});

}

},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})

</script>

1.2后端

List<Product> list = new ArrayList<Product>();

//这里把“类别名称”和“销量”作为两个属性封装在一个Product类里，每个Product类的对象都可以看作是一个类别（X轴坐标值）与销量（Y轴坐标值）的集合
list.add(new Product("衬衣", 10));
list.add(new Product("短袖", 20));
list.add(new Product("大衣", 30));

ObjectMapper mapper = new ObjectMapper(); //提供java-json相互转换功能的类

String json = mapper.writeValueAsString(list); //将list中的对象转换为Json格式的数组

//System.out.println(json);

//将json数据返回给客户端
response.setContentType("text/html; charset=utf-8");
response.getWriter().write(json);

和数据库的相关；连接一样，集合转换数组，对象转换成json对象，基本数据转换成字符，对于Resful而言可以直接调用不用eval方法，普通的要调用；

杨宇sss

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于Ecahrt的图表设计

1.下载相应的架包,在下面根据自己的情况下载2.在作品 -官方实例中找到自己想要的图表然后复制相关的代码 var dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];var data = [220,
复制链接

扫一扫