源码
function getValues(){
var type = "TMP";
var apoint = arguments[4] ? arguments[4] : 20;// 设置参数point的默认值为20
var pdata = {
"point" : apoint
};
$.ajax({
type : "post",
async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
url : "接口" + type, //请求发送处
data : pdata,
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容,result即为服务器返回的json对象
if (result) {
var pointsarr = result.points;
showTrend(pointsarr);
}
},
error:function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
}
})
}
function showTrend(pointsarr){
var symbolSize = 10;
var categories = ['1h','2h','3h','4h','5h','6h','7h','8h','9h','10h','11h','12h','13h','14h','15h','16h','17h','18h','19h','20h','21h','22h','23h','24h'];//类别数组(x轴值)
var data = [[0, pointsarr[0].value], [1, pointsarr[1].value], [2, pointsarr[2].value],
[3, pointsarr[3].value], [4, pointsarr[4].value], [5, pointsarr[5].value],
[6, pointsarr[6].value], [7, pointsarr[7].value], [8, pointsarr[8].value],
[9, pointsarr[9].value], [10, pointsarr[10].value]];//y轴数值
var myChart = echarts.init(document.getElementById('trendRight'));
myChart.setOption({
tooltip: {
triggerOn: 'none',
formatter: function (params) {
return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);
}
},
xAxis: [{
type: 'category',
splitNumber:24,//划分为24个间隔
boundaryGap: false,
data: categories,
axisLine:{//x轴的横坐标边框线
show: false
},axisTick:{
show: false,
},axisLabel:{
show:true,
textStyle:{
fontSize:"8px",
color:"black",
align:"center"
},formatter:function(e){
return e;
}
},
splitLine: {
show: true,
lineStyle:{
color:"#e4e4e4",
type:"solid",
opacity:"0.75"
}
}
}
],
yAxis: [{
min: 6,
max: 20,
type: 'value',
splitNumber: 7,
axisLine:{
show: true,
lineStyle:{
color:"#e4e4e4"
}
},axisTick:{
show: false,
},axisLabel:{
show:true,
textStyle:{
fontSize:"8px",
color:"black"
}
},
splitLine: {
show: true,
lineStyle:{
color:"#e4e4e4",
type:"solid",
opacity:"0.75"
}
}
}
],
lineStyle: {
normal: {
type: 'solid',
color:"#28a5fc",
opacity :"0.75"
}
},
series: [
{
id: 'a',
type: 'line',
smooth: true,
symbolSize: symbolSize,
lineStyle:{//折线的颜色
normal: {
color:"#1ba0fc",
width:1,
type:'solid',
opacity:"0.75"
//shadowBlur:80
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(40, 182, 252, 0.85)'
}, {
offset: 1,
color: 'rgba(28, 159, 255, 0.2)'
}])
}
},itemStyle:{
normal:{
color:"#96BBCD",
barBorderColor:"#FAFCFD",
}
},
data: data
}
],
grid:{
left:20,
top:10,
bottom:20,
right:10,
show:true,
borderColor:"#e4e4e4",//网格边框线
shadowColor:"#e4e4e4",
borderWidth:"0.2",
containLabel: false
}
});
myChart.setOption({
graphic: echarts.util.map(data, function (item, dataIndex) {
return {
type: 'circle',
position: myChart.convertToPixel('grid', item),
shape: {
r: symbolSize / 2,
},
invisible: true,
draggable: true,
ondrag: echarts.util.curry(onPointDragging, dataIndex),
onmousemove: echarts.util.curry(showTooltip, dataIndex),
onmouseout: echarts.util.curry(hideTooltip, dataIndex),
z: 100
};
})
});
window.addEventListener('resize', function () {
myChart.setOption({
graphic: echarts.util.map(data, function (item, dataIndex) {
return {
position: myChart.convertToPixel('grid', item)
};
})
});
});
function showTooltip(dataIndex) {//显示鼠标移入圆圈点的数值
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: dataIndex
});
}
function hideTooltip(dataIndex) {//隐藏
myChart.dispatchAction({
type: 'hideTip'
});
}
function onPointDragging(dataIndex, dx, dy) {
data[dataIndex] = myChart.convertFromPixel('grid', this.position);
myChart.setOption({
series: [{
id: 'a',
data: data
}]
});
var dataValues = data;
localStorage.setItem("data", JSON.stringify(dataValues));
}
}