C# .net mvc实战项目数据动态绑定到图表+动态绑定颜色+多Y轴实现+对应通道单位绑定显示+设置相应通道量程（四）

最新推荐文章于 2024-04-27 22:56:21 发布

yangzm996

最新推荐文章于 2024-04-27 22:56:21 发布

阅读量1k

点赞数

分类专栏： MVC C# 文章标签： c#

本文链接：https://blog.csdn.net/weixin_39448579/article/details/120342767

版权

C# 同时被 2 个专栏收录

36 篇文章 18 订阅

订阅专栏

MVC

8 篇文章 4 订阅

订阅专栏

效果图
在这里插入图片描述

视图代码：


@{
    ViewBag.Title = "Index";
}

<head>
    <script src="~/Content/echarts.min.js"></script>
    <script src="~/Content/jquery-3.5.1.js"></script>
    <script src="~/Content/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div id="main" style="width: 1200px;height:800px;padding-top:50px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var Unit=@Html.Raw(ViewBag.Unit);
         var option = {
            title: {
                text:"图表",
                left:"center"
            },
            legend: {
                left: 10,
                top:"3%",
                data:@Html.Raw(ViewData["Legend"]),
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    animation: false
                },
                formatter: function (a) {
                    let list = []
                    let listItem = ''
                    for (var i = 0; i < a.length; i++) {
                        list.push(
                            '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
                            a[i].color +
                            ';margin-right: 5px;border-radius: 50%;}"></i><span style="width:50px; display:inline-block;">' +
                            a[i].seriesName + '</span>:' + a[i].value + Unit[i]
                        )
                    }
                    listItem = list.join('<br>')
                    return '<div class="showBox">' + listItem + '</div>'
                }
            },
            toolbox: {
                feature: {
                    dataZoom: {
                        //yAxisIndex: 'none'  //屏蔽Y轴缩放
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis:{
                data:@Html.Raw(ViewData["XAxis"]),
            },
            axisPointer: {
                link: { xAxisIndex: 'all' }
            },
            yAxis:@Html.Raw(ViewData["yAxis"]),
            series:@Html.Raw(ViewData["Seriers"]),
        };
        myChart.setOption(option);
    </script>
</body>

先在Models中添加辅助类SeriersBase

 public class SeriersBase
    {
        public string name { get; set; }
        public string type { get; set; }
        public List<double> data { get; set; }
        public int yAxisIndex { get; set; }
        public string color { get; set; }
    }

再来一个辅助类yAxisBase

public class yAxisBase
    {
        public string position { get; set; }
        public int offset { get; set; }
        public int max { get; set; }
        public int min { get; set; }
        public string type { get; set; }
        public AxisLine axisLine { get; set; }
    }
    public class AxisLine
    {
        //是否展示多Y轴
        public bool show { get; set; }
    }

控制器代码

 // GET: Test
        public ActionResult Index()
        {         
            //手动设置一些数据
            List<string> values = new List<string>();
            values.Add("08:00:00,1,10,20,30,40");
            values.Add("08:00:01,2,11,21,31,41");
            values.Add("08:00:02,3,12,22,32,42");
            values.Add("08:00:03,4,13,23,33,43");
            values.Add("08:00:04,5,14,24,34,44");
            
            //设置要显示的单位
            var stringArray = new List<string>();
            stringArray.Add("mm");
            stringArray.Add("cm");
            stringArray.Add("m");
            stringArray.Add("Pa");
            stringArray.Add("K");
            ViewBag.Unit = Newtonsoft.Json.JsonConvert.SerializeObject(stringArray);
            
            //动态配置Legend
            ViewData["Legend"] = GetLegend();
            //实现多Y轴
            ViewData["yAxis"] = GetyAxis();
            //绑定X轴的数据显示
            ViewData["XAxis"] = GetXAxis(values);
            //将数据实时绑定到图表上
            ViewData["Seriers"] = GetSeriers(values, 5, new string[] { "个" ,"十", "百", "千", "万"     });
            return View();
        }
        private string GetLegend()
        {
            string[] columnlist = new string[] { "个", "十", "百", "千", "万" };
            return JsonConvert.SerializeObject(columnlist);
        }
        private string GetyAxis()
        {
            List<string> columnlist = new List<string>();
            columnlist.Add("0,10");
            columnlist.Add("10,20");
            columnlist.Add("20,31");
            columnlist.Add("30,42");
            columnlist.Add("40,53");
            columnlist.Sort();
            List<Models.yAxisBase> liststat = new List<Models.yAxisBase>();
            for (int i = 0; i < columnlist.Count; i++)
            {
                string[] temp = columnlist[i].Split(',');
                //offset = i * 30 是配置每两个Y轴之间的间隔
                liststat.Add(new Models.yAxisBase() { position = "left", offset = i * 30, max = temp != null && temp.Length > 1 ? Convert.ToInt32(temp[1]) : 100, min = temp != null && temp.Length > 1 ? Convert.ToInt32(temp[0]) : 0, type = "value", axisLine = new Models.AxisLine() { show = true } });//设置展示多Y轴
            }
            return JsonConvert.SerializeObject(liststat);
        }
        private string GetXAxis(List<string> _value)
        {
            List<string> XAxis = new List<string>();
            foreach (string item in _value)
            {
                string[] data = item.Split(',');
                XAxis.Add(data.First());
            }
            return JsonConvert.SerializeObject(XAxis);
        }
        private string GetSeriers(List<string> _value, int columncount, string[] columnlist)
        {
            List<Models.SeriersBase> liststat = new List<Models.SeriersBase>();
            List<double>[] datastring = new List<double>[columncount];//每个Y轴上的数值集合
            foreach (string item in _value)
            {
                string[] data = item.Split(',');
                for (int i = 1; i < data.Length; i++)
                {
                    if (datastring[i-1] == null)
                        datastring[i-1] = new List<double>();
                    datastring[i-1].Add(Convert.ToDouble(data[i]));
                }
            }
            //准备的颜色
            List<string> colorlist = new List<string>();
            colorlist.Add("Red");
            colorlist.Add("Yellow");
            colorlist.Add("Blue");
            colorlist.Add("Black");
            colorlist.Add("Purple");

            for (int i = 0; i < columnlist.Length; i++)
            {
                //yAxisIndex = i 对应的就是，当前是第几个Seriers，对应的量程索引是第几位，即在设置yAxis中的columnlist
                liststat.Add(new Models.SeriersBase() { name = columnlist[i], color = colorlist[i], yAxisIndex = i, type = "line", data = datastring[i] });
            }
            return JsonConvert.SerializeObject(liststat);
        }

结束。

就是这么强大，烦恼！

yangzm996

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
C# .net mvc实战项目数据动态绑定到图表+动态绑定颜色+多Y轴实现+对应通道单位绑定显示+设置相应通道量程（四）

效果图视图代码：@{ ViewBag.Title = "Index";}<head> <script src="~/Content/echarts.min.js"></script> <script src="~/Content/jquery-3.5.1.js"></script> <script src="~/Content/jquery-3.5.1.min.js"></script
复制链接

扫一扫