echarts官网:http://echarts.baidu.com/index.html

最近用了echart,有一下问题需要注意:

1.echarts的使用实例

代码:从地图中取得whitejson5.json文件,在利用ajax 传入到网页中,修改whitejson5.json里面的数据可以修改地图的显示效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<title>ECharts</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ECharts">
<meta name="author" content="kener.linfeng@gmail.com">
<title>无标题文档</title>
<style>
#div1{ width:960px; height:800px; margin:0 auto; border:1px solid #e3e3e3;} </style>
<script type="text/javascript" src="echarts-2.2.2/build/dist/echarts-all.js"></script>
<script type="text/javascript" src="jquery-2.1.4.js"></script> </head> <body>
<div id="div1"></div> </body> <script type="text/javascript">
option = {
title : {
text: 'iphone销量',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item'
},
legend: {
orient: 'vertical',
x:'left',
data:[]
},
dataRange: {
min: 0,
max: 2500,
x: 'left',
y: 'bottom',
text:['高','低'], // 文本,默认为数值文本
calculable : true
},
toolbox: {
show: true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
roamController: {
show: true,
x: 'right',
mapTypeControl: {
'china': true
}
},
series : [
{
name: '',
type: 'map',
mapType: 'china',
roam: false,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[], }, ]
};
var myChart = echarts.init(document.getElementById('div1')); // alert(JSON.stringify(option.series[0].data).length);
$.ajax({
type:"GET",
url:"whitejson5.json",/*http://192.168.109.21:8080/DataBaseService/demo*/
dataType:"json",
async:false,
success: function(data){
option.series[0].data = data;
},
});
myChart.setOption(option); </script>
</html>

2.利用select的value属性来切换不同的div块?

html:
<select name="type" id="se" >
<option id="online" value="1">在线人数</option>
<option id="history" value="2">历史人数</option>
</select>
<div>
<div id="div1" class="main"></div>
<div id="div2" class="main"> </div>
</div> jquery: $("#se").change(function(){
var id="#id"+$("se").val();//提取id值
$(".main").hide();
$("id").show();
})

3.如何使用ajax获取数据?

百度Echarts使用心得的更多相关文章

  1. WPF仿百度Echarts人口迁移图

    GitHub地址:https://github.com/ptddqr/wpf-echarts-map/tree/master 关于大名鼎鼎的百度Echarts我就不多说了 不了解的朋友直接看官方的例子 ...

  2. C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计

    在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.echarts功能强大,界 ...

  3. ECharts使用心得总结(二)

    Echarts使用心得总结(二) 前言: 前一段时间一直都挺忙的,各种事,也没来得及每周的总结,趁着晚上的一点时间把项目中用的Echart中常用的各种图表给抽象总结了一下,趁着周末跟大家分享一下.之前 ...

  4. 完整版ajax+百度echarts实现统计图表demo并随着窗口大小改变而自适应

    1.前言 百度Echarts会常用到我们的项目中做统计,api很详细,demo也非常之多,我们常用的是应有尽有了,做一些小项目的时候,百度echarts的demo已足够用了.今天呢.主要是跟小白讲一下 ...

  5. 百度echarts使用--y轴label数字太长难以全部显示

    问题: 今天遇到个小问题,我们系统前端呈现使用了百度echarts.在绘制折线图的时候,因为数字过大,导致显示出现了问题. 解决方案: 左边y轴的值默认是根据我们填充进去的值来默认分割的,因为原始值就 ...

  6. ECharts使用心得总结

    https://blog.csdn.net/whiteosk/article/details/52684053 项目中的图表形式很多,基本可以在ECharts中找到相应实例,但UI设计图中的图表跟百度 ...

  7. mark 百度Echarts统计图表

    mark http://git.oschina.net/seeyoui/kensite_cms/blob/master/src/main/java/com/seeyoui/kensite/framew ...

  8. 百度ECharts数据绑定诀窍

    百度Echarts的功能还是蛮好用的.. 不能说多好但是也不次.. 下边就分享一些数据绑定经验..对在处理过程中的思路有一些帮助... 报表里用的最多的可以说是 饼状图和柱形图.. 饼状图里当然是包括 ...

  9. 使用百度Echarts制作力导向图

    最近项目需求制作一个力导向图来展示企业的画像等关系信息,故想到了百度Echarts的关系图,在这使用Echarts3.0版本来实现.先上效果图,再看代吗 哎,本来想整个工程扔出来,发现好像没地方上传附 ...

随机推荐

  1. baidu地图让多个标注出现在最佳视野

    原文:http://www.cnblogs.com/milkmap/archive/2011/08/23/2150641.html 摘要: “我有一堆标注,不规则的散落在地图的各个地方,我想把它们展示 ...

  2. android 注释常用标签

    javadoc: {@link ActivityGroup}   链接到包.类: {@link #setContentView} 用#链接到类成员: @return View The current ...

  3. MJRefresh(上拉加载下拉刷新)

    整理自:https://github.com/CoderMJLee/MJRefresh#%E6%94%AF%E6%8C%81%E5%93%AA%E4%BA%9B%E6%8E%A7%E4%BB%B6%E ...

  4. UISwitch 监听响应

    UISwitch *swh = [[UISwitch alloc]initWithFrame:CGRectMake(100,100, 50, 30)];        swh.on = YES;    ...

  5. 【转】研华Adam6060某段时间后无法连接的问题

    配合乙方测试,需连接现场Adam模块.一段时间后发现模块无法连接,网上资料甚少,发现此贴,记录下.以前没有多客户端高频次(其实谈不上高)连接,没有考虑连接释放的问题.另外,官方Demo也没有释放连接. ...

  6. stretchlim函数分析

    在看imadjust代码时,看到stretchlim函数,特此分析一下,代码注释如下 function lowhigh = stretchlim(varargin) %STRETCHLIM Find ...

  7. NOI十连测 第五测 T1

    #include<cstdio> #include<cstring> #include<cmath> #include<iostream> #inclu ...

  8. I2C串行总线标准驱动程序(C51)-万能程序

    #include "reg51.h" #include "intrins.h" unsigned char SystemError; sbit SCL= P1^ ...

  9. cf479C Exams

    C. Exams time limit per test 1 second memory limit per test 256 megabytes input standard input outpu ...

  10. App 推荐:Spotify

    之前一直用网易云音乐听歌,后来因为沸沸扬扬的 XCode 注入病毒事件,就把它卸了(无奈脸=.=) 对比国内其它音乐App,私心觉得网易云音乐还是不错的.没有很多花里胡哨的装饰,里面的歌单做的也还算精 ...