Echarts - js
<script type="text/javascript">
var myChart;
myChart = echarts.init(document.getElementById('main')); var legendDate="";
var series="";
var ser="";
var legend="";
var option={};
$.ajax({
type: "post",
async: false, //同步执行
url: "task/result_charts",
dataType: "json", //返回数据形式为json
success: function (result) {
legendDate = ["2014","2015","2016"];
series = [ { "name":"2014", "type":"bar", "data":[51, 2, 43],"len":"中国"} ,{ "name":"2015", "type":"bar", "data":[55, 36, 4] ,"len":"美国"},{ "name":"2016", "type":"bar", "data":[5, 20, 40],"len":"英国"}];
legend = ["中国","美国","德国"];
optionSeries();
for(i=0;series.length>i;i++){
option.series[i]=series[i];
}
},
error: function (errorMsg) {
}
}); function optionSeries(){ option = {
title: {
text: '性能数据采集入库效率趋势图'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: legendDate
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: legend
},
series: [ ]
};
} //通过Ajax获取数据 myChart.setOption(option);
</script>
Echarts - js的更多相关文章
- echarts3 -arcgis echarts.js修改
在echarts.js中修改修改 clone 方法 其中 source instance of Array 修改为Object.prototype.toString.call(source) ...
- 前端数据可视化echarts.js使用指南
一.开篇 首先这里要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术,前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面,目前市面上的数据 ...
- echarts.js 做图表的插件
<scripttype="text/javascript"src="{uiurl()}echarts/echarts.js"></script ...
- echarts.js(图表插件)2.0版会导致 ZeroClipboard.js(复制插件)失效,3.0版未知。
解决方法:ZeroClipboard.js先于echarts.js加载.
- 图表工具--- ECharts.js学习(一) 简单入门
ECharts.js学习(一) 在项目开发的时候,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库.具体有哪几种可以看: 前端开发者常用的9个JavaScript图表库 EChar ...
- 关于echarts.js 柱形图
echarts.js官网: http://www.echartsjs.com/index.html 这是我所见整理最详细echarts.js 柱形图博客: https://blog.csdn.net/ ...
- 前端数据可视化echarts.js
一.echarts.js的优势与总体情况 echarts.js作为国内的IT三巨头之一的百度的推出一款相对较为成功的开源项目,总体上来说有这样的一些优点 1.容易使用 echarts.js的官方文档比 ...
- ECharts.js学习(一) 简单入门
EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比 ...
- ECharts JS应用:图表页面实现
因为要统计数据进行图表展示,所以就简单学习了 ECharts JS 的应用.它是一个纯Javascript图库,它依赖于一个轻量级的Canvas库 ZRender,并提供直观.生动.交互式和高度可定制 ...
- echarts.js应用之map
最近项目中用到了echarts.js中的map,我画了一个简版的案例,如下所示: 效果图: 主要代码如下: <!DOCTYPE html> <html lang="en&q ...
随机推荐
- 典型:Eayui项目aspx页面引用js
<link href="../Scripts/easyui1.3.5/themes/default/easyui.css" rel="stylesheet" ...
- Upgrading to Java 8——第三章 Optional and Similar Classes
Java程序员对付空指针异常已经好多年了.在Java8中将有新的方式去处理他们.通过包装一个潜在的可能为null的类称为Optianal. 在Java8中添加了the Optional, Option ...
- PDO应用
<?php //PDO:数据访问抽象层//dsn:数据源://带有事务功能:$dsn = "mysql:host=localhost;dbname=mydb"; ——建立数 ...
- 使用AzCopy跨账户迁移blob
昨天北美紧急通知要停掉几个开发和测试的订阅,当天必须完成,因为事情比较多,搞得有点我措手不及,但是唯一的遗憾是Azure VM. 因为在上面做了很多东西,很多资料和环境都是做好的,如果被删除掉实在可惜 ...
- WC2016游记
出发的时候,长沙忽然就出了太阳,明媚而和煦. [day0 25] 噫吁嚱,危乎高哉!蜀道之难,难于上青天! 总之本来上午已经准备好9:50的飞机…然后就在一次次的手机查询中变成了5点多…然后也不是直飞 ...
- 【BZOJ】【1041】【HAOI2008】圆周上的点
数学 orz hzwer 完全不会做…… 很纠结啊,如果将来再遇到这种题,还是很难下手啊…… 引用题解: [分析]: 样例图示: 首先,最暴力的算法显而易见:枚举x轴上的每个点,带入圆的方程,检查是否 ...
- 【BZOJ】【1016】【JSOI2008】最小生成树计数
Kruskal/并查集+枚举 唉我还是too naive,orz Hzwer 一开始我是想:最小生成树删掉一条边,再加上一条边仍是最小生成树,那么这两条边权值必须相等,但我也可以去掉两条权值为1和3的 ...
- Codeforces 343D Water Tree 分类: Brush Mode 2014-10-05 14:38 98人阅读 评论(0) 收藏
Mad scientist Mike has constructed a rooted tree, which consists of n vertices. Each vertex is a res ...
- Delphi的Socket编程步骤
ClientSocket 和ServerSocket几个重要的属性: 1.client和server都有port属性,需要一致才能互相通信 2.client有Address属性,使用时填写对方 ...
- codeforces 439C Devu and Partitioning of the Array(烦死人的多情况的模拟)
题目 //这是一道有n多情况的烦死人的让我错了n遍的模拟题 #include<iostream> #include<algorithm> #include<stdio.h ...