echarts制作图表

一：关于echarts

1.echarts官网：http://echarts.baidu.com/examples.html

2.文档==>配置项手册（所有的属性）

3.实例==>官方实例==>饼图（点击某一个饼图，可以更改它的样式和代码）

4.下载==>下载==>源代码(下载JS)

二：这里以饼图为例

1.引用JS代码到项目中

2.代码

//前台代码

<div id="win1"  style="width:100%;height:100%;" >
    <div class="ct" id="chart1" style="height:100%;width:100%;">></div>
</div>

<script type="text/javascript">
    mini.parse();
    var option = {
        title: {
            textStyle: { fontSize:30 },
            text: '测试饼图',
            subtext: '纯属虚构',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: (function(){
                var arrNum = [];
                $.ajax(  
                {  
                    type: "POST",
                    url:  "后台方法地址",
                    dataType : 'json',
                    async:false,
                    success: function (result) {               

  var obj = eval(result.data);

                        for (var i = 0; i < result.total; i++) {
                            arrNum.push({ "name": obj[i].key });
                        }
                    }
                });  
                return arrNum;  
            })()
        },
        series: [
            {
                name: '测试',

//循环的颜色
                color: ['#c23531', '#61a0a8', '#bda29a', '#6e7074', '#546570', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#c4ccd3', '#2f4554'],
                type: 'pie',
                radius: '75%',
                center: ['50%', '60%'],
                data:(function(){
                    var arrNum = [];
                    $.ajax(  
                    {  
                        type: "POST",
                        url:  "后台传的地址",
                        dataType : 'json',
                        async:false,
                        success: function (result) {
                            var obj =eval(result.data);
                            for (var i = 0; i < result.total; i++) {
                                arrNum.push({ "value": obj[i].value, "name": obj[i].key });
                            }
                        }
                    });  
                    return arrNum;  
                })(),
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    var win = mini.get("win1");
    win.show();
    buildChart();
    function buildChart() {
        var chart1 = echarts.init(document.getElementById('chart1'));
        chart1.setOption(option);
    }
    function showChartWindow() {
    
    }
</script>

//后台代码（获取数据库的数据并返回给前台）

        private readonly JavaScriptSerializer _jsonSerializer = new JavaScriptSerializer();

#region 数据 GetData()
        /// <summary>
        /// 
        /// </summary>
        /// <returns></returns>
        public string GetData()
        {
            List<两个字段的类（key,value）>  My_List = new List<两个字段的类（key,value）>();
            两个字段类名 countModel = null;

  //返回成功/失败的类
            MsgResults Result = new MsgResults();
            List<string> Namelist = new List<string> ();
            List<Int16> ValueList = new List<Int16>();
            StringBuilder str = new StringBuilder();
            str.Append("数据库语句");
            DataSet ds = SQLHelper.Query(str.ToString());（Query：返回DataSet 的方法）
            foreach (DataRow dr in ds.Tables[0].Rows)
            {
                countModel = new 两个字段类名();
                countModel.key = dr["字段"].ToString();
                countModel.value = Int16.Parse(dr["字段"].ToString());
                两个字段类名.Add(countModel);
            }
           Result.success=true;
           Result.data =My_List ;
           Result.total = My_List .Count.ToString();
            return _jsonSerializer.Serialize(Result);
        }
        #endregion

public class MsgResults
    {
        public bool success { get; set; }
        public string msg { get; set; }
       public object data { get; set; }
        public string total
        {
            get;
            set;
        }
    
    }