Echarts动态加载折线图X Y轴数据图表数据

   前几天，收到商家的反馈，希望可以有一个直观的图表，展示一个时间段里的销售额，客数，排班人数，并把销售高峰期以及时间段反应出来。经同事的介绍，选择了百度的  echarts，缩写来自Enterprise Charts，一个纯JavaScript的图表库。上官网查，官方的示例都是死数据。。。废话不多说，直接上代码。

   先来一张最终效果图

 


   先看看官方的示例

option = {
tooltip: {
trigger: 'axis',
position: function (pt) {
return [pt[0], '10%'];
}
},
title: {
left: 'center',
text: '大数据量面积图',
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: date
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%']
},
dataZoom: [{
type: 'inside',
start: 0,
end: 10
}, {
start: 0,
end: 10,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}],
series: [
{
name:'模拟数据',
type:'line',
smooth:true,
symbol: 'none',
sampling: 'average',
itemStyle: {
normal: {
color: 'rgb(255, 70, 131)'
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(255, 158, 68)'
}, {
offset: 1,
color: 'rgb(255, 70, 131)'
}])
}
},
data: data
}
]
};

 从官方代码里可以，我们可以提取出 动态加载数据 的项 以及echarts 的初始化

myChart = echarts.init(document.getElementById('main'), 'infographic');//加载了主题
myChart.clear();
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
data: []
},
toolbox: {
feature: {
dataView: { show: false, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
grid: {
left: '5%',
right: '5%'
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisPointer: {
type: 'shadow'
},
data: [],// X轴的定义
axisLabel: {
interval: 0,//横轴信息全部显示
rotate: -30,//-30度角倾斜显示
}
}],
dataZoom: [
],
yAxis: [{
type: 'value',// Y轴的定义 
min: 0,
max: '',
interval: '',
data: [],
axisLabel: {
formatter: '{value}'
}

}
, {
type: 'value',// Y轴的定义 
name:'排班数',
}],
series: []
};
// 初次加载图表(无数据)   
myChart.setOption(option);

  完成了这一步之后，我们就可以根据自己的实际需要 动态加载数据  能采取的方法有很多 这里我使用的是ajax 请求 的数据

//加载数据  
$.ajax({
url: "WebServers/.../GoodsInfo",
type: 'post',
dataType: 'json',
data: { CompanyName: CompanyName, dataOn: check_val },//参数
beforeSend: function () {
fnAjaxLoad(true);
},
complete: function () {
fnAjaxLoad();
},
success: function (data) {
jsons = data;
loadData();
},
error: function () {
alert("数据加载失败！");
}
});

 function loadData() {
            //折线图
            var Item = function () {
                return {
                    name: '',
                    type: 'line',
                    data: [],
                    yAxisIndex: 0,
                    markArea: {                  
                    }
                }
            };
            //柱状图
            var Bar = function () {
                return {
                    name: '',
                    type: 'bar',
                    data: [],
                    yAxisIndex: 1,
                    barWidth: 20,
                    markArea: {                    
                    }
                }
            };
            var legends = [];
            var Series = [];
            var str;
            var json = jsons.setData;
            //console.info(json);
            var setCol = json[0].setColoer;
            if (setCol != null && setCol !='') {
                if (setCol[0].OneStateTime != null && setCol[0].OneStateTime != '') {
                    str = { data: [[{ name: '第一阶段', xAxis: setCol[0].OneStateTime }, { xAxis: setCol[0].OneEndTime }], [{ name: '第二阶段', xAxis: setCol[0].TwoStateTime }, { xAxis: setCol[0].TwoEndTime }]], itemStyle: { normal: { co
be20
lor: setCol[0].setColor } } };
                    //console.info(str);
                }
            }
            //判断选中的数据类型
            if (document.getElementsByName("bm")[0].checked) {
                for (var i = 0; i < json.length; i++) {

                    var it = new Item();
                    var bar = new Bar();
                    it.name = json[i].setName;
                    legends.push(json[i].setName);
                    it.data = json[i].setData;
                    if (i == json.length-1) {
                        bar.name = '排班人数';
                        legends.push('排班人数');
                        bar.data = json[0].setHistogram;
                        it.markArea = str;
                        Series.push(bar);
                    }
                    Series.push(it);

              }
            }
            //判断选中的数据类型
            if (document.getElementsByName("bm")[1].checked) {
                for (var i = 0; i < json.length; i++) {

                    var it = new Item();
                    var bar = new Bar();
                    it.name = json[i].setName;
                    legends.push(json[i].setName);
                    it.data = json[i].setBare;
                    if (i == json.length - 1) {
                        bar.name = '排班人数';
                        legends.push('排班人数');
                        bar.data = json[0].setHistogram;
                        it.markArea = str;
                        Series.push(bar);
                    }
                    Series.push(it);

               }
            }
            //console.info(Series);
            option.xAxis[0].data = jsons.setXcontent;

//控制 显示的Y轴刻度是自适应还是 统一标准
            if ($("#CompanyName").val() == '') {
                option.yAxis[0].max = null;
                option.yAxis[0].interval = null;
            }
            else if (document.getElementsByName("bo")[0].checked) {
                if (document.getElementsByName("bm")[1].checked) {
                    option.yAxis[0].max = 80;
                    option.yAxis[0].interval = 10;
                }
                else {
                    option.yAxis[0].max = 8000;
                    option.yAxis[0].interval = 1000;
                }     
                option.yAxis[1].max = 80;
                option.yAxis[1].interval = 10;
            }
            else if (document.getElementsByName("bo")[1].checked) {
                option.yAxis[0].max = null;
                option.yAxis[0].interval = null;
                option.yAxis[1].max = null;
                option.yAxis[1].interval = null;
            }
            else if (document.getElementsByName("bm")[1].checked) {
                option.yAxis[0].max = null;
                option.yAxis[0].interval = null;
            }
            else {
                option.yAxis[0].max = 8000;
                option.yAxis[0].interval = 1000;
            }        
            //console.info(Series);
            option.legend.data = legends;
            option.series = Series; // 设置图表 
            myChart.setOption(option);// 重新加载图表  
         
        };

//后台数据返回方法代码  

[WebMethod] //webservice 方法
public void GoodsInfo()
{

#region 初始化
string setColoer = ConfigurationManager.AppSettings["setColoer"].ToString();//颜色配置项
Search sear = new Search();
List<JsonData> data = new List<JsonData>();
JavaScriptSerializer jss = new JavaScriptSerializer();
bool istrue = false;
//控制颜色参数一次
int isone = 1;
#endregion

#region 接收参数
string CompanyName = HttpContext.Current.Request["CompanyName"];
if(CompanyName != "" && CompanyName!=null)
{
string[] sArray = CompanyName.Split('(');
sear.CompanyName = sArray[1].Replace(")", "");
}
sear.dataOn = HttpContext.Current.Request["dataOn"];
#endregion

  #region 查询

//这里就 自由发挥了

#endregion

//组装数据

  for (int j = 0; j < dttype.Rows.Count; j++)
            {
                JsonData dtInfo = new JsonData();
                string seach = dttype.Rows[j]["ProductType2"].ToString();
                DataRow[] dr = dt.Select("ProductType2=" + seach);
                //销售数
                decimal[] typedata = new decimal[dr.Length];
                //客数
                int[] passengers = new int[dr.Length];
                //排班人数 模拟数据
                decimal[] numPeople = new decimal[dtPai.Rows.Count]; //{100,200,300,400, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100 };                for (int i = 0; i < dr.Length; i++)
                {
                    typedata[i] = decimal.Parse(Math.Round(decimal.Parse(dr[i]["SalesAmount"].ToString()), 2).ToString());//换算成千
                    passengers[i] = int.Parse(dr[i]["passengers"].ToString());
                }
                //排班人数
                if (j == 0)
                {
                    for (int k = 0; k < dtPai.Rows.Count; k++)
                    {
                        numPeople[k] = Math.Round(decimal.Parse(dtPai.Rows[k]["PaibanNumber"].ToString()), 2);
                    }
                    dtInfo.setHistogram = numPeople;
                }
                dtInfo.setName = dttype.Rows[j]["ProductType2"].ToString();
                dtInfo.setData = typedata;
                dtInfo.setBare = passengers;
                //判断是否需要查询已配置的商铺
                if (!string.IsNullOrEmpty(sear.CompanyName) && isone == 1)
                {
                    //JsonData dtInfo = new JsonData();
                    SetBgc bgc = new SetBgc();
                    List<SetBgc> listCor = new List<SetBgc>();
                    //判断是否需要查询已配置的商铺
                    DataTable dtCompany = DbHelp.Query(sqlCom, DabaseEnum.conStrOn).Tables[0];
                    istrue = IsColumnIncludeData(dtCompany, "FaxId", sear.CompanyName);
                    //判断 该店铺是否需要 显示遮罩层
                    if (istrue)
                    {
                        DataTable drCompany = DbHelp.Query(sb, DabaseEnum.conStrOn).Tables[0];
                        bgc.OneStateTime = drCompany.Rows[0]["OneStateTime"].ToString();
                        bgc.OneEndTime = drCompany.Rows[0]["OneEndTime"].ToString();
                        bgc.TwoStateTime = drCompany.Rows[0]["TwoStateTime"].ToString();
                        bgc.TwoEndTime = drCompany.Rows[0]["TwoEndTime"].ToString();
                        bgc.setColor = setColoer;
                    }
                    listCor.Add(bgc);                    dtInfo.setColoer = listCor;
                    isone += 1;
                }
                data.Add(dtInfo);
            }

 #region Y轴
            String[] xcontent = new String[24];

//同理

#endregion

    #region 响应数据
            ResponData tld = new ResponData();
            tld.setXcontent = xcontent;
            tld.setData = data;
            string strjson = JsonConvert.SerializeObject(tld);
            HttpContext.Current.Response.Write(strjson);
            #endregion

}

 使用的类

public class JsonData
{ //主数据类
public string setName { get; set; }//legend 名称

public decimal[] setData { get; set; }//销售额

public int[] setBare { get; set; }//客数

public List<SetBgc> setColoer { get; set; }//markArea 的颜色
public decimal[] setHistogram { get;set;}// 排班人数
}

 public class SetBgc
    {

//markArea 需 的范围
        public string OneStateTime { get; set; }
        public string OneEndTime { get; set; }
        public string TwoStateTime { get; set; }
        public string TwoEndTime { get; set; }
        public string setColor { get; set; }
    }

  public class ResponData
    {
        public List<JsonData> setData { get; set; }        public string[] setXcontent { get; set; }    }