图表工具Echart 封装数据动态加载

1.用图表展示监控内容（展示内容包含多项，多条线），后台服务提供数据。

     本次选择的是Echart，找到了 https://www.echartsjs.com/zh/cheat-sheet.html ,官网中的内容挺全的，想到的能实现的都可以在这里面找到。可以参考这看看。

2. 实例演示

     下载下来JS包，添加到项目中，让我们愉快的来使用吧！！！我们Echart的首秀

前端展示数据：    

---添加引用
<script src="~/Scripts/plugins/echarts/echarts.common.min.js"></script>

----html div 容器
 <div>
     <div id="ManagerEntityTrend" style="width:90%;height:400px;margin-bottom: 30px;"></div>
 </div>


  <script type="text/javascript">
       $(document).ready(function() {
        echartSetting();
        });

        var myChart = echarts.init(document.getElementById('ManagerEntityTrend'));

        function echartSetting() {
            // 指定图表的配置项和数据
          option = {
                    title: {
                        text: 'FMSDDQ最近30天访问情况'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data:[] 
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                   },
                  dataZoom: [
                      {
                          id: 'dataZoomX',
                          type: 'slider',
                          xAxisIndex: [0],
                          filterMode: 'filter'
                      }
                    ],
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data:[]
                    },
                    yAxis: {
                        type: 'value'
                    },
                  series: []
                };
              // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            getDate();
        }
        function getDate() {
             
            $.get('/Monitor/DDQmonitorIndexGraphList/', { dataTypeName: ""}, function (data) {
                if (data.msg!="OK") {
                    layer.msg(data.msg);
                    return;
                }
                //组装成自己需要的数据
                var serieArray = [];
                for (var i = 0; i < data.data.Series.length; i++) {
                    var item = {
                        name: data.data.Series[i].Name,
                        type: 'line',
                        data: data.data.Series[i].Data
                    };
                    serieArray.push(item);
                };

                myChart.setOption({
                    legend: {
                        data: data.data.Legend
                    },
                    xAxis: {
                        data: data.data.XAxis
                    },
                    series: serieArray
                });
            });
        }
 </script>

服务端组装数据：              

    /// <summary>  
    /// Echart 图表工具中的实体封装
    /// </summary>
    public class EchartDataModel<T>
    {
        public EchartDataModel() {
            Legend = new List<string>();
            XAxis = new List<string>();
            YAxis = new List<string>();
            Series = new List<EchartSerie<T>>();
        }
        /// <summary>
        /// 要展示的图表
        /// </summary>
        public List<string> Legend { get; set; }
        /// <summary>
        /// X轴名称
        /// </summary>
        public List<string> XAxis { get; set; }
        /// <summary>
        /// Y轴名称
        /// </summary>
        public List<string> YAxis { get; set; }
        /// <summary>
        /// X轴要展示的内容
        /// </summary>
        public List<EchartSerie<T>> Series { get; set; }

    }
    /// <summary>
    /// Echart 要展示的数据元素
    /// </summary>
    /// <typeparam name="T"></typeparam>
    public class EchartSerie<T>
    {
        public EchartSerie()
        {
            Data = new List<T>();
        }
        /// <summary>
        /// 名称
        /// </summary>
        public string Name { get; set; }
        /// <summary>
        /// 展示类型
        /// </summary>
        public string Type { get; set; }
        /// <summary>
        /// 统计方式
        /// </summary>
        public string Stack { get; set; }
        /// <summary>
        /// 要展示的数据直接数组的方式
        /// </summary>
        public List<T> Data { get; set; }
    }

/// <summary>
///组装数据
/// </summary>
/// <returns></returns>
public async Task<ActionResult> DDQmonitorIndexGraphList(string dataTypeName,DateTime? dateTimeStart,DateTime? dateTimeEnd)
{
 var echartDateModel = new EchartDataModel<int>();
            echartDateModel.Legend = new List<string> { "邮件营销", "联盟广告" };
            echartDateModel.XAxis = new List<string> { "1", "2","3" };
            echartDateModel.Series = new List<EchartSeries<int>>() { new EchartSeries<int>() {Name="邮件营销",Data=new List<int>{ 120, 132,150 } },
                new EchartSeries<int>() {Name="联盟广告", Data=new List<int>{ 220, 182,1 } }};

            ///把实体返回
            
            return Json(new { code = 1, msg = "OK",data= echartDateModel}, JsonRequestBehavior.AllowGet);
}

 

　

 

 

 

　

转载于:https://www.cnblogs.com/q994321263/p/11542300.html