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 ...
随机推荐
- Struts2原码分析系列之一
struts2概述 在struts2的官网上有这么一句话,翻译为:Apache Struts2是一个为企业级应用打造的优秀的.可扩展的WEB框架,该框架旨在充分精简应用程序的开发周期,从而减少创建.发 ...
- FushionCharts Free 的运用[2D/3D图表处理]
由于先前在一些论坛中谈论到这个插件的运用,留了一些QQ联系方式,最近老是被一些程序员“骚扰”,说是请教一些关于FushionChart Free图表的处理技术,先前还是比较乐意接受的,但发现后来一些完 ...
- android中 回调方法,怎么转变为阻塞执行的方法
项目中需要用到在wifi这一块,扫描附近wifi,然后一个个遍历所有wifi,并且尝试连接,所以就在这里需要每连接一个wifi进行阻塞,当连接失败的时候才进行尝试下一个连接,当连接成功时则break. ...
- Learning Java language Fundamentals
Chapter 2 Learning Java language fundamentals exercises: 1.What is Unicode? Unicode is a computing ...
- python 数据结构-字典
原文地址:http://docs.pythontab.com/python/python3.4/datastructures.html#tut-tuples 理解字典的最佳方式是把它看做无序的键: 值 ...
- SqlServer with递归查询的使用
1.数据准备假定有一个表DiGui,有两个字段Id int ParentId intId ParentId4 05 07 02 18 515 59 714 1130 1523 1541 18104 2 ...
- shell编程之环境变量
在shell编程里我们首先接触到的是环境变量,常用命令说明 1. 使用echo命令查看单个环境变量.例如: echo $PATH 2. 使用env查看所有环境变量.例如: env 3. 使用set查看 ...
- HDU 1028Ignatius and the Princess III(母函数简单题)
Ignatius and the Princess III Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d ...
- Reactor构架模式
http://www.cnblogs.com/hzbook/archive/2012/07/19/2599698.html Reactor框架是ACE各个框架中最基础的一个框架,其他框架都或多或少地用 ...
- Python:Python 3.x 的革新
Python 3.x 版本在设计时为了向最好的语言前进,没有考虑向下兼容,许多针对早期 Python 版本设计的程序都无法正常运行.本文简单介绍了 Python 3.x 版本较之 2.x 版本语法上的 ...