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: { color: 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; }   
   }