Echarts 简单使用

1：下载：

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

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

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

3：代码：

    

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"%>
















    
        频道名称
        频道id
    
    
    
    
    
    
        通州
        兆维
    
    

    
    

    
    

 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