Echarts使用

1.新建项目，引入jquery包，Echarts文件及需要的图表文件

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

         

2.页面添加存放展示的div 设置id（设置宽度，高度）

     <div class="chart" id="tabShow1">

          Loading ...

    </div>

3.在body标签中引入 Echarts脚本及具体的数据绑定脚本

          ...

     <!--chart[[-->

    <script src="Scripts/echarts.js" type="text/javascript"></script>

    <script src="Scripts/survey.js" type="text/javascript"></script>

    <!--chart]]-->

</body>

4.通过jquery.Ajax获取并绑定数据（ survey.js）

          //柱状图数据

var  data_bar = Object;

// 引入文件

require.config({

    paths: {

        echarts: './Scripts'

    }

});

// 引入需要的脚本

require(

        [

            'echarts',

            'echarts/chart/bar',

            'echarts/chart/pie'

        ],

        function (ec) {

            //获取柱形图数据

            GetBarData();

             // 通过id获取div，初始化

            var myChart = ec.init(document.getElementById('tabShow1'));

            myChart.setOption({

                tooltip: {

                    trigger: 'axis'

                },

                legend: {

                    x: '76%',

                    y: '5%',

                    data: ['bar1name', ' bar2name ']

                },

                color: [

                    '#2ec7c9', '#b6a2de', '#99d2dd', '#88b0bb', '#1c7099'

                ],

                calculable: true,

                xAxis: [

                    {

                        type: 'category',

                        axisLabel: { 'interval': 0 },

                        data: data_bar.xraydata

                    }

                ],

                yAxis: [

                    {

                        type: 'value',

                        splitArea: { show: true }

                    }

                ],

                series: [

                    {

                        name: 'bar1name',

                        type: 'bar',

                        data: data_bar.registdata,

                        markPoint: { data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值'}] }

                    },

                    {

                        name: ' bar2name ',

                        type: 'bar',

                        data: data_bar.surveydata,

                        markPoint: { data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值'}] }

                    }

                ]

            });

            }

        }

    );

//获取数据

function GetBarData() {

    $.ajax({

         //资源文件路径

        url: ' Analysisdata.ashx' ,

         // 参数

        data: { oper: "bardata" },

        cache: false,

        async: false,

         // 数据类型

        dataType: "json",

        success: function (data) {

            if (data != null) {

                if (data) {

                    data_bar = data;

                }

                else {

                    alert("获取失败");

                }

            }

        },

        error: function (e) {

            alert(" 获取失败 ");

        }

    });

}

5. 取数据（ Analysisdata.ashx ）

         public   void  ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            string oper = context.Request["oper"];

            string returnvalue = "";

            switch (oper)

            {

                case "bardata":

                    returnvalue = GetBarData();//取数据

                    break;

                default:

                    break;

            }

            context.Response.Write(returnvalue);

            context.Response.End();

        }

          ///   <summary>

        /// 

        /// </summary>

        /// <returns></returns>

        private string GetBarData()

        {

            Dictionary<string, object> dic = new Dictionary<string, object>();

             // 横轴

            List<string> lis = new List<string>();

             // bar1

            List<int> regstLst = new List<int>();

             // bar2

            List<int> voteLst = new List<int>();

            //从数据库取数据

            DataTable dt = BLL.GetInfo();

            for (int i = 0; i < dt.Rows.Count; i++)

            {

                  // 防止排列拥挤，分层放置

                lis.Add((i % 2 == 1 ? "\n" : "") + dt.Rows[i]["title"]);

                regstLst.Add(Int32.Parse(dt.Rows[i]["bar1value"].ToString()));

                voteLst.Add(Int32.Parse(dt.Rows[i][" bar2value "].ToString()));

            }

            dic.Add("xraydata", lis);

            dic.Add("registdata", regstLst);

            dic.Add("surveydata", voteLst);

         //序列化为json string

            return SerializeToJsonStr(dic);

        }

          ///   <summary>

        /// 序列化

        /// </summary>

        /// <param name="obj"></param>

        /// <returns></returns>

        public string SerializeToJsonStr(object obj)

        {

            JavaScriptSerializer javaScriptSerializer = new JavaScriptSerializer();

            StringBuilder sb = new StringBuilder();

            javaScriptSerializer.Serialize(obj, sb);

            return sb.ToString();

        }

6.运行效果

    

    

来自为知笔记(Wiz)

转载于:https://www.cnblogs.com/touphery/p/4210539.html