Net Core教程

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

本文主要是介绍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>
</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 option = {
            title: {
                text:"图表",
                left:"center"
            },
            legend: {
                left: 10,
                top:"3%",
                data:@Html.Raw(ViewData["Legend"]),                
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    animation: false
                }
            },
            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; }
    }

控制器代码

 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");

            //动态配置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);
        }

结束。

就是这么强大，烦恼！

这篇关于C# .net MVC实战项目 数据动态绑定到图表+动态绑定颜色+多Y轴实现+设置相应通道量程 （四）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航