最近这两个月当中,一直在做关于Echarts相关的事情. 具体应用到的一些内容直接代码加注释记录一下
function eddyDataWheelCircle(){
var eddyDataWheelCircleElement= document.getElementById("eddyDataWheelCircleSpace");
var eddyDataWheelCircleChart= echarts.init(eddyDataWheelCircleElement);
polarDataSelect(eddyDataWheelCircleUrl,eddyDataWheelCircleChart);
}
function polarDataSelect(requestUrl,myChart) {
this.myChart = myChart;
var data = [];
var angle;
var r;
$.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : requestUrl, //请求发送
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
//加载数据
for(var i=0;i<result.length;i++){
angle = i;
r = result[i].length;
data.push([r,angle]);
}
data.push([result[0].length,360]) //再加上3600度(0度)处的点,使得整个圆首位相连
myChart.setOption({ //加载数据图表
series: [{
coordinateSystem: 'polar',
name: 'line',
type: 'line',
showSymbol: false,
data: data,
}]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("数据请求失败!");
myChart.hideLoading();
}
});
var option = {
title: {
text: ''
},
legend: {
data: ['line']
},
polar: {
center: ['45%', '50%']
},
angleAxis: {
type: 'value',
startAngle: 0,
axisLabel: {
color: '#d9dbe8'
}
},
radiusAxis: {
min: 393,
max: 390,
textStyle: {
color: '#d9dbe8'
},
axisLabel: { //坐标轴刻度标签
show: true,
color: '#d9dbe8'
}
},
xAxis: [
{
type: 'category',
show: false
}
],
yAxis: [
{
splitLine: {show: false},//去除网格线
type: 'value',
min: 388.2,
max: 385,
interval: 0.2,
// x轴的颜色和宽度
axisLine: {
lineStyle: {
color: '#fff',
}
},
axisLabel: {
formatter: function (value) {
var texts = [];
if (value < 386.6) {
texts.push(parseFloat(773.2 - value).toFixed(1));
}
else if (value >= 386.6) {
texts.push(value);
}
return texts;
}
},
}
],
backgroundColor: '#0f143c',
animationDuration: 1000 //初始动画的时长
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
}
function dataSelect(url,requestUrl,index,myChart){
var dataArray =[];
var rawData =[];
this.myChart = myChart;
$.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : requestUrl, //请求发送
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
for(var i=0;i<result.length;i++){
// index: 1~4 为 位移数据,再截取数据,曲线校准数据的标识
if(index==1){
dataArray.push([result[i].firstX,result[i].firstY]);
}else if(index==2){
dataArray.push([result[i].secondX,result[i].secondY]);
}else if(index==3){
dataArray.push([result[i].thirdX,result[i].thirdY]);
}else if(index==4){
dataArray.push([result[i].forthX,result[i].forthY]);
// index: 5为拼接数据, FFT傅立叶变换后的数据
}else if(index==5){
dataArray.push([result[i].x,result[i].y]);
//index:6,7,8,9为 原始数据截取数据标识
}else if(index==6) {
dataArray.push([i+1,result[i].firstA]);
rawData.push([i+1,result[i].firstB]);
}else if(index==7) {
dataArray.push([i+1,result[i].secondA]);
rawData.push([i+1,result[i].secondB]);
}else if(index==8) {
dataArray.push([i+1,result[i].thirdA]);
rawData.push([i+1,result[i].thirdB]);
}else if(index==9) {
dataArray.push([i+1,result[i].forthA]);
rawData.push([i+1,result[i].forthB]);
}
}
myChart.setOption({ //加载数据图表
series: [{
// 根据名字对应到相应的系列
data: dataArray,
type: 'line',
smooth: true,
showAllSymbol: true,
symbol: 'circle', //设定为实心点
symbolSize: 3, //设定实心点的大小
},{
// 根据名字对应到相应的系列
data: rawData,
type: 'line',
smooth: true,
showAllSymbol: true,
symbol: 'circle', //设定为实心点
symbolSize: 3, //设定实心点的大小
}
]
});
myChart.on('click', function (params) {
index++;
if (sequence == 0) { //计数判断当前有没有额外添加数据,添加数据时sequence会加1,如果没有添加,则点击事件可用.
if (index == 1 || index > 2) {
xNum1 = params.dataIndex;
yNum1 = params.data[1];
if(index>2) {
index=2;
}
} else if (index == 2) {
xNum2 = params.dataIndex;
yNum2 = params.data[1];
var abs = Math.abs(xNum1 - xNum2); //两者差的绝对值
midIndex = abs/2;
if (Math.abs(xNum1 - xNum2) <= 1) { //JS取两次选取的数的绝对值,判断是否是相邻的点
alert("请不要选取相邻的点或同一个点!");
window.location.reload();
}
generate();
}
}
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("数据请求失败!");
myChart.hideLoading();
}
});
option = {
backgroundColor: '#0f143c',
animation: true, //是否开启载入动画
xAxis: {
interval: '1',
type: 'category',
<!-- data: xData, -->
textStyle: {
color: '#d9dbe8'
},
axisLine: {
lineStyle: {
color: '#d9dbe8',//x轴颜色
}
},
splitLine: { //网格线
show: false,
lineStyle: {
color: ['#d9dbe8']
}
}
},
yAxis: {
type: 'value',
textStyle: {
color: '#d9dbe8'
},
axisLine: {
lineStyle: {
color: '#d9dbe8',//y轴颜色
}
},
splitLine: {
lineStyle: {
color: '#d9dbe8'
}
}
},
tooltip: { //提示框组件
trigger: 'axis',
axisPointer: { //坐标轴指示器
type: 'cross'
},
},
toolbox: {
show: true,
itemSize: 20,
feature: {
myButtons: {//自定义按钮 danielinbiti,这里增加，selfbuttons可以随便取名字
show: true,//是否显示
title: '添加', //鼠标移动上去显示的文字
icon: url, //图标
option: {},
onclick: function () {//点击事件,这里的option1是chart的option信息
addData();
}
},
}
},
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
}