Echarts折线图和地图（个人总结）

Echarts折线图和地图（个人总结）

Echarts折线图和地图

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

ECharts 功能

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
本文只提供关于折线图的开发！如需更多服务请访问官网下载文档学习！
Echart官网：http://echarts.baidu.com/

开发前需要文件

1，js，json
jquery的应用js:jquery-1.11.2.min.js
echarts应用js:echarts.js
对应的地图js:china.js(中国地图)，china.json(中国地图json)
world.js(世界地图)
continent_geo.json(世界大洲图)
具体文件可下载：
https://pan.baidu.com/s/1MZ2loAhU4ZwPfkjHclPuug
提取码：rn2t

开发结构

本人是建立一个Spring的简单项目来访问的，根据自己需要吧，主要的是js和页面的编写：
1，首先上js，和jsp
jsp引入js

jsp中放置一个容纳折线图的div

js中代码
var myChart = echarts.init(document.getElementById(‘zhe’));
option = {
title: {
text: “域名请求数统计图”, //正标题
link: “”, //正标题链接 点击可在新窗口中打开
x: “center”, //标题水平方向位置
subtext: “–”, //副标题
sublink: “”, //副标题链接
//正标题样式
textStyle: {
fontSize:20
},
//副标题样式
subtextStyle: {
fontSize:12,
color:“red”
}
},
tooltip: { //提示框组件

            trigger: 'axis'
        },
        legend: {     //图例组件
            data: ['域名请求数量'],//这里需要与series内的每一组数据的name值保持一致  
        	y:"bottom"  
        },
        grid: {       //直角坐标系内绘图网格
            left: '3%',
            right: '4%',
            bottom: '6%',//与下方的距离
            containLabel: true
        },
        //工具箱配置  
        toolbox: {  
           show : true,  
           feature : {  
               mark : {show: true}, // 辅助线标志，分别是启用，删除上一条，删除全部  
               dataView : {show: true, readOnly: true},// 数据视图，打开数据视图  
               magicType : {show: true, type: ['line', 'bar']},// 图表类型切换，当前仅支持直角系下的折线图、柱状图转换，分别是切换折线图，切换柱形图  
               restore : {show: true}, // 还原，复位原始图表，还原  
               saveAsImage : {show: true} // 保存为图片，保存  
           }  
       },  
       calculable: true, 
        //轴配置  
        xAxis: {       //直角坐标系 grid 中的 x 轴
            type: 'category',
            boundaryGap: false,//是否在表格的边缘显示    留不留距离
            axisTick: {
                alignWithLabel: true
            },
            axisLine:{
            	  	lineStyle:{
            	 	  color: '#5793f3',//颜色
            		  width:1,
            	  	}
            	 },
             axisPointer: {
                 label: {
                     formatter: function (params) {//显示的值
                         return params.value
                             + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                     }
                 }
             },
            data: []
        },
        //Y轴配置  
        yAxis: [  
                {  
                	axisLine:{
                	  	lineStyle:{
                	 	  color: '#5793f3',
                		  width:1,
                	  	}
                	 },
                    type: 'value',  
                    splitArea: { show: true }, //表格变色 
                    name:"数值"   //如果需要显示总记录数，则需要后台统计好传递到页面，再此显示就行  
                }  
            ], 
        
      //图表Series数据序列配置  
        series: [      //系列列表
            {
                name: '域名请求数量',
                type: 'line',
                smooth: false,//曲线还是直线
                itemStyle:{  //折线拐点的样式
                    normal:{
                        color:'#C23531',  //折线拐点的颜色
                        emphasis:0,
                    }
                },
                lineStyle:{  //线条的样式
                    normal:{
                        color:'#20aefc',  //折线颜色
                    }
                },
                areaStyle:{ //区域填充样式
                    normal:{
                        //线性渐变
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0, color: '#b1e3fe' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#fff' // 100% 处的颜色
                        }], false)
                    }
                },
                showAllSymbol: false,//是否显示数据的所有转折点  
                data: []
            }

        ]
    };

/调用option生成图表/
myChart.setOption(option)
myChart.hideLoading();
function getChartData(time) {

   var  domainName =$("#domainName").val();
   //获得图表的options对象  
   var options = myChart.getOption();  
   $("#zhe").css('display','block');
   //设置副标题  根据所选的日期跨度   显示
   var subtext='';
   if(time== 'q') subtext='近一季度';
   if(time== 'month') subtext='近一个月';
   if(time== '7day') subtext='近一周';
   if(time== '1day') subtext='近一天';
   options.title[0].subtext =subtext ;  
   //通过Ajax获取数据  
   $.ajax({  
       type : 'post',  
       async : false, //同步执行  
       url : '<%=basePath%>zheajax',  
       data :{'domainName':domainName,'time':time},//参数（根据实际情况增减）
       dataType : 'json', 
       success : function(data) { 
    	   console.log(data[0]);
           if (data[0].flag=='true') {  
               options.legend.data =data[0].legend;  
               	//将返回的字符串转化成为数组形式的数据
               var asis=changestring(data[0].category);
               var series=changestring(data[0].series);
               //设置数据和x坐标
               options.xAxis[0].data =asis ;  
               options.series[0].data =series ;  

               myChart.hideLoading();  
               myChart.setOption(options);
           }else{
        	   alert('没有数据');
           } 
       },  
       error : function(errorMsg) {  
           alert('不好意思，图表请求数据失败!');  
           myChart.hideLoading();  
       }  
   });   

}
function changestring(objStr){
var str=objStr.substring(1,objStr.length-1);
//将返回的字符串转化成为数组形式的数据
var array=str.split(",");
return array;
}
2，后台
就是讲折线图需要的X坐标和y坐标的数据分别放置到map中，
最后通过json返回页面即可
jsonMap.put(“category”,"""+timeStr+"""); X坐标
jsonMap.put(“series”,"""+valueStr+"""); Y坐标
try {
response.setHeader(“P3P”, “CP=“CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR””);
response.setContentType(“application/json;charset=utf-8”);
PrintWriter out = response.getWriter();
System.out.println(JSONArray.fromObject(jsonMap).toString());
out.write(JSONArray.fromObject(jsonMap).toString());
out.flush();
out.close();
} catch (IOException e) {
e.printStackTrace();
}

有需要源码的可以联系我！