百度Echarts使用心得

最新推荐文章于 2024-11-05 22:07:06 发布

weixin_30781775

最新推荐文章于 2024-11-05 22:07:06 发布

阅读量134

点赞数

文章标签： javascript json xhtml ViewUI

原文链接：http://www.cnblogs.com/morning0529/p/4535848.html

版权

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();
})