ECharts柱状图或者折线图方法封装

前台界面样式

bar.png

line.png

pie.png

• 样式代码

• JS方法（需引用echarts.js和jquery.js）

    /**
     * ECharts柱状图，折线图,扇图通用方法
     * @param {Object} id DOM容器id
     * @param {Object} title DOM标题id
     * @param {Object} url
     */
    function MyECharts(id, title, url) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(id));

        //数据
        $.ajax({
            url: url,
            success: function(data) {
                data = JSON.parse(data);

                $("#" + title).html(data.text);
                var option = new Object();
                switch(data.type) {
                    case 'line':
                        option = {
                            title: {
                                text: data.text,
                                subtext: data.subtext,
                                x: 'center'
                            },
                            legend: {
                                left: 'right',
                                orient: 'vertical',
                                align: 'right'

                            },
                            tooltip: {},
                            dataset: {
                                // 提供一份数据。
                                dimensions: data.dimensions,
                                source: data.source
                            },
                            // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
                            xAxis: {
                                type: 'category'
                            },
                            // 声明一个 Y 轴，数值轴。
                            yAxis: {},
                            // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
                            series: data.series
                        };
                        break;
                    case 'bar':
                        option = {
                            title: {
                                text: data.text,
                                subtext: data.subtext,
                                x: 'center'
                            },
                            legend: {
                                left: 'right',
                                orient: 'vertical',
                                align: 'right'

                            },
                            tooltip: {},
                            dataset: {
                                // 提供一份数据。
                                dimensions: data.dimensions,
                                source: data.source
                            },
                            // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
                            xAxis: {
                                type: 'category'
                            },
                            // 声明一个 Y 轴，数值轴。
                            yAxis: {},
                            // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
                            series: data.series
                        };
                        break;
                    case 'pie':
                        // 指定图表的配置项和数据
                        option = {
                            title: {
                                text: data.text,
                                subtext: data.subtext,
                                x: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} 
{b} : {c} ({d}%)"
                            },
                            legend: {
                                left: 'right',
                                orient: 'vertical',
                                align: 'right'

                            },
                            series: [{
                                name: data.text,
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: data.source,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }]
                        };
                        break;
                    default:

                }

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            error: function() {
                //alert("error");
            }
        })
    }

//调用例子
MyECharts("CommonData1", "Common1", "/DataBind.ashx?method=GetCommonDataListbar");

MyECharts("CommonData2", "Common2", "/DataBind.ashx?method=GetCommonDataListline");

MyECharts("CommonData3", "Common3", "/DataBind.ashx?method=GetCommonDataListpie");

• C#后台数据封装方法

        /// 

        /// ECharts数据转化
        /// 
        /// 图表类型：line折线图，bar柱状图,pie扇图（扇图不能有多列）
        /// 数据
        /// 标题
        /// 备注
        /// 
        public static string EChartsToJson(string type,DataTable dt,string text,string subtext)
        {
            StringBuilder jsonBuilder = new StringBuilder();
            StringBuilder series = new StringBuilder();//数据列
            StringBuilder dimensions = new StringBuilder();
            int Columns = dt.Columns.Count;
            if (type == "pie")
            {
                series.Append("null");
            }
            else
            {
                series.Append("[");
                for (int i = 0; i < Columns - 1; i++)
                {
                    series.Append("{");
                    series.AppendFormat("\"type\":\"{0}\"", type);
                    series.Append("}");
                    series.Append(",");
                }
                series.Remove(series.Length - 1, 1);
                series.Append("]");
            }
            

            dimensions.Append("[");
            for (int i = 0; i < Columns; i++)
            {
                dimensions.Append("\"" + dt.Columns[i].ColumnName + "\",");
            }
            dimensions.Remove(dimensions.Length - 1, 1);
            dimensions.Append("]");

            jsonBuilder.Append("{");
            jsonBuilder.AppendFormat("\"text\":\"{0}\", ", text);
            jsonBuilder.AppendFormat("\"subtext\":\"{0}\", ", subtext);
            jsonBuilder.AppendFormat("\"dimensions\":{0}, ", dimensions);
            jsonBuilder.AppendFormat("\"type\":\"{0}\", ", type);
            jsonBuilder.AppendFormat("\"series\":{0}, ", series);
            jsonBuilder.Append("\"source\":");
            jsonBuilder.Append("[ ");
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                jsonBuilder.Append("{");
                for (int j = 0; j < Columns; j++)
                {
                    jsonBuilder.Append("\"");
                    jsonBuilder.Append(dt.Columns[j].ColumnName);

                    jsonBuilder.Append("\":\"");
                    jsonBuilder.Append(dt.Rows[i][j]);
                    jsonBuilder.Append("\",");


                }
                jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
                jsonBuilder.Append("},");
            }
            jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
            jsonBuilder.Append("]");
            jsonBuilder.Append("}");
            jsonBuilder.Replace("\n", " ");
            return jsonBuilder.ToString();
        }

//方法调用
EChartsToJson("bar", dt, "标题", "备注");//柱状图
EChartsToJson("line", dt, "标题", "备注");//折线图
EChartsToJson("pie", dt, "标题", "备注");//扇图