fineui + echarts +C#后台取数据，执行

最新推荐文章于 2024-07-20 10:32:06 发布

abc32644

最新推荐文章于 2024-07-20 10:32:06 发布

阅读量531

点赞数

分类专栏： C#.Fineui 文章标签： echarts c# 前端

本文链接：https://blog.csdn.net/abc32644/article/details/127007615

版权

C#.Fineui 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近接触图表，发现echarts 也方便使用，整理下代码。

效果显示：后台按钮事件生成效果

1、页面事件：

<script type="text/javascript">
        
        //定义显示图表的DIV
        var myChart = echarts.init(document.getElementById('chart1'))
         

        //随机colors
        function randomColors() {
            var colors = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
            var randomIndex = Math.random() * colors.length;
            return $.merge(colors.slice(randomIndex), colors.slice(0, randomIndex));
        }

        // 指定图表的配置项和数据
        var options = {
            color: '#c23531',
            title: {
                text: '科室例次'
            },
            tooltip: {},
            legend: {
                data: [] //例次
            },
            xAxis: {
                data: [] //科室名称
            },
            yAxis: {},
            series: [{
                name: '',
                type: 'bar',
                data: []
            }]

        };

        // 使用刚指定的配置项和数据显示图表。 
        function jschart(p1) {
            var obj = JSON.parse(p1)
            options.xAxis.data = obj.xList; //给X轴数据
            options.series = obj.series;  //给series数据
            options.legend.data = obj.legend; //给legend数据
            myChart.hideLoading(); //隐藏动画加载效果
            myChart.setOption(options);  //设置图表实例的配置项以及数据
        }


  </script>

2、c# 后台定义，Loadchart 传用两个参数，（可根据需要自行调整）

pTable 传入查询dataTable结果，根据环境，自行传入

pTitle 图表标题



 

private void LoadChart(DataTable pTable, string pTitle)
  {
                //legend集合
            List<string> legendList = new List<string>();
              legendList.Add(pTitle);

            List<string> xList = new List<string>();   //X轴集合
            List<Series> seriesList = new List<Series>();  // series集合
            Series seriesObj = new Series();  //定义一个Series对象
            seriesObj.name = pTitle;
            seriesObj.type = "bar"; //柱形
            seriesObj.data = new List<int>(); 
 //先初始化 不初始化后面直直接data.Add(x)会报错   

            for (int i = 0; i < pTable.Rows.Count; i++)
            { 
                if (Convert.ToString(pTable.Rows[i]["KsName"])!="全部")  //合计项不显示
                { 
                xList.Add(Convert.ToString(pTable.Rows[i]["KsName"])); //x
                seriesObj.data.Add(Convert.ToInt32(pTable.Rows[i]["grls"]));//y
                }
                if (i > 10) break;  //后期加字典参数，灵活配置排名数量
                 
             }
             
            seriesList.Add(seriesObj);
            var newObj = new
            {
                xList = xList, //X轴集合
                series = seriesList, //series集合
                legend = legendList //legend集合
            };
            string json = Newtonsoft.Json.JsonConvert.SerializeObject(newObj);
            //后台调用页面定义，fineui 写法             
            PageContext.RegisterStartupScript("javascript:jschart('" + json + "') ");
            pTable.Dispose();
         }

3、 Series 类

/// <summary>
        /// 图表
        /// </summary>
        public class Series
        {
            /// series序列组名称
            public string name
            {
                get;
                set;
            }
            /// series序列组呈现图表类型
            public string type
            {
                get;
                set;
            }
            /// series序列组呈现对应的Y轴刻度
            public int yAxisIndex
            {
                get;
                set;
            }
            /// series序列组的数据为数据类型数组
            public List<int> data
            {
                get;
                set;
            }
        }

代码拿去用吧。