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. EffectiveC#15--使用using和try/finally来做资源清理

    1.任何时候你在使用一个有Dispose()方法的类型时,你就有责任来调用Dispose()方法来释放资源. 最好的方法来保证Dispose()被调用的结构是使用using语句或者try/finall ...

  2. JavaBean和EJB的区别

    首先,EJB是指运行在EJB容器中的JavaBean.Tomcat是Web容器的参考实现.一个完整的JavaEE服务器应该包括Web容器和EJB容器.其次,Web容器中无法运行EJB,同时所有的Jav ...

  3. Sql Server中charindex、patindex的区别

    SQL代码如下: select charindex('1,','121,1,1234') select patindex('%1,%','121,1,1234') ','121,1,1234') se ...

  4. css链接，列表，表格

    1.css链接 a:link - 正常,未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被点击的那一刻 注意: a:h ...

  5. 使用图片拉伸resizableImageWithCapInsets

    在仿写QQ会话的时候背景蓝色图片是拉伸而来,但是有些地方是受保护的不能拉伸 所以定义了下面的工具类中的一个方法,专门拉伸图片 UIImageResizingModeStretch:拉伸模式,通过拉伸U ...

  6. C#索引器：在集合或数组中取出某一个元素 举例 _【转】

    Garmmar: [访问修饰符] 数据类型 this[参数列表] { get { 获取索引器的内容 } set { 设置索引器的内容 } } Eg: <span style="font ...

  7. SQL Server 2000/2005 分页SQL — 单条SQL语句

    有关分页 SQL 的资料很多,有的使用存储过程,有的使用游标.本人不喜欢使用游标,我觉得它耗资.效率低:使用存储过程是个不错的选择,因为存储过程是经过预编译的,执行效率高,也更灵活.先看看单条 SQL ...

  8. Struts2 - 常用的constant标签[转]

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-/ ...

  9. C# 连接 数据库的时候 出现 程序出现异常"尝试读取或写入受保护的内存这通常指示其他内存已损坏" 错误

    今天调试程序的时候出现了毫无征兆的就出现了如标题所述 的错误,我之前的程序 都运行的好好的,网上 找了 好多帖子 ,都是没有找到解决方案,最后 一个问一个同事 不知道他在哪儿找到了一个解决方案,说是 ...

  10. URL锚点定位

    我们都知道<a>标签中的url属性有三种值: 绝对 URL - 指向另一个站点(比如 href="http://www.example.com/index.htm") ...