echarts 条形图异步加载数据
来源:互联网 发布:nginx for linux 安装 编辑:程序博客网 时间:2024/06/07 07:59
1.jsp中引入jquery.js ecahrt.js ,js部分代码如下
var myChart = echarts.init(document.getElementById('main'));
//显示标题,图例和空的坐标轴myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
//异步加载数据
$.get('${pageContext.request.contextPath}/echart',{},function (d){
var data = eval("("+d+")");
// 填入数据
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data.values
}]
});
});
2.后台返回json格式数据
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String[] categories = {"鞋", "衬衫", "外套", "牛仔裤"};
Integer[] values = {80, 50, 75, 100};
Map<String, Object> json = new HashMap<String, Object>();
json.put("categories", categories);
json.put("values", values);
JsonUtils.writeJson(json, req, resp);
}
3.效果图
1 0
- echarts 条形图异步加载数据
- echarts关系图异步加载数据
- Echarts条形图实战
- echarts异步数据加载和更新
- echarts异步数据加载和更新
- echarts异步数据加载和更新
- echarts中饼图的异步数据加载绘制
- echarts模拟从数据库异步加载数据
- echarts异步加载多组数据
- echarts异步加载柱状图数据叠加
- echarts异步数据加载使用总结
- echarts异步数据加载和更新
- echarts动态生成条形图
- Echarts折柱图异步加载
- Echarts扩展之ajax异步加载tooltip数据
- Echarts使用心得总结——异步数据加载
- Echarts扩展之ajax异步加载tooltip数据
- ECharts官方教程(五)【异步数据加载和更新】
- 测试PHP服务端是否支持SSL
- dwr框架的入门
- 用Python读写Excel文件
- Matlab面向对象编程的两种方式
- I Can Guess the Data Structure!
- echarts 条形图异步加载数据
- [李景山php]每天laravel-20161014|Validator.php-14
- BZOJ3037 创世纪
- 错误记录五
- Git深度使用经验总结
- ViewPager结合自定义View产生滑动pager下方有效圆点变动显示的效果
- UVA494 Kindergarten Counting Game
- file_get_contents获取https出错的解决办法
- ubantu 在vmware虚拟机中ping不通主机解决