echarts 展示曲线图方法

function lineInit(xAxisdata, data, lends, isline,ileng,l,top,yname,xname) {

if (isline == null)

isline = true;

ileng = ileng || false;

var xl = xAxisdata.length,l=l||8;

var c = parseInt(l / xl * 100);

var vcolor = [

     { 'l': 'rgba(140, 70, 236, 0.3)', 'r': 'rgba(140, 70, 236, 0)', 'z': 'rgba(140, 70, 236, 1)' },

     { 'l': 'rgba(255, 136, 101, 0.3)', 'r': 'rgba(255, 136, 101, 0)', 'z': 'rgba(255, 136, 101, 1)'},

     { 'l': 'rgba(33, 106, 222, 0.3)', 'r': 'rgba(33, 106, 222, 0)', 'z': 'rgba(33, 106, 222, 1)' },

     { 'l': 'rgba(0, 175, 234, 0.3)', 'r': 'rgba(0, 175, 234, 0)', 'z': 'rgba(0, 175, 234, 1)' },

    { 'l': 'rgba(62,221,149, 0.3)', 'r': 'rgba(62,221,149, 0)', 'z': 'rgba(62,221,149, 1)' },

     { 'l': 'rgba(254,180,147, 0.3)', 'r': 'rgba(254,180,147, 0)', 'z': 'rgba(254,180,147, 1)'},

     { 'l': 'rgba(154,116,252, 0.3)', 'r': 'rgba(154,116,252, 0)', 'z': 'rgba(154,116,252, 1)' },

     { 'l': 'rgba(254,103,133, 0.3)', 'r': 'rgba(254,103,133, 0)', 'z': 'rgba(254,103,133, 1)' }

];

var option = {

grid: {

x: '50',

// y: (lends.length > 1?'45':'25') ,

y: top?top:25 ,

x2: '30',

y2: xl>l?'50':'20',

borderWidth: 0

},

legend: {

    type: 'scroll',

show: (lends.length > 1 || ileng) ? true : false,

data: lends,

textStyle: { color: '#666', fontSize: 14 }

},

tooltip: {

trigger: 'axis'

},

xAxis: {

name: xname,

nameTextStyle: {

color: "#000",

fontSize: 14

},

 

show: true,

type: 'category',

data: xAxisdata,

boundaryGap: false,

axisLabel: {

textStyle: { color: '#666', fontSize: 14 }

},

axisLine: {

show: true,

lineStyle: {

color: 'rgba(255,255,255,0.3)'

}

},

splitLine: {

show: isline,

lineStyle: {

color: 'rgba(166,168,186,0.2)'

}

}

 

},

dataZoom: [

{

show: xl>l,

height: 25,

width:'75%',

xAxisIndex: [0],

bottom: 0,

left:'12.2%',

type: 'slider',

start:0,

end: c-1,

textStyle:{color:"#000"},

borderColor:"#000"

}

],

yAxis: [

{

name:yname,

nameTextStyle: {

color: "#000",

fontSize: 14

},

show: true,

type: 'value',

axisLabel: {

textStyle: { color: '#666', fontSize: 14 },

formatter: function (value, index) {

var rval = value;

if ((rval - 0) >= 10000 && (rval - 0) < 10000000)

rval = ((rval - 0) / 10000).toFixed(1) + "万";

if ((rval - 0) >= 10000000 && (rval - 0) < 100000000)

rval = ((rval - 0) / 10000000).toFixed(1) + "千万";

else if ((rval - 0) > 100000000)

rval = ((rval - 0) / 100000000).toFixed(1) + "亿";

return rval;

}

},

axisTick: {

inside: false,

lineStyle: {

color: "#a6a8ba"

}

},

axisLine: {

show: true,

lineStyle: {

color: 'rgba(255,255,255,0.3)'

}

},

splitLine: {

show: isline,

lineStyle: {

color: 'rgba(166,168,186,0.2)'

}

},

splitArea: {

show: true,

onGap: true,

areaStyle: {

color: ["rgba(0,0,0,0.05)", "rgba(0,0,0,0.1)"]

}

}

//, splitNumber: 8

}

],

series: sendata(lends, data)

};

function sendata(lends, data) {

var lendsdata = [];

for (var i = 0; i < lends.length; i++) {

lendsdata.push({

name: lends[i],

type: 'line',

//去掉点

symbol: "none",

z: 2,

lineStyle: { //线条样式

normal: {

width: 1 //线宽。[ default: 2 ]

}

},

areaStyle: { //区域填充样式

normal: {

color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //填充的颜色。

offset: 0, // 0% 处的颜色

color: vcolor[i].l

}, {

offset: 0.9, // 80% 处的颜色

color: vcolor[i].r

}], false),

shadowColor: 'rgba(0, 0, 0, 0.1)', //阴影颜色。支持的格式同color

shadowBlur: 10 //图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果

}

},

itemStyle: {

normal: {

color: vcolor[i].z,

borderColor: vcolor[i].l, //图形的描边颜色。支持的格式同 color

borderWidth: 12, //描边线宽。为 0 时无描边。[ default: 0 ]

label: {

show: true,

//position: 'right',

textStyle: {

fontSize: 14,

color: '#0197e1'

},

formatter: function (d) {

var rval = d.value;

if ((rval - 0) >= 10000 && (rval - 0) < 100000000)

rval = ((rval - 0) / 10000).toFixed(1) + "万";

else if ((rval - 0) > 100000000)

rval = ((rval - 0) / 100000000).toFixed(1) + "亿";

return rval;

}

}

}, emphasis: {

borderColor: 'rgba(255,102,51,0.3)',

label: {

show: true,

textStyle: {

color: '#f63'

}

}

}

},

symbolSize: 4,

smooth: true,

data: data[i]

});

}

return lendsdata;

}

return option;

}

 

 后台动态调用

  

ajaxData("api/check/chartHourNum", {

         "beginDate": s,

         "endDate": e,

     },function(data){

                var d = data.data;

                var x = d.xList.slice(8, 23), y1 = [], y2 = [];

y1 = d.yList[0].slice(8, 23);

y2 = d.yList[1].slice(8, 23);

                carLine.setOption(lineInit(x , [y1,y2], d.legend,14,0,"",50,"",""), true);

     });