web.net中使用jquery绑定echart图表

已于 2022-04-01 19:06:51 修改
阅读量1k 收藏
点赞数
分类专栏： # asp.net # JS 文章标签： 前端 ajax .net
于 2022-03-26 10:37:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42711010/article/details/123743275
版权

记录一下数据绑定方式，方便以后查阅。
apsx页面部分代码：
js代码有两种方法

方法一

 <script src="js/jquery-1.4.2.min.js"></script>
  <script src="js/echarts.min.js"></script>
 <div class="leftMain_middle_leftIn">
                        <h3>达成率</h3>
                        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                        <div class="biaoge" style="width:500px; height:500px" id="chartmain"></div>                       
                        <script type="text/javascript">  
                            var data = <%=Scdcrate%> 
                                 getFloat = function (number, n) {//保留几位小数的函数
                                     n = n ? parseInt(n) : 0;
                                     if (n <= 0) {
                                         return Math.round(number);
                                     }
                                     number = Math.round(number * Math.pow(10, n)) / Math.pow(10, n); //四舍五入
                                     number = Number(number).toFixed(n); //补足位数
                                     return number;
                                 };
                            $(function () {
                            //指定图表的配置项和数据                            
                            option1 = {                              
                            };
                            //获取dom容器
                            var myChart1 = echarts.init(document.getElementById('chartmain'));
                            // 使用刚指定的配置项和数据显示图表。
                            myChart1.setOption(option1);                            
                                console.log(data);
                                //获取数据时显示加载状态图
                                myChart1.showLoading();
                                var time = [];
                                var factcn = [];
                                var drate = [];
                                var aimcn = [];
                                for (var i = 0; i < data.length; i++) {
                                    time[i] = data[i]["thtime"];
                                    factcn[i] = data[i]["factCn"];
                                    drate[i] = getFloat(parseFloat(data[i]["DRate"] * 100), 2);
                                    aimcn[i] = data[i]["AimCn"];
                                }                                                                                   
                                console.log(time);
                                console.log(factcn);
                                console.log(aimcn);
                                myChart1.hideLoading();    //隐藏加载动画
                                myChart1.setOption({                                               
                                    title: {
                                        text: '',
                                        subtext: ''
                                    },
                                    color: ["rgb(0,176,240)", "#e54d42", "red"],
                                    grid: {
                                        x: 40,
                                        y: 40,
                                        x2: 50,
                                        y2: 20,

                                    },

                                    xAxis: {
                                        data: time,
                                        axisLabel: {
                                            /*inside: true,*/
                                            interval: 0,
                                            textStyle: {
                                                color: '#fff',
                                                fontSize: 12

                                            }
                                        },
                                        axisTick: {
                                            show: false,
                                        },
                                        axisLine: {
                                            show: true,
                                            symbol: ['none', 'arrow'],
                                            symbolOffset: 12,
                                            lineStyle: {
                                                color: '#fff',
                                            }
                                        },
                                        z: 10
                                    },
                                    yAxis: [{
                                        type: 'value',
                                        name: '产能',
                                        max: 700,
                                        splitNumber: 5,
                                        interval: 700 / 5,
                                        axisLine: {
                                            show: true,
                                            symbol: ['none', 'arrow'],
                                            symbolOffset: 12,
                                            lineStyle: {
                                                color: '#fff',
                                            }
                                        },
                                        axisTick: {
                                            show: false
                                        },
                                        axisLabel: {
                                            textStyle: {
                                                color: '#fff',
                                                fontSize: 12
                                            },                                                       
                                        }
                                    },
                                        {
                                            type: 'value',
                                            name: '达成率',
                                            max: 160,
                                            min: 0,
                                            splitNumber: 5,
                                            interval: 160/5,
                                            splitLine: {//取消网络线
                                                show: false
                                            },
                                            axisLine: {
                                                show: true,
                                                //symbol: ['none', 'arrow'],
                                                symbolOffset: 12,
                                                lineStyle: {
                                                    color: '#fff',
                                                }
                                            },
                                            axisTick: {
                                                show: false
                                            },
                                            axisLabel: {
                                                textStyle: {
                                                    color: '#fff',
                                                    fontSize: '70%'
                                                },
                                                formatter: '{value}.0%'
                                            }
                                        },
                                        {
                                            type: 'value',
                                            name: '',
                                            max: 700,
                                            splitNumber: 5,
                                            interval: 700 / 5,
                                            axisLine: {
                                                show: true,
                                                symbol: ['none', 'arrow'],
                                                symbolOffset: 12,
                                                lineStyle: {
                                                    color: '#fff',
                                                }
                                            },
                                            axisTick: {
                                                show: false
                                            },
                                            axisLabel: {
                                                textStyle: {
                                                    color: '#fff',
                                                    fontSize: '70%'
                                                },
                                            },                                                  
                                        },
                                    ],
                                    dataZoom: [
                                        {
                                            type: 'inside'
                                        }
                                    ],
                                    series: [
                                        { // For shadow
                                            name: '产能',
                                            yAxisIndex: 0,//对应右侧Y轴
                                            type: 'bar',
                                            itemStyle: {
                                                color: 'rgba(0,0,0,0.05)'
                                            },
                                            barGap: '-100%',
                                            barCategoryGap: '40%',
                                            data: aimcn,
                                            animation: false
                                        },
                                        {                                                      
                                            type: 'bar',
                                            itemStyle: {
                                                color: new echarts.graphic.LinearGradient(
                                                    0, 0, 0, 1,
                                                    [
                                                        { offset: 0, color: '#0efdff' },
                                                        { offset: 0.5, color: '#188df0' },
                                                        { offset: 1, color: '#188df0' }
                                                    ]
                                                ),
                                                normal: {
                                                    label: {
                                                        show: true, //开启显示
                                                        position: 'top', //在上方显示
                                                        textStyle: { //数值样式
                                                            color: 'white',
                                                            fontSize: '70%'
                                                        },
                                                        formatter: '{c}'
                                                    }
                                                },
                                            },
                                            emphasis: {
                                                itemStyle: {
                                                    color: new echarts.graphic.LinearGradient(
                                                        0, 0, 0, 1,
                                                        [
                                                            { offset: 0, color: '#2378f7' },
                                                            { offset: 0.7, color: '#2378f7' },
                                                            { offset: 1, color: '#0efdff' }
                                                        ]
                                                    )
                                                }
                                            },
                                            data: factcn,                                                        
                                        },
                                        {
                                            name: '达成率',
                                            yAxisIndex: 1,//对应右侧Y轴
                                            type: 'line',
                                            data: drate,
                                            itemStyle: {        //上方显示数值                      
                                                normal: {
                                                    label: {
                                                        show: true, //开启显示
                                                        position: 'top', //在上方显示
                                                        textStyle: { //数值样式
                                                            color: 'white',
                                                            fontSize: '70%'
                                                        },
                                                        formatter: '{c}%'
                                                    }
                                                },
                                            },
                                        },
                                            {
                                                name: '',                                                        
                                                type: 'line',
                                                data: aimcn,
                                                itemStyle: {        //上方显示数值                      
                                                    normal: {
                                                        label: {
                                                            show: true, //开启显示
                                                            position: 'top', //在上方显示
                                                            textStyle: { //数值样式
                                                                color: 'white',
                                                                fontSize: '70%'
                                                            },
                                                            formatter: '{c}'
                                                        }
                                                    },
                                                },
                                            },
                                    ]
                                });                                                                       
                            });
 
                        </script>
                        <span class="border_bg_leftTop"></span>
                        <span class="border_bg_rightTop"></span>
                        <span class="border_bg_leftBottom"></span>
                        <span class="border_bg_rightBottom"></span>
                    </div>

方法二

                          var data = <%=Scdcrate%> 
                                 getFloat = function (number, n) {
                                     n = n ? parseInt(n) : 0;
                                     if (n <= 0) {
                                         return Math.round(number);
                                     }
                                     number = Math.round(number * Math.pow(10, n)) / Math.pow(10, n); //四舍五入
                                     number = Number(number).toFixed(n); //补足位数
                                     return number;
                                 };
                            $(function () {
                           
                                    var time = [];
                                    var factcn = [];
                                    var drate = [];
                                    var aimcn = [];
                                    for (var i = 0; i < data.length; i++) {
                                        time[i] = data[i]["thtime"];
                                        factcn[i] = data[i]["factCn"];
                                        drate[i] = getFloat(parseFloat(data[i]["DRate"] * 100), 2);
                                        aimcn[i] = data[i]["AimCn"];
                                    }                                                                                   
                                    console.log(time);
                                    console.log(factcn);
                                    console.log(aimcn);
                                    echarts_1(time, factcn, drate, aimcn);
                            });
                            function echarts_1(time, factcn, drate, aimcn) {
                                // 基于准备好的dom，初始化echarts实例
                                var myChart1 = echarts.init(document.getElementById('chartmain'));
                                option = {
                                    title: {
                                        text: '',
                                        subtext: ''
                                    },
                                    color: ["rgb(0,176,240)", "#e54d42", "red"],
                                    grid: {
                                        x: 40,
                                        y: 40,
                                        x2: 50,
                                        y2: 20,

                                    },

                                    xAxis: {
                                        data: time,
                                        axisLabel: {
                                            /*inside: true,*/
                                            interval: 0,
                                            textStyle: {
                                                color: '#fff',
                                                fontSize: 12

                                            }
                                        },
                                        axisTick: {
                                            show: false,
                                        },
                                        axisLine: {
                                            show: true,
                                            symbol: ['none', 'arrow'],
                                            symbolOffset: 12,
                                            lineStyle: {
                                                color: '#fff',
                                            }
                                        },
                                        z: 10
                                    },
                                    yAxis: [{
                                        type: 'value',
                                        name: '产能',
                                        max: 700,
                                        splitNumber: 5,
                                        interval: 700 / 5,
                                        axisLine: {
                                            show: true,
                                            symbol: ['none', 'arrow'],
                                            symbolOffset: 12,
                                            lineStyle: {
                                                color: '#fff',
                                            }
                                        },
                                        axisTick: {
                                            show: false
                                        },
                                        axisLabel: {
                                            textStyle: {
                                                color: '#fff',
                                                fontSize: 12
                                            },                                                       
                                        }
                                    },
                                        {
                                            type: 'value',
                                            name: '达成率',
                                            max: 160,
                                            min: 0,
                                            splitNumber: 5,
                                            interval: 160/5,
                                            splitLine: {//取消网络线
                                                show: false
                                            },
                                            axisLine: {
                                                show: true,
                                                //symbol: ['none', 'arrow'],
                                                symbolOffset: 12,
                                                lineStyle: {
                                                    color: '#fff',
                                                }
                                            },
                                            axisTick: {
                                                show: false
                                            },
                                            axisLabel: {
                                                textStyle: {
                                                    color: '#fff',
                                                    fontSize: '70%'
                                                },
                                                formatter: '{value}.0%'
                                            }
                                        },
                                        {
                                            type: 'value',
                                            name: '',
                                            max: 700,
                                            splitNumber: 5,
                                            interval: 700 / 5,
                                            axisLine: {
                                                show: true,
                                                symbol: ['none', 'arrow'],
                                                symbolOffset: 12,
                                                lineStyle: {
                                                    color: '#fff',
                                                }
                                            },
                                            axisTick: {
                                                show: false
                                            },
                                            axisLabel: {
                                                textStyle: {
                                                    color: '#fff',
                                                    fontSize: '70%'
                                                },
                                            },                                                  
                                        },
                                    ],
                                    dataZoom: [
                                        {
                                            type: 'inside'
                                        }
                                    ],
                                    series: [
                                        { // For shadow
                                            name: '产能',
                                            yAxisIndex: 0,//对应右侧Y轴
                                            type: 'bar',
                                            itemStyle: {
                                                color: 'rgba(0,0,0,0.05)'
                                            },
                                            barGap: '-100%',
                                            barCategoryGap: '40%',
                                            data: aimcn,
                                            animation: false
                                        },
                                        {                                                      
                                            type: 'bar',
                                            itemStyle: {
                                                color: new echarts.graphic.LinearGradient(
                                                    0, 0, 0, 1,
                                                    [
                                                        { offset: 0, color: '#0efdff' },
                                                        { offset: 0.5, color: '#188df0' },
                                                        { offset: 1, color: '#188df0' }
                                                    ]
                                                ),
                                                normal: {
                                                    label: {
                                                        show: true, //开启显示
                                                        position: 'top', //在上方显示
                                                        textStyle: { //数值样式
                                                            color: 'white',
                                                            fontSize: '70%'
                                                        },
                                                        formatter: '{c}'
                                                    }
                                                },
                                            },
                                            emphasis: {
                                                itemStyle: {
                                                    color: new echarts.graphic.LinearGradient(
                                                        0, 0, 0, 1,
                                                        [
                                                            { offset: 0, color: '#2378f7' },
                                                            { offset: 0.7, color: '#2378f7' },
                                                            { offset: 1, color: '#0efdff' }
                                                        ]
                                                    )
                                                }
                                            },
                                            data: factcn,                                                        
                                        },
                                        {
                                            name: '达成率',
                                            yAxisIndex: 1,//对应右侧Y轴
                                            type: 'line',
                                            data: drate,
                                            itemStyle: {        //上方显示数值                      
                                                normal: {
                                                    label: {
                                                        show: true, //开启显示
                                                        position: 'top', //在上方显示
                                                        textStyle: { //数值样式
                                                            color: 'white',
                                                            fontSize: '70%'
                                                        },
                                                        formatter: '{c}%'
                                                    }
                                                },
                                            },
                                        },
                                            {
                                                name: '',                                                        
                                                type: 'line',
                                                data: aimcn,
                                                itemStyle: {        //上方显示数值                      
                                                    normal: {
                                                        label: {
                                                            show: true, //开启显示
                                                            position: 'top', //在上方显示
                                                            textStyle: { //数值样式
                                                                color: 'white',
                                                                fontSize: '70%'
                                                            },
                                                            formatter: '{c}'
                                                        }
                                                    },
                                                },
                                            },
                                    ]
                                };                
                                // 使用刚指定的配置项和数据显示图表。
                                myChart1.setOption(option);
                                window.addEventListener("resize", function () {
                                    myChart1.resize();
                                });
                            }

cs代码

  public partial class Index : System.Web.UI.Page
    {
        SearchShow Show = new SearchShow();      
        public string Line = "C01";
        protected void Page_Load(object sender, EventArgs e)
        {            
            PlanCompletionToji();
        }
        
        public string Scdcrate = "";
        /// <summary>
        /// 达成率
        /// </summary>
        private void PlanCompletionToji()
        {
            DataTable dr = Show.f4(Line);//数据库查询的数据（也可写table格式数据测试）
            if (dr != null)
            {
                if (dr.Rows.Count != 0)
                {
                     Scdcrate = ToJson(dr);                
                }
            }
        }
      
        public static string ToJson(object obj)
        {
            return NewtonsoftJson(obj);
        }
        public static string NewtonsoftJson(object obj)
        {
            return Newtonsoft.Json.JsonConvert.SerializeObject(obj, Newtonsoft.Json.Formatting.None);
        }     
    }

程序需要引用工具：Newtonsoft.Json.dll
见本人发布的文章：https://blog.csdn.net/qq_42711010/article/details/123096399

susan花雨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Jquery Echarts图表插件，自己研究总结实例+注释说明（源码）
09-11
Echarts图表插件，这是本人自己研究总结的一份实例，里面有详细注释说明怎么使用以及变量的含义，下载即可浏览查看效果，简单，实用， 方便，分享给大家！
.net用echart可视化动态显示数据，柱状图，折现图。
Tenderness104的博客
05-18 800
前台 引用js <script src="../js/echarts.min.js"></script> style样式必须要有哦 <style> .h1title { font-size: 16px; display: block; text-align: center; /*padding-top: 0.5em;*/ }
Jquery使用echarts饼图
热门推荐
问天丶天问
05-20 1万+
1.官网下载  http://echarts.baidu.com/download.html   2.导入项目 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[图片]http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; ...
jquery +Echart画图表
a5575vhj的博客
03-22 1196
$(function () { $.ajax({ type:"post", async:false, data:{}, url:"../codeindex/codeFormatConvert", success:function(d){ var data = d.data; ...
Echart 官网给的一个直观的事例
diaoshaoche9857的博客
01-13 275
附录：一个直观的事例 查看更多实例example，或者使用这个demo或ECharts单一文件引入作为你的模板 // 图表实例化------------------ // srcipt标签式引入 var myChart = echarts.init(document.getElementById('main')); // 过渡-------------------...
基于asp.net下使用jquery实现ajax的解决方法
01-01
首先新建一个名闻Ajax的asp.net web空应用程序，项目目录如下图所示。 其中.ashx文件是一般处理程序，暂时不用知道它是干嘛用的，后面你就知道了。jquery-1.7.1.js可以在这里下载。 我们首先理清一下我们要实现的...
ASP.NET MVC使用JQuery系列
02-02
6. **JQuery与ASP.NET MVC的结合**：学习如何在ASP.NET MVC应用中引入和使用JQuery，实现动态交互效果，如表单验证、异步数据加载等。了解如何使用JQuery AJAX方法与服务器进行通信，更新页面内容而无需刷新整个页面...
【ASP.NET编程知识】ASP.NET MVC中jQuery与angularjs混合应用传参并绑定数据.docx
05-17
"ASP.NET MVC中 jQuery与angularjs混合应用传参并绑定数据" 本文档主要讲解了如何在ASP.NET MVC中将jQuery与angularjs混合应用传参并绑定数据。下面是相关的知识点： 1. ASP.NET MVC框架： ASP.NET MVC是一种基于...
在ASP.NET中运行jQuery和HTML模板进行Ajax数据绑定并显示
03-16
内容索引:.NET源码,Ajax相关,jQuery,Ajax,数据绑定　HTMLTemplate+jQuery实现纯HTML模板进行ajax数据绑定，分页也是在Ajax下完成，取得分页总数，分页总数放到变量pageCount里，隐藏loading提示，隐藏模板，设置翻页...
echarts .NET类库开源
weixin_34209406的博客
03-03 251
前言： 　　２０１２年从长沙跑到深圳，２０１６年又从深圳回到长沙，兜兜转转一圈，又回到了原点．４年在深圳就呆了一家公司，回长沙也是因为深圳公司无力为继，长沙股东老板挽留，想想自己年纪也不小了．就回来了，在长沙工作几月，也没什么太多的不适应．不用赶着项目上线，不用加班，想想其实也不错.　 　　从１２年在长沙就想写点开源的东西，不过实在不敢献丑．这次机缘巧合，有个朋友一个项目需要用到大量报表，我找...
jquery+echarts+php实时动态图表显示
01-06
基于百度的前端富图标框架echart写的一个动态更新图标显示示例，后端基于php，用户可自己定义后端数据来源（动态数据库，系统信息等等），前端显示参数可自定义
echart引入jquery例子
daxiashangxian的博客
04-02 473
将下载的jquery-3.1.7.js 放到本HTML同目录下。
jQuery图表插件EChart的使用
包子源的博客
03-15 4937
百度的图表插件EChart很好上手，效果也不错，接下来看看如何使用吧： 首先需要下载EChart插件，下载地址：http://echarts.baidu.com/download.html 然后引入jQuery和echart，在官网上找到自己想要的图表：http://echarts.baidu.com/examples.html 咱们来制作一个折线图吧：
使用jQuery实现echars智能图表面板（附代码）
Henry的博客
09-18 1449
使用jQuery实现智能图表面板,采用echars.js，附录代码
jquery 实现echarts飞线图
weixin_43020652的博客
06-19 649
this.loadChartBox = function(d) { let chart = echarts.init(document.getElementById("MapID")); chart.clear(); echarts.registerMap('zhangjiagang', 直接放入geojson数据); var data = [] var toolTipData = []; var center
jQuery使用echarts循环插入图表
Hero_rong的博客
11-15 742
y轴刻度调整 x轴只显示两个值
使用 ECharts 进行数据可视化
最新发布
qq_62512874的博客
08-23 1162
ECharts 是一个由百度开源的强大、灵活的 JavaScript 图表库，用于在 Web 页面上创建各种类型的数据可视化图表。它具有丰富的图表类型、强大的配置选项和良好的跨平台兼容性，广泛应用于数据分析、业务报表、仪表盘等场景。ECharts 是一个功能强大的数据可视化工具，它提供了丰富的图表类型和灵活的配置选项，适合各种场景下的数据展示需求。
ASP.NET结合Echarts展示后台数据
HerryDong的博客
05-18 5134
ECharts功能强大，如果项目中需要根据后台数据生成统计图表，那么ECharts绝对是不二选择。下面就来介绍一下如何利用ASP.NET + ECharts来生成折线图、柱状图、饼图这三类基本的统计图。首先在SqlServer中建立一张测试表[TSales]，该表模拟某商店在2019年每天的销售金额，共有365条记录，如下图所示： 下面需要按照月份对该数据表进行划分，生成相应的折线图、柱状图、饼图，同时还需要根据季度对该数据表进行划分，生成另一个饼图，如下图所示： 前端代码 <!DOCTYPE h
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

susan花雨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值