调用
//饼图
var initChart= MyeCharts.pie(echartId,datas,params);
//柱状图/折线图
var initChart= MyeCharts.myChart((echartId,seriesData,xAxisData,params));
可重写 option如下
var options = {
legend : {
orient: 'vertical', //垂直:vertical; 水平 horizontal
right:'right',
},
series:[{
radius : '55%', //圆的大小
center : ['50%', '60%'],//位置居中
}]
};
initChart.setOption(options);
代码封装
/****************** eCharts图表类 ***************/
var MyeCharts = {
/**
*
* @param option : option
* @param echartId : 图表的id 需要加引号
*/
initChart : function (option,echartId){
var container = eval("document.getElementById('" + echartId + "')");
var myChart = echarts.init(container);
myChart.setOption(option); // 为echarts对象加载数据
return myChart;
},
NoGroupFormate : function (data){
var categorys = [];//名称
//遍历
for(var i=0;i<data.length;i++){
categorys.push(data[i].name || "");
}
return categorys;
},
//生成图形option
/**
* 饼图
* @param title : 标题<br>
* @param subtext :副标题<br>
* @param positionx : 标题位置<br>
* @param positiony : 标题位置<br>
* @param legendOrient : legend显示方式<br>
* @param legendx : legend x轴位置<br>
* @param legendy : legend y轴位置<br>
* @param legendData : legend 数据 <br>
* @param radius : 圆的大小 <br>
* @param centerX : 圆的x轴 <br>
* @param centerY : 圆的y轴 <br>
* @param data : json 数据
*
*/
pie : function (echartId,datas,params){
if(document.getElementById(echartId) !=null){
//数据格式
var legendData;
if(params==undefined||params==null){
params={};
}
if (params.legend) {
legendData = MyeCharts.NoGroupFormate(datas);
}
if (params.legendData != "" && params.legendData !=null || params.legendData != undefined ) {
legendData = params.legendData ;
}
if (params.colors == "" || params.colors ==null || params.colors == undefined ) {
params.colors = ['#F7816F','#AC86F3','#7FBCF4','#FFE16F','#89f166']
}
option = {
color:params.colors,
title : {
text : params.title || "", //标题
subtext : params.subtext || "", //副标题
x : params.positionx || 'center', //位置/默认居中
y : params.positiony || 'top', //位置
},
//提示
tooltip: {
show: true,
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend : {
orient: params.legendOrient || 'horizontal', //垂直:vertical; 水平 horizontal
x: params.legendx || 'left',
y: params.legendy || 'top',
data: legendData || '',
textStyle:{
color: params.colortext ||'#333',
}
// top: 'center', //位置默认左
},
series : [{
name : params.title || "",
type : 'pie', //类型
radius :params.radius || '48%', //圆的大小
center : [params.centerX || '50%', params.centerY ||'50%'],//位置居中
data : datas,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal:{
label:{
show: true,
formatter: '{b} \n {d}%'
},
labelLine :{show:true}
}
}
}]
};
var container = eval("document.getElementById('" + echartId + "')");
var myChart = echarts.init(container);
myChart.setOption(option); // 为echarts对象加载数据
myChart.resize(); // 为echarts对象加载数据
window.addEventListener("resize",function(){
myChart.resize();
});
return myChart;
}
//return option;
},
/**
* 柱状图 / 折线图
* @param xAxisData : x轴data<br>
* @param xName :x轴标题<br>
* @param yName :y轴标题<br>
* @param legendData : legendData<br>
* @param gridstop/gridsleft/ gridsright/gridsbottom: 全屏位置<br>
* @param colors : 颜色<br>
* @param legendOrient : 大标题显示方式<br>
* @param legendData : 大标题数据<br>
* @param legendWidth : 标题图形的宽度<br>
* @param legendHeight : 标题图形的高度<br>
* @param rotateX :x轴文字倾斜的角度<br>
* @param rotateY : y轴文字倾斜的角度<br>
* @param data : json 数据
*
*/
myChart:function(echartId,seriesData,xAxisData,params){
if(document.getElementById(echartId) !=null){
var legendData;
if(params==undefined||params==null){
params={};
}
if (params.legend) {
legendData = MyeCharts.NoGroupFormate(seriesData);
}
if (params.legendData != "" && params.legendData !=null || params.legendData != undefined ) {
legendData = params.legendData ;
}
if (params.colors == "" || params.colors ==null || params.colors == undefined ) {
params.colors = ['#32BAFF','#F7816F','#EE9201','#B74AE5','#0AAF9F','#E89589']
}
option = {
color:params.colors,
grid:{
top:params.gridstop || 35,
left:params.gridsleft || 35,
right:params.gridsright ||20,
bottom:params.gridsbottom ||40
},
legend: {
orient: params.legendOrient || 'horizontal', //垂直:vertical; 水平 horizontal
data:legendData || "",
top:0,
itemWidth:params.legendWidth || 24,//图例的宽度
itemHeight: params.legendHeight || 14,//图例的高度
textStyle:{
color: params.colortext ||'#333',
}
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
},
xAxis : [
{
type : 'category',
splitLine: {show:false},
data : xAxisData,
name:params.xName || "",
axisLabel: {
interval:0,
rotate: params.rotateX || 30,
lineStyle: {
type: 'solid',
color: params.colortext || '#000',//左边线的颜色
}
},
axisLine: {
lineStyle: {
type: 'solid',
color: params.colortext || '#000',//左边线的颜色
}
}
}
],
yAxis : [
{
type : 'value',
name:params.yName || "",
axisLabel: {
interval:0,
rotate:params.rotateY ||30,
lineStyle: {
type: 'solid',
color: params.colortext || '#000',//左边线的颜色
}
},
axisLine: {
lineStyle: {
type: 'solid',
color: params.colortext || '#000',
}
}
}
],
series : seriesData
};
var container = eval("document.getElementById('" + echartId + "')");
var myChart = echarts.init(container);
myChart.setOption(option); // 为echarts对象加载数据
myChart.resize();
window.addEventListener("resize",function(){
myChart.resize();
});
return myChart;
//return option;
}
},
}
参数详情
饼图:MyeCharts.pie(echartId,datas,params);
echartId | datas | params var params ={} |
---|---|---|
容器id | series ——data数据源 | * @param title : 标题— 默认值:’’ * @param subtext :副标题—默认值:’’ * @param positionx : 标题位置—默认值:‘center’ * @param positiony : 标题位置—默认值:‘top’ * @param legendOrient : legend显示方式—默认值:‘horizontal’ * @param legendx : legend x轴位置—默认值:‘left’ * @param legendy : legend y轴位置—默认值:‘top’ * @param legend: legend 数据 ——默认值:’’, 为true时自动读取 legend 数据 * @param legendData : legend 数据——默认值:’’(legend为true时可不填) * @param radius : 圆的大小 ——默认值:‘48%’ ‘radius’:[‘50%’, ‘70%’]环形 * @param centerX : 圆的x轴 ——默认值:‘50%’ * @param centerY : 圆的y轴 ——默认值:‘50%’ * @param colors : 颜色——默认值:colors =[’#F7816F’,’#AC86F3’,’#7FBCF4’,’#FFE16F’,’#89f166’] * @param colortext:刻度标线颜色,legend字体颜色——默认值:‘333’ * @param data : json 数据 默认值:’’ |
柱状图/折线图:MyeCharts.myChart((echartId,seriesData,xAxisData,params));
echartId | seriesData | xAxisData | params var params ={} |
---|---|---|---|
容器id | 数据源(series) | x轴data | * @param xName :x轴标题—— 默认值:’’ * @param yName :y轴标题——默认值:’’ * @param legendData : legendData——默认值:’’ * @param gridstop/gridsleft/ gridsright/gridsbottom: 全屏位置——默认:top:35, left:35, right:20,bottom:40 * @param colors : 颜色——默认值:colors =[’#32BAFF’,’#F7816F’,’#EE9201’,’#B74AE5’,’#0AAF9F’,’#E89589’]} * @param legendOrient : 大标题显示方式——默认值:‘horizontal’ * @param legendData : 大标题数据——默认值:’’ * @param legendWidth : 标题图形的宽度——默认值:24 * @param legendHeight : 标题图形的高度——默认值:24 * @param rotateX :x轴文字倾斜的角度——默认值:30 * @param rotateY : y轴文字倾斜的角度——默认值:30 |