因为工作需要，第一件事做的便是echarts图的展示，虽然看起来只是前台拿来数据，展示到echarts图上，但是这中间还是有许多的小故障耗费了一些时间，下面便是我的一些简单了解：
首先如果使用echarts，创建的五个步骤：
1、引入e'charts<script type="text/javascript" src="echarts.js"></script>
2、创建一个DOM容器，里面用来放置我们将要展示的echarts图，其实就是创建 div 标签
<div id="container" style="width: 600px; height: 600px;margin: 40px;"></div>
3、初始化我们创建的echarts实例
var myChart = echarts.init(document.getElementById("container"));
4、制定图标的配置项以及数据，但是我的数据是通过ajax来动态获取的，所以这里只是一些配置项
echarts官网配置项这是官网的配置项，特别多，下面我只是使用了一点基础的：
option = {
title: {
text: '经纬度'
},
tooltip: {
formatter: function (params) {
return '经度: ' + params.data[0].toFixed(2) + '<br>纬度: ' + params.data[1].toFixed(2);
},
axisPointer: {
type: 'cross'
}
},
toolbox : {
show : true,
feature : {
dataView : {
show : true
},
saveAsImage : {
show : true
}
},
},
legend: {
data:['执行轨迹']
},
grid: {
left: '10%',
right: '10%',
bottom: '20%',
containLabel: true
},
xAxis: {
name:'经度',
type: 'value',
axisLine: {onZero: false}
},
yAxis: {
name:'纬度',
type: 'value',
axisLine: {onZero: false}
},
series: [
{
id: 'a',
name:'执行轨迹',
type: 'line',
smooth: true,
symbolSize: symbolSize，
markLine : {
data : [
// 纵轴，默认
{type : 'max', name: '最大值', itemStyle:{normal:{color:'#dc143c'}}},
{type : 'min', name: '最小值', itemStyle:{normal:{color:'#dc143c'}}},
// 横轴
{type : 'max', name: '最大值', valueIndex: 0, itemStyle:{normal:{color:'#1e90ff'}}},
{type : 'min', name: '最小值', valueIndex: 0, itemStyle:{normal:{color:'#1e90ff'}}},
]
},
data: []
}
]
};
5、动态获取数据展示到echarts中，这里我使用的是一个通过点击事件去出发ajax的，这里看自己的需求去做了
function click(){
myChart.setOption(option); //参数设置方法
myChart.showLoading(); //显示正在加载中
var num=[];
var datanum = [];
var minx,maxx,miny,maxy;
$.ajax({
type : "GET",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url:"manage/trackPlay2D/getDispXY.htmstartime?id="+id //请求发送到Controller中
data : {},
dataType : "json",
success : function(result) {
num=result;
//将二维数组中的一维数组中的数据 提取出来 重新放入一个新的二维数组中
for(var i=0;i<num.length-2;i++){
var item=[];
for(var j in num[i]){
item.push(num[i].disp_x);
tem.push(num[i].disp_y);
break;
}
datanum.push(item);
}
//获取到 x y 轴的最大最小值，手动设置x y 轴的坐标
minx=num[num.length-2].min;
maxx=num[num.length-2].max;
miny=num[num.length-1].min;
maxy=num[num.length-1].max;
//将option选项的配置设置进echarts图中
myChart.setOption({
xAxis : {
//手动设置x轴上的刻度，最小最大，中间刻度会很智能计算以固定间隔分开
min:minx,
max:maxx
},
yAxis : {
min:miny,
max:maxy
},
//设置展示的数据 分别是x y轴上的值
series : [{
type: 'graph', //各个点的连线使用 -->
layout: 'none',
coordinateSystem: 'cartesian2d',
symbolSize: 5,
label: {
normal: {
show: true
}
},
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [0, 10],
data: datanum,
//设置各个点之间连接的函数
links: datanum.map(function (item, i) {
return {
source: i,
target: i + 1
};
}),
//连接的线的颜色
lineStyle: {
normal: {
color: '#2f4554'
}
}
}]
}); ,
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChartFou.hideLoading();
}
});
}
我的数据是json格式的数据，因为与js是可以直接转换使用的，很方便：
[{"disp_x":19.0,"disp_y":119.0},{"disp_x":35.296893,"disp_y":117.415853},{"disp_x":24.296893,"disp_y":118.415853},{"disp_x":25.296893,"disp_y":112.415853},{"disp_x":28.296893,"disp_y":114.415853},{"disp_x":29.296893,"disp_y":119.415853},{"disp_x":33.296893,"disp_y":125.415853},{"disp_x":34.296893,"disp_y":128.415853},{"disp_x":37.296893,"disp_y":121.415853},{"disp_x":32.296893,"disp_y":136.415853},{"disp_x":30.296893,"disp_y":122.415853},{"disp_x":39.296893,"disp_y":122.415853},{"disp_x":40.296893,"disp_y":122.415853},{"disp_x":38.296893,"disp_y":135.415853},{"disp_x":34.296893,"disp_y":123.415853},{"disp_x":34.296893,"disp_y":133.415853},{"disp_x":34.296893,"disp_y":117.415853},{"disp_x":34.296893,"disp_y":117.415853},{"disp_x":34.296893,"disp_y":117.415853},{"disp_x":34.296893,"disp_y":117.415853},{"disp_x":34.296893,"disp_y":117.415853},{"disp_x":34.296893,"disp_y":117.415853},{"disp_x":30.0,"disp_y":110.0},{"disp_x":20.0,"disp_y":20.0},{"min":10.0,"max":50.0},{"min":20.0,"max":140.0}]
