二次封装快捷实现Echarts可视化图表.pdf

⼆次封装快捷实现Echarts可视化图表

ECharts，缩写来⾃EnterpriseCharts，商级数据图表，⼀个纯Javascript的图表库，可以流畅的运⾏在PC和移动设备上，兼容当前绝

⼤部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，⽣动，可交

互，可⾼度个性化定制的数据可视化图表。

现在将实际项⽬中⽤到的柱状图的js统⼀封装，有效解决了多图表页⾯前端代码繁琐以及ajax请求次数较多的问题，步骤以及代码粘贴如

下：

第⼀步：引⼊以下js：

scripttype=text/javascriptsrc=/js/echarts.min.js/script【可以上⽹上下载】

第⼆步：新建js，复制下⾯代码然后引⼊：

functioninitEcharts(containerId,titleText,subTitleText,legendArray,xArray,yName,colorArray,dataArray,nameArray){

varseriesInfo=newArray();

if(nameArray!=undefinednameArray.length0){

$.each(nameArray,function(i,o){

varseriesItem={

name:nameArray,

type:bar,

data:dataArray,

itemStyle:{

normal:{

color:colorArray

}

}

};

seriesInfo.push(seriesItem);

});

}

varoption={

title:{text:titleText,x:left,subtext:subTitleText},

tooltip:{trigger:item,formatter:{a}br/{b}:{c}},

legend:{data:legendArray},

xAxis:[{

type:category,

data:xArray,

axisLabel:{rotate:30,interval:0},

}],

yAxis:[{type:value,name:yName}],

toolbox:{

show:true,

feature:{

mark:{show:true},

dataView:{show:true,readOnly:false},

restore:{s