当前位置: 美高梅棋牌 > 热门直播 > 正文

jQuery插件Echarts实现的渐变色柱状图_jquery_脚本之

时间:2019-12-15 13:18来源:热门直播
效果图: 1.1版本修复了部分bug,同时新增以下功能: 1.可自定义坐标颜色2.可自定义X,Y轴坐标名称 3.Y轴动态坐标自动建立 4.Y轴动态坐标值自动计算5.插件样式升级 JQUBAR1.1使用方法:

效果图:

1.1版本修复了部分bug,同时新增以下功能: 1.可自定义坐标颜色 2.可自定义X,Y轴坐标名称 3.Y轴动态坐标自动建立 4.Y轴动态坐标值自动计算 5.插件样式升级 JQUBAR1.1使用方法: 1.引入Javascript文件及CSS文件: (在html

代码如下:

加入以下代码,以ASP.NET MVC 2.0 为例) 复制代码 代码如下:

 ECharts柱状图       var dom = document.getElementById; var myChart = echarts.init; option = null; var xAxisData = []; var data = []; for (var i = 20; i < 29; i++) { xAxisData.push; data.push(Math.round + 200); } // 初始 option option = { title: { text: '每日成交额' }, tooltip: { trigger: 'axis', borderColor: '#636F7F', borderWidth : 1, backgroundColor : 'rgba', textStyle:{ color : '#ffffff', // fontWeight : 'bold', fontSize : 14, }, transitionDuration : 0.6, formatter: '{b0}<br />{c0}', axisPointer :{ type : 'line', lineStyle : { color : '#05F41E', width : 1, type : 'solid', }, }, // axisPointer : { // 坐标轴指示器,坐标轴触发有效 // type : 'shadow', // 默认为直线,可选为:'line' | 'shadow' // shadowStyle :{ // color : '#D6EAFA', // opacity : 0.5, // } // }, }, calculable : true, xAxis: { data: xAxisData.map{ return x; }), axisLabel: { textStyle: { color: '#333', align : 'center', baseline : 'top' }, rotate : 20, margin : 15, }, }, yAxis: { // 横向标线 默认为TRUE splitLine: { show: true, }, axisLabel: { textStyle: { color: '#333' } }, type : 'value', boundaryGap : false, // 分隔线线的类型 splitLine: { show: true, lineStyle :{ color : '#EFF0F0', type : 'dashed', } } }, series: { type: 'bar', data: data, barWidth: 15, itemStyle: { normal: { barBorderRadius: 20, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#37BBF8' }, { offset: 1, color: '#2294E4' }]), // shadowColor: 'rgba', // shadowBlur: 20, areaStyle: {type: 'default'} } } }, }; if (option && typeof option === "object") { myChart.setOption; } 

" rel="stylesheet" type="text/css" /> 2.在html加入以下javascript代码: 复制代码 代码如下:

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

3.加入HTML代码: 复制代码 代码如下:

缩放 拖拽
姓名模糊查询:
4.MVC2.0 C#代码: 复制代码 代码如下: private NORTHWINDDataContext _Context = new NORTHWINDDataContext(); private decimal[] GetPricesByEmployeeId { decimal[] result = null; result = _Context.Orders.Where(o => o.EmployeeID == employeeId).Take .Selectoo.ShipVia).ToArray(); return result; } public JsonResult LoadData { var data = (from e in _Context.Employees.Take select new { EmployeeID = e.EmployeeID, Orders = GetPricesByEmployeeId, Name = e.FirstName, }).Distinct(); if (!string.IsNullOrEmpty { data = data.Where(d => d.Name.IndexOf; } return Json(new { Success = true, Msg = data }, JsonRequestBehavior.AllowGet); }

编辑:热门直播 本文来源:jQuery插件Echarts实现的渐变色柱状图_jquery_脚本之

关键词: