Echarts使用

时间：2015-01-08 13:02:47 阅读：202 评论：0 收藏：0 [点我收藏+]

标签：

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

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

Loading ...

</div>

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

...
  
    <script src="Scripts/echarts.js" type="text/javascript"></script>
    <script src="Scripts/survey.js" type="text/javascript"></script>
    
</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)

Echarts使用

标签：

原文地址：http://www.cnblogs.com/touphery/p/4210539.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行