MVC Echarts

效果图：

代码：在ASPX页面引入Echarts相关的js（单文件引入即可），为图表准备一个Dom

 

我是用mvc写的，页面首次加载进入动作......将结果ViewData到前台页面（结果就是我已经处理好的JSON。）

页面首次加载的时候执行这个函数

$.ready(function(){   ChartLoad(<%=ViewData["option"]%)//渲染DiV  });

这里面封装了两个方法，一个用来渲染DIV，前面已经把MVC的数据以ViewData的方式填充到了ChartLoad()。第二个是在查询的时候调用的，传一个URL（请求的数据），data(参数)，async(表示是否异步)。

 

下面为动作里面的代码：整个图表需要的属性已经自己在这里定义好了，只需要把这些属性转换为JSON格式传到前台即可。

下面是 PieCharts基类的代码：(多看两遍，慢慢看，认真看，会懂的。)

 

using System;
using System.Collections;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;

namespace Charts
{
    public class PieCharts
    {
        public Hashtable toolbox { get; set; }
        public readonly bool calculable = true;
        public chartTitlex title { get; set; }
        public charttooltipfrm tooltip { get; set; }
        public ChartLegendpie legend { get; set; }
        public List<chartdataPie> series { get; set; }
        private decimal maxvalue = 0;

        public PieCharts()
        {
            title = new chartTitlex();
            tooltip = new charttooltipfrm();
            legend = new ChartLegendpie();
            series = new List<chartdataPie>();
        }
        public PieCharts(DataTable dt,string name,string value,string dataname)
        {
            title = new chartTitlex();
            tooltip = new charttooltipfrm();
            legend = new ChartLegendpie();
            series = new List<chartdataPie>();
            SetSeriesAction(dt, name, value,dataname);
        }


        public void SetSeriesAction(DataTable dt,string name,string value,string dataname)
        {

            int i = 0;
            legend.data=new string[dt.Rows.Count];
            chartdataPie piedata=new chartdataPie();
            piedata.name = dataname;
            foreach (DataRow row in dt.Rows)
            {
                if (i == 0)
                    maxvalue = Convert.ToDecimal(row[value]);
                legend.data[i] = row[name].ToString();
                piedata.data.Add(new ChartPiedata() { name = row[name].ToString(), value = Convert.ToDecimal(row[value]) });
                i++;
            }
            series.Add(piedata);
            toolbox = addhx();

        }

        private Hashtable addhx()
        {
            Hashtable tool = new Hashtable();
            tool.Add("show", true);
            Dictionary<string, object> d = new Dictionary<string, object>();
            d.Add("show", true);
            Hashtable feature = new Hashtable();
            feature.Add("mark", d);
            d = new Dictionary<string, object>();
            d.Add("show", false);
            d.Add("readOnly", false);
            feature.Add("dataView", d);
            d = new Dictionary<string, object>();
            d.Add("show", false);
            feature.Add("restore", d);
            d = new Dictionary<string, object>();
            d.Add("show", true);
            feature.Add("saveAsImage", d);
            Hashtable r = new Hashtable();
            r.Add("show", true);
            r.Add("type", new string[] { "pie", "funnel" });
            Hashtable c=new Hashtable();
            c.Add("x","25%");
            c.Add("width", "50%");
            c.Add("funnelAlign", "left");
            c.Add("max", maxvalue);
            d = new Dictionary<string, object>();
            d.Add("funnel",c);
            r.Add("option",d);
            feature.Add("magicType", r);
            tool.Add("feature", feature);
            return tool;
        }
    }
    

    public class charttooltipfrm : charttooltip
    {
        public string formatter = "{a} <br/>{b} : {c} ({d}%)";
    }

    public class chartTitlex : chartTitle
    {
        public string x = "center";
    }

    public class ChartLegendpie : ChartLegend
    {
        public string orient = "vertical";
        public string x = "left";
    }

    /// <summary>
    /// 数据
    /// </summary>
    [Serializable]
    public class chartdataPie
    {
        /// <summary>
        /// 标题值
        /// </summary>
        public string name { get; set; }

        /// <summary>
        /// 图表类型
        /// </summary>
        public string type = "pie";
        /// <summary>
        /// 颜色
        /// </summary>
        public Hashtable itemStyle { get; set; }

        private string color = "";
        public chartdataPie()
        {
            itemStyle = new Hashtable();

        }
        public string radius = "55%";
        public string[] center = {"50%", "60%"};
        public chartdataPie(string color)
        {
            itemStyle = new Hashtable();
           // Hashtable normal = new Hashtable();
            //normal.Add("color", color);
          //  itemStyle.Add("normal", normal);
        }
        public List<ChartPiedata> data =new List<ChartPiedata>(); 
       
    }

    public class ChartPiedata
    {
        public decimal value = 0;
        public string name = "";
    }

}