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.运行效果

    
    




posted @ 2015-01-08 12:18  Touphery  阅读(354)  评论(0)  编辑  收藏  举报