echarts-简单使用
来源：互联网 发布：淘宝店铺怎么做广告 编辑：程序博客网 时间：2024/06/05 20:54
仪表盘
//调用入口//生成仪表盘 gaugParams = { "orgName":orgName, "orgSafeIndex":org_safeIndex }; gaugChartsInit(gaugDivId,orgId,gaugParams,"50%","32%","58%");///////////////////////////////////////////////////////////function gaugChartsInit(divId, orgId, params, x, y, r) { //var counts = getGaugChartData(orgId, action); var ybp = [ gaugSeriesItem(x, y, r, params["orgSafeIndex"], 0, params["orgName"]) ]; require.config({ paths : { echarts : './pub/chart/ECharts/echarts' } }); require([ 'echarts', 'echarts/chart/gauge' // 加载模块，按需加载 ], function(ec) { var myChart = ec.init(document.getElementById(divId)); var option = { tooltip : { formatter : "{c}" }, /* * legend: { show:false, orient : 'horizontal', x : 'left', * y:'bottom', itemHeight:10, textStyle:{ color: 'blue' }, * data:['安全','较安全','较重','严重','特别严重'] }, */toolbox : { show : false, feature : { mark : { show : true }, restore : { show : true }, saveAsImage : { show : true } } }, series : ybp // gaugSeriesItem('10%','50%'),gaugSeriesItem('35%','50%'),gaugSeriesItem('60%','50%'),gaugSeriesItem('85%','50%'), // gaugSeriesItem('22.5%','80%'),gaugSeriesItem('47.5%','80%'), // gaugSeriesItem('72.5%','80%') }; myChart.setOption(option); });}function gaugSeriesItem(x, y, r, value, max, orgName) { var ybp = { // name:orgName, type : 'gauge', center : [ x, y ], radius : r, min : 0, max : 100, precision : 0, // 小数精度，默认为0，无小数点 splitNumber : 5, axisLine : { // 坐标轴线 lineStyle : { // 属性lineStyle控制线条样式 width : 10, color : [ [ 0.2, '#3FA558' ], [ 0.4, '#1796E7' ], [ 0.6, '#FFDD00' ], [ 0.8, '#FA8C35' ], [ 1, '#FF1717' ] ] } }, axisTick : { // 坐标轴小标记 length : 15, // 属性length控制线长 lineStyle : { // 属性lineStyle控制线条样式 color : 'auto' } }, axisLabel : { // 坐标轴文本标签，详见axis.axisLabel show : true, /* * formatter: function(v){ return v.toFixed(1); }, */ textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE color : '#333' } }, splitLine : { // 分隔线\ length : 20, // 属性length控制线长 lineStyle : { // 属性lineStyle（详见lineStyle）控制线条样式 color : 'auto' } }, pointer : { length : '80%', width : 8, color : 'auto' }, title : { show : false, textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE // fontWeight: 'bolder', fontSize : 1, // fontStyle: 'italic' } }, detail : { formatter : '{value}', textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE fontWeight : 'bolder', fontSize : 5 } }, data : [ { value : value, name : orgName } ] }; return ybp;}柱状图
//调用入口barChartsInit("wlzx_rk_year","index/logistics/getInstorageYearStatusCountList.do",dataName,""); /////////////////////////////////////////////////////function barChartsInit(divId, action, dataName, titleText) { require.config({ paths : { echarts : './pub/chart/ECharts/echarts' } }); require([ 'echarts', 'echarts/chart/bar' // 加载bar模块，按需加载 ], function(ec) { var myChart = ec.init(document.getElementById(divId)); var counts = getBarChartData(action); var option = { title : { text : titleText, // subtext: '纯属虚构' textStyle : { fontSize : 16, fontWeight : 'bolder', // color: '#000', // fontFamily: '微软雅黑,宋体' }, x : 'center', y : 'bottom' }, /*color : [ '#228B22', '#00008B', '#FFFF00', '#808080', '#FF0000' ],*/ color:['green','#FF0000','#FA8C35','blue','#FFDD00',], tooltip : { trigger : 'axis' }, toolbox : { show : false, feature : { mark : { show : false }, dataView : { show : true, readOnly : false }, magicType : { show : true, type : [ 'line', 'bar' ] }, restore : { show : true }, saveAsImage : { show : true } } }, calculable : true, legend : { data : [ dataName[0], dataName[1], dataName[2], dataName[3], dataName[4] ] }, xAxis : [ { type : 'category', data : [ counts[0][0], counts[0][1], counts[0][2], counts[0][3], counts[0][4], counts[0][5], counts[0][6], counts[0][7], counts[0][8], counts[0][9], counts[0][10], counts[0][11], counts[0][12] ] } ], yAxis : [ { type : 'value', min : 0, max : 30, name : '数量', // boundaryGap:[0,0], boundaryGap : false, axisLabel : { formatter : '{value}' }, splitArea : { show : true } }, { type : 'value', min : 0, max : 30, name : '数量', boundaryGap : [ 0, 0 ], axisLabel : { formatter : '{value}' }, splitArea : { show : true } } ], series : [ { name : dataName[0], type : 'bar', data : [ counts[1][0][0], counts[1][1][0], counts[1][2][0], counts[1][3][0], counts[1][4][0], counts[1][5][0], counts[1][6][0], counts[1][7][0], counts[1][8][0], counts[1][9][0], counts[1][10][0], counts[1][11][0], counts[1][12][0] ] }, { name : dataName[1], type : 'bar', data : [ counts[1][0][1], counts[1][1][1], counts[1][2][1], counts[1][3][1], counts[1][4][1], counts[1][5][1], counts[1][6][1], counts[1][7][1], counts[1][8][1], counts[1][9][1], counts[1][10][1], counts[1][11][1], counts[1][12][1] ] }, { name : dataName[2], type : 'bar', yAxisIndex : 1, data : [ counts[1][0][2], counts[1][1][2], counts[1][2][2], counts[1][3][2], counts[1][4][2], counts[1][5][2], counts[1][6][2], counts[1][7][2], counts[1][8][2], counts[1][9][2], counts[1][10][2], counts[1][11][2], counts[1][12][2] ] }, { name : dataName[3], type : 'bar', yAxisIndex : 1, data : [ counts[1][0][3], counts[1][1][3], counts[1][2][3], counts[1][3][3], counts[1][4][3], counts[1][5][3], counts[1][6][3], counts[1][7][3], counts[1][8][3], counts[1][9][3], counts[1][10][3], counts[1][11][3], counts[1][12][3] ] }, { name : dataName[4], type : 'bar', yAxisIndex : 1, data : [ counts[1][0][4], counts[1][1][4], counts[1][2][4], counts[1][3][4], counts[1][4][4], counts[1][5][4], counts[1][6][4], counts[1][7][4], counts[1][8][4], counts[1][9][4], counts[1][10][4], counts[1][11][4], counts[1][12][4] ] } ] }; myChart.setOption(option); });}//获取数据function getBarChartData(action) { var months = [ '', '', '', '', '', '', '', '', '', '', '', '', '' ]; for ( var i in months) { var myMon = new Date().getMonth() + 1; var myYear = new Date().getFullYear() - 1; myMon = myMon + parseInt(i); if (myMon > 12) { myMon = myMon - 12; myYear++; } months[i] = new Date(myYear, myMon - 1).format("yyyy-MM"); } var sts = []; for (var i = 0; i < 13; i++) { sts[i] = [ 0, 0, 0, 0, 0 ]; } var counts = [ months, sts ]; // 存放月份和状态信息 $.ajax({ cache:false, url : action, type : "get", async : false,// 同步 success : function(data) { // counts = data.rows; var flag = 0; for ( var i in data.rows) { for ( var j in months) { if (data.rows[i].month == months[j]) { flag = j;// 月份作为下标 } } // $.ligerDialog.error(data.rows[i].zc); var k = 0; sts[flag][k++] = data.rows[i].zc; // 月(下标1)-状态(下标2)-数量 sts[flag][k++] = data.rows[i].qs; sts[flag][k++] = data.rows[i].gq; sts[flag][k++] = data.rows[i].jgq; sts[flag][k++] = data.rows[i].wsz; } }, error : function() { $.ligerDialog.error("ajax请求失败！"); } }); return counts;}饼状图
//调用入口pieChartsInit("wlzx_rk_month","index/logistics/getInstorageMonthStatusCountList.do","","预警状态",dataName); /////////////////////////////////function pieChartsInit(divId, action, titleText, seriesName, dataName) { require.config({ paths : { echarts : './pub/chart/ECharts/echarts' } }); require([ 'echarts', 'echarts/chart/pie' // 使用饼图就加载pie模块，按需加载 ], function(ec) { var myChart = ec.init(document.getElementById(divId)); var counts = getPieChartData(action); var option = { title : { text : titleText, subtext : '', x : 'left' }, tooltip : { }, legend : { orient : 'vertical', x : 'left', selectedMode : false, data : [ dataName[0], dataName[1], dataName[2], dataName[3], dataName[4] ] }, color : [ '#228B22', '#00008B', '#FFFF00', '#808080', '#FF0000' ], toolbox : { show : false, feature : { mark : { show : false }, dataView : { show : true, readOnly : false }, restore : { show : true }, saveAsImage : { show : true } } }, calculable : false, series : [ { name : seriesName, type : 'pie', radius : [ 0, '40%' ], center : [ '70%', '30%' ], selectedMode : 'multiple', itemStyle : { normal : { label : { show : true, fontSize : 5 }, labelLine : { show : true, length : 5 } } }, data : [ { value : counts[0], name : dataName[0] }, { value : counts[1], name : dataName[1] }, { value : counts[2], name : dataName[2] }, { value : counts[3], name : dataName[3] }, { value : counts[4], name : dataName[4] } ] } ] }; myChart.setOption(option); });}//获取数据function getPieChartData(action) { // action var counts = []; $.ajax({ cache: false, url : action, type : "get", async : false,// 同步 success : function(data) { $.each(data.rows, function(i) { counts[data.rows[i].status] = data.rows[i].count; }); }, error : function() { $.ligerDialog.error("ajax请求失败！" + action); } }); return counts;}function pieChartsInit(divId, action, titleText, seriesName, dataName) { require.config({ paths : { echarts : './pub/chart/ECharts/echarts' } }); require([ 'echarts', 'echarts/chart/pie' // 使用饼图就加载pie模块，按需加载 ], function(ec) { var myChart = ec.init(document.getElementById(divId)); var counts = getPieChartData(action); var option = { title : { text : titleText, subtext : '', x : 'left' }, tooltip : { }, legend : { orient : 'vertical', x : 'left', selectedMode : false, data : [ dataName[0], dataName[1], dataName[2], dataName[3], dataName[4] ] }, color : [ '#228B22', '#00008B', '#FFFF00', '#808080', '#FF0000' ], toolbox : { show : false, feature : { mark : { show : false }, dataView : { show : true, readOnly : false }, restore : { show : true }, saveAsImage : { show : true } } }, calculable : false, series : [ { name : seriesName, type : 'pie', radius : [ 0, '40%' ], center : [ '70%', '30%' ], selectedMode : 'multiple', itemStyle : { normal : { label : { show : true, fontSize : 5 }, labelLine : { show : true, length : 5 } } }, data : [ { value : counts[0], name : dataName[0] }, { value : counts[1], name : dataName[1] }, { value : counts[2], name : dataName[2] }, { value : counts[3], name : dataName[3] }, { value : counts[4], name : dataName[4] } ] } ] }; myChart.setOption(option); });}阅读全文
0 0
- Echarts简单使用
- ECharts的简单使用
- Echarts 表报 简单使用
- ECharts简单的使用
- ECharts简单使用
- echarts-简单使用
- echarts 简单使用
- ECharts的简单使用
- Echarts图表简单使用
- Echarts简单使用实例
- eCharts使用图表简单示例
- 使用echarts简单制作中国地图
- eCharts使用图表简单示例
- 百度Echarts图表简单使用
- ECharts的简单使用过程
- Echarts的使用1-简单饼图
- echarts的简单使用案例-柱形图
- 使用echarts简单制作省份地图
- Python
- SQL优化
- python关于PIL安装
- RenderTexture截屏原理
- 安装MySQL之后，在cmd中MySQL命令不能识别
- echarts-简单使用
- Instrumentation 实践详解
- 面向对象之共享单车项目
- 枚举类
- Spring4的学习-01天（基础知识回顾）
- MySQL的语句执行顺序
- delegate模式
- 微信小程序系列4（网络请求）
- 面向对象的六大原则
