Echarts 简单使用

这些年

浏览: 388502 次
性别:
来自: 北京

最近访客更多访客>>

hjz

xray2100

linkoog

luojianbing

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

1：下载：

url:http://echarts.baidu.com/

2：加入项目（官方说的不清楚，害老子搞了一天）

只须要把：doc\example\www\js下的js文件拷到项目中即可

3：代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!--Step:1 引入一个模块加载器，如esl.js或者require.js-->
    <script src="esl.js"></script>

</head>

<body>
    <!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->
    <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
    
    <script type="text/javascript">
    // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
    require.config({
        paths:{ 
            echarts:'./echarts',
            'echarts/chart/bar' : './echarts-map',
            'echarts/chart/line': './echarts-map',
            'echarts/chart/map' : './echarts-map'
        }
    });
    
    // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
    require(
        [
        'echarts',
        'echarts/chart/bar',
        'echarts/chart/line',
        'echarts/chart/map'
        ],
        function(ec) {
            //--- 折柱 ---
            var myChart = ec.init(document.getElementById('main'));

            // 过渡---------------------
            myChart.showLoading({
                text: '正在努力的读取数据中...',    //loading话术
            });

            var option = {
    legend: {                               // 图例配置
        orient:'horizontal',                    //布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
        x:'center',                             //水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
        y:'top',                                //垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
        backgroundColor:'rgba(0,0,0,0)',        //图例背景颜色，默认透明
        borderColor:  '#ccc',                   //图例边框颜色
        selectedMode:true,                      //图例不能点了（false）
        padding: 5,                             // 图例内边距，单位px，默认上下左右内边距为5
        itemGap: 10,                            // Legend各个item之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔
        data: []
    },
    toolbox: {                                 //小工具
        show : true,
        feature : {
            mark : true,
            dataZoom : true,
            dataView : true,
            magicType:['line', 'bar'],
            restore : true,
            saveAsImage : true
        }
    },
      dataZoom : {                             //缩略图
        show : true,
        realtime : true,
        start : 20,
        end : 80
    },
    tooltip: {                                  // 气泡提示配置
        trigger: 'axis',                        // 触发类型，默认数据触发，可选为：'axis'
    },

    xAxis: [                                    // 直角坐标系中横轴数组
    {
            type: 'category',                   // 坐标轴类型，横轴默认为类目轴，数值轴则参考yAxis说明
            boundaryGap: false,                 //数据从坐标轴顶开始
            data: []
        }
        ],
    yAxis: [                                    // 直角坐标系中纵轴数组
    {
            type: 'value',                       // 坐标轴类型，纵轴默认为数值轴，类目轴则参考xAxis说明                
            boundaryGap: [0.1, 0.1],            // 坐标轴两端空白策略，数组内数值代表百分比
            splitNumber: 4                      // 数值轴用，分割段数，默认为5
        }
        ],
        series: [
        
        ]
    };  
    var jsonranklist={"data":{"1":12,"2":56,"3":20,"4":6},"indata":{"1":3,"2":16,"3":28,"4":56}};//可从后台传入
    var xname=[];

    for(var key in jsonranklist){
        var databand=[];
        if(key=="data"){
            for(var datakey in jsonranklist[key]){
                databand.push(jsonranklist[key][datakey]);
                xname.push(datakey);
            }
        }
        if(key=="indata"){
            for(var datakey in jsonranklist[key]){
                databand.push(jsonranklist[key][datakey]);
            }

        }

    option.legend.data.push(key);//追加数据
    seriesx={name:key,type:'line',data:databand,itemStyle: {normal: {areaStyle: {}}},stack:'a'};//参数分别表示：数据名称，图表类型，数据，样式：在此是填充，数据叠加（堆积图：相同stack名字的加在一起）
    option.series.push(seriesx);


}
option.xAxis[0].data=xname;
myChart.setOption(option);


}
);
</script>
</body>
</html>

4:通过后台传json来重新绘制图表

1）：对上面的代码进行修改

// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
		var ECharts;   //使其它方法可以访问到它
		require([ 'echarts', 'echarts/chart/bar', 'echarts/chart/line',
				'echarts/chart/map' ], function(ec) {
			//--- 折柱 ---
			ECharts=ec;
			var myChart = ec.init(document.getElementById('main'));

2）：对一按钮增加单击事件然后传值刷新图表

$('#channelBandwidth').click( function() {
				$.ajax({
					　　type:'get',//可选get
					　　url:'${projectPath}/search',
					　　data:{"channelType":$('#channelType').val(),"channel":$('#channel').val(),"day":$('#day').val(),"startTime":$('#startTime').val(),"endTime":$('#endTime').val(),"database":$('#database').val()},
					　　dataType:'text',//服务器返回的数据类型 可选XML ,Json jsonp script htmltext等
					　　success:function(msg){
						var msgObj=JSON.parse(msg);  //因为图表接收的是对象而ajax返回的是字符串，所以须转换
						//重新构建图形
						var myChart = ECharts.init(document.getElementById('main'));
					　     setoptiondata(msgObj,myChart);
					　    					　
				　　},
					　　error:function(){
					　　alert('error');
					　　}
			})})

具体代码如下

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!--Step:1 引入一个模块加载器，如esl.js或者require.js-->
<script src="resources/echarts/esl.js"></script>
<script src="resources/echarts/echarts.js"></script>
<script src="resources/echarts/echarts-map.js"></script>

<script type="text/javascript">
        $(document).ready(function() {
            
            $('#channelBandwidth').click( function() {
                $.ajax({
                    　　type:'get',//可选get
                    　　url:'${projectPath}/search',
                    　　data:{"channelType":$('#channelType').val(),"channel":$('#channel').val(),"day":$('#day').val(),"startTime":$('#startTime').val(),"endTime":$('#endTime').val(),"database":$('#database').val()},
                    　　dataType:'text',//服务器返回的数据类型 可选XML ,Json jsonp script htmltext等
                    　　success:function(msg){
                        var msgObj=JSON.parse(msg);
                        //重新构建图形
                        var myChart = ECharts.init(document.getElementById('main'));
                    　     setoptiondata(msgObj,myChart);
                    　     
                    　
                　　},
                    　　error:function(){
                    　　alert('error');
                    　　}
            })})
        });
       
    </script>
</head>

<body>

    <select name="channelType" id="channelType">
        <option value="channelName">频道名称</option>
        <option value="channelId">频道id</option>
    </select>
    <input type="test" name="channel" id="channel" />
    <input type="test" name="day" id="day" />
    <input type="test" name="startTime" id="startTime" />
    <input type="test" name="endTime" id="endTime" />
    <select name="database" id="database">
        <option value="tz">通州</option>
        <option value="zw">兆维</option>
    </select>
    <input type="button" id="channelBandwidth" value="查询" />

    <!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->
    <div id="main"
        style="height: 500px; border: 1px solid #ccc; padding: 10px;"></div>
    
    <script type="text/javascript">
        // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
        require.config({
            paths : {
                echarts : './echarts',
                'echarts/chart/bar' : './echarts-map',
                'echarts/chart/line' : './echarts-map',
                'echarts/chart/map' : './echarts-map'
            }
        });

        // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
        var ECharts;
        require([ 'echarts', 'echarts/chart/bar', 'echarts/chart/line',
                'echarts/chart/map' ], function(ec) {
            //--- 折柱 ---
            ECharts=ec;
            var myChart = ec.init(document.getElementById('main'));

            // 过渡---------------------
            myChart.showLoading({
                text : '正在努力的读取数据中...', //loading话术
            });

            
            jsonranklist = {"data":{"2013-11-08":3,"2013-11-07":5,"2013-11-06":3,"2013-11-05":12},"indata":{"2013-11-08":9,"2013-11-07":7,"2013-11-06":23,"2013-11-05":5}};//可从后台传入
            setoptiondata(jsonranklist,myChart);

        });
    function setoptiondata(jsonranklist,myChart){
        var option = {
                legend : { // 图例配置
                    orient : 'horizontal', //布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
                    x : 'center', //水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
                    y : 'top', //垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
                    backgroundColor : 'rgba(0,0,0,0)', //图例背景颜色，默认透明
                    borderColor : '#ccc', //图例边框颜色
                    selectedMode : true, //图例不能点了（false）
                    padding : 5, // 图例内边距，单位px，默认上下左右内边距为5
                    itemGap : 10, // Legend各个item之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔
                    data : []
                },
                toolbox : { //小工具
                    show : true,
                    feature : {
                        mark : true,
                        dataZoom : true,
                        dataView : true,
                        magicType : [ 'line', 'bar' ],
                        restore : true,
                        saveAsImage : true
                    }
                },
                dataZoom : { //缩略图
                    show : true,
                    realtime : true,
                    start : 20,
                    end : 80
                },
                tooltip : { // 气泡提示配置
                    trigger : 'axis', // 触发类型，默认数据触发，可选为：'axis'
                },

                xAxis : [ // 直角坐标系中横轴数组
                {
                    type : 'category', // 坐标轴类型，横轴默认为类目轴，数值轴则参考yAxis说明
                    boundaryGap : false, //数据从坐标轴顶开始
                    data : []
                } ],
                yAxis : [ // 直角坐标系中纵轴数组
                {
                    type : 'value', // 坐标轴类型，纵轴默认为数值轴，类目轴则参考xAxis说明                
                    boundaryGap : [ 0.1, 0.1 ], // 坐标轴两端空白策略，数组内数值代表百分比
                    splitNumber : 4
                // 数值轴用，分割段数，默认为5
                } ],
                series : [

                ]
            };
        var xname = [];
        for ( var key in jsonranklist) {
            var databand = [];
            if (key == "data") {
                for ( var datakey in jsonranklist[key]) {
                    databand.push(jsonranklist[key][datakey]);
                    xname.push(datakey);
                }
            }
            if (key == "indata") {
                for ( var datakey in jsonranklist[key]) {
                    databand.push(jsonranklist[key][datakey]);
                }

            }

            option.legend.data.push(key);//追加数据
            seriesx = {
                name : key,
                type : 'line',
                data : databand,
                itemStyle : {
                    normal : {
                        areaStyle : {}
                    }
                },
                stack : 'a'
            };
            option.series.push(seriesx);

        }
        option.xAxis[0].data = xname;
        myChart.setOption(option,true);
    }
    </script>

</body>
</html>

5：坐标轴单位格式化

yAxis : [ // 直角坐标系中纵轴数组
{
type : 'value', // 坐标轴类型，纵轴默认为数值轴，类目轴则参考xAxis说明
axisLabel : {
formatter:function(value){ //个性化y轴单位
if(value<1000){
return value + ' Byte';
}else if(value<1000000){
return value/1000 +' KB';
}else if(value<1000000000){
return value/1000000 +' MB';
}else if(value<1000000000000){
return value/1000000000 +' GB';
}else if(value<1000000000000000){
return value/1000000000000 +' TB';
}else{
return value/1000000000000000 +' PB';
}
}
}

提示气泡数据格式化

tooltip : { // 气泡提示配置
			trigger : 'axis', // 触发类型，默认数据触发，可选为：'axis'
			   formatter:function(value){
		        	return unitdata(value);
				}
		}

6:2.0增加了用户事件交互（http://echarts.baidu.com/doc/example/event.html）

配置（optione下的calculable:true可以使用所有数据响应事件）

var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.CLICK, eConsole);

会调用自定义函数 function eConsole(param) param.name可以得到x轴数据

7:显示图表最值（http://echarts.baidu.com/doc/example/mix10.html）

 markPoint : {
                symbol: 'emptyPin',
                itemStyle : {
                    normal : {
                        color:'#1e90ff',
                        label : {
                            show:true,
                            position:'top',
                            formatter: function (a,b,v) {
                                return Math.round(v/10000) + ' 万'
                            }
                        }
                    }
                },
                data : [
                    {type : 'max', name: '最大值', symbolSize:5},
                    {type : 'min', name: '最小值', symbolSize:5}
                ]
            },
            markLine : {
                symbol : 'none',
                itemStyle : {
                    normal : {
                        color:'#1e90ff',
                        label : {
                            show:true,
                            formatter: function (a,b,v) {
                                return Math.round(v/10000) + ' 万'
                            }
                        }
                    }
                },
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        }

8：图例线为直线图表中不显示图例线（areaStyle: {}用来填充数据型流量图）

seriesx = {name:bunamestr,type:'line',data:outdataband,symbol: 'none',itemStyle: {normal: {areaStyle: {},lineStyle: {width:0}}},stack:'a'};

官方api还可以，可以照着来：http://echarts.baidu.com/doc/doc.html

分享到：

表单绑定验证（转） | js中的数组

2013-12-29 21:14
浏览 14591
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论