asp.net mvc 使用百度echarts图表

最新推荐文章于 2024-10-19 12:01:36 发布

罗汉松驻扎的工作基地

最新推荐文章于 2024-10-19 12:01:36 发布

阅读量1.3k

点赞数 4

本文链接：https://blog.csdn.net/MFCdestoryer/article/details/115656304

版权

本文介绍了如何在ASP.NET MVC项目中使用ECharts库创建数据图表。首先，展示了ECharts的基本使用步骤，包括设置DOM容器和生成柱状图的代码。接着，详细说明了在控制器中构建数据实体类，以及如何通过AJAX获取并显示数据。最后，给出了视图中的HTML和JS代码示例，强调了JavaScript代码应放在body底部以避免错误。示例代码包括了一个简单的柱状图和一个双轴柱状图的实现。

摘要由CSDN通过智能技术生成

在网站中经常会使用图表来展示数据，比如：

我在asp.net mvc网站里面用到的是百度的 echarts js控件，比较简单，主要是文档都是中文，好看好用。

本人菜鸟一只，以下是一个简单的例子，写的不对的地方请见谅：

首先来看看echarts官网上面的一些简单例子：

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>
这样你的第一个图表就诞生了！

可以看到，要生成一个图表，最主要的是构造chart option , 所以controller里面的主要功能就是构造option的输出。view里面就是写html和js 。

首先看controller的代码：

（1）图表的series 和xAxis 和 legend 都是需要具体数据的，所以先写成实体类：

 public class ChartSeries
    {
        public string type { get; set; }
        public string name { get; set; }
        public List<int> data { get; set; }
    }

    public class ChartXAxis
    {
        public string type { get; set; }
        public List<string> data { get; set; }
    }

    public class ChartLegend
    {
        public List<string> data { get; set; }
    }

备注：这些实体类的字段名称，大小写要跟官网例子一致，比如说：type 、 name 、 data 这些都是小写的。

（2）然后在controller 里面构造数据

 public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult GetData()
        {
            List<int> numberList = new List<int>();
            //[5, 20, 36, 10, 10, 20]
            numberList.Add(5);
            numberList.Add(20);
            numberList.Add(36);
            numberList.Add(10);
            numberList.Add(10);
            numberList.Add(10);

            List<string> nameList = new List<string>();
            //["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            nameList.Add("衬衫");
            nameList.Add("羊毛衫");
            nameList.Add("雪纺衫");
            nameList.Add("裤子");
            nameList.Add("高跟鞋");
            nameList.Add("袜子");

            return Json(new { numb= numberList , name=nameList });
        }

        [HttpPost]
        public ActionResult GetDuo()
        {
            ChartSeries series1 = new ChartSeries();
            series1.type = "bar";
            series1.name = "2015";
            series1.data = new List<int>();
            series1.data.Add(89);
            series1.data.Add(92);
            series1.data.Add(94);
            series1.data.Add(85);

            ChartSeries series2 = new ChartSeries();
            series2.type = "bar";
            series2.name = "2016";
            series2.data = new List<int>();
            series2.data.Add(95);
            series2.data.Add(89);
            series2.data.Add(91);
            series2.data.Add(76);

            ChartSeries series3 = new ChartSeries();
            series3.type = "bar";
            series3.name = "2017";
            series3.data = new List<int>();
            series3.data.Add(97);
            series3.data.Add(83);
            series3.data.Add(92);
            series3.data.Add(78);

            List<ChartSeries> seriseLIST = new List<ChartSeries>();
            seriseLIST.Add(series1); 
            seriseLIST.Add(series2); 
            seriseLIST.Add(series3);

            ChartXAxis xAxis = new ChartXAxis();
            xAxis.type = "category";
            xAxis.data = new List<string>();
            xAxis.data.Add("牛奶");
            xAxis.data.Add("橙汁");
            xAxis.data.Add("可乐");
            xAxis.data.Add("雪碧");

            ChartLegend legend = new ChartLegend();
            legend.data = new List<string>();
            foreach (var sitem in seriseLIST) {
                legend.data.Add(sitem.name);
            }

            return Json(new { se = seriseLIST , xa = xAxis , le = legend });
        }

    }

构造好了数据之后，前台view就可以用ajax来取数据了，下面是view里面html和js的代码：


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>

</head>
<body>
    <div> 
        <p id="p1">mvc home page</p>
 
        <div id="main" style="width: 600px;height:400px;"></div>
        <div id="m2" style="width:600px ; height:400px;"></div>
    </div>

    <script type="text/javascript">

        $(function () {

            $('#p1').css('color', 'red');

            $.ajax({
                type: "POST",
                url: "/home/GetData",
                data: {},
                success: function (data) {
                    var myChart = echarts.init(document.getElementById('main'));
                    // 指定图表的配置项和数据
                    var option = {
                        legend: {
                            data: ['销量']
                        },
                        xAxis: {
                            data: data.name
                        },
                        yAxis: {},
                        series: [{
                            name: '销量',
                            type: 'bar',
                            data: data.numb
                        }]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                },  //end success
                error: function (jqXHR) {

                }
            });  //end ajax


            $.ajax({
                type: "POST",
                url: "/home/GetDuo",
                data: {},
                success: function (data) {
                    //构造图表
                    var myChart2 = echarts.init(document.getElementById('m2'));
                    //配置参数
                    option2 = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        legend:data.le,
                        xAxis: data.xa,
                        yAxis: {},
                        series: data.se
                    };
                    //使用参数
                    myChart2.setOption(option2);
                },  //end success
                error: function (jqXHR) {

                }
            });  //end ajax

            

        }); //end page ready

          
    </script>
</body>
</html>

备注：编写chart.setOption 等echarts.min.js的代码时候， <script>需要放在body的最下面，要不然会提示js错误。

我一开始放在<head>里面就提示js方法找不到。。。放在body末尾就没事了。

上面就是一个简单的asp.net mvc 例子，运行效果如图