echart 笔记
来源：互联网 发布：陕西省大数据集团 录取 编辑：程序博客网 时间：2024/05/29 15:52
function(data){ var that=this; var axisX=[],data1=[],data2=[],data3=[]; data.forEach(function(value,index){ axisX.push(value.month); data1.push(value.active); data2.push(value.avgDau); data3.push(value.avgDauVsMau); }); //求最左侧的Y轴范围 var maxActive = 0; var maxAvgDau = 0; if(data1.length > 0){ maxActive = Math.max.apply(null,data1); } if(data2.length > 0){ maxAvgDau = Math.max.apply(null,data2); } var maxY = maxActive > maxAvgDau ? maxActive : maxAvgDau; if(maxY == 0){ maxY = 100; } var a = Math.ceil(maxY/(Math.pow(10,((maxY+'').length-1)))); var scaleNum = Math.ceil(a*(Math.pow(10,((maxY+'').length-1)))/5); var axisY = [0,scaleNum*1,scaleNum*2,scaleNum*3,scaleNum*4,scaleNum*5]; //求最右侧的Y轴范围 var maxY2 = 100,minY2=0; if(data3.length>0){ maxY2 = Math.max.apply(null,data3); minY2 = Math.min.apply(null,data3); } var axisY2 = calculateY2(maxY2,minY2,1); //获取Y轴最大最小值 axisY = [Math.min.apply(null,axisY),Math.max.apply(null,axisY)]; //axisY2 = [Math.min.apply(null,axisY2),Math.max.apply(null,axisY2)] var Y2_max = Math.max.apply(null,axisY2); var Y2_min = Math.min.apply(null,axisY2); if(Y2_max >= 200){ Y2_max = 200; } if(Y2_min <= -200){ Y2_min = -200; } axisY2 = [Y2_min,Y2_max]; var chart = createComplexChart('.month-chart1', { axisX:axisX , enableCross: true, axisY: axisY, data: [data1,data2], axisY2: axisY2, data2: [data3] }); function createComplexChart(container, options){ var option = { title: { left:'center' , top:'0px', textStyle: { color: '#666', fontWeight: 'normal' } }, grid: [ {x: '60',x2: '60', y: '7%', height: '80%'}, ], tooltip: { trigger: 'axis', backgroundColor:'rgba(255,255,255,1)', borderColor:'#eee', borderWidth:1, textStyle:{ color:'#aaa' }, formatter:function(params){ var relVal = ''; for (var i = 0, l = params.length; i < l; i++) { if(i <=1){ relVal += ' <span class="tooltip-class" style="background-color:'+params[i].color+'"></span>' + '<span style="font-size:12px;color:'+params[i].color+'"> '+params[i].seriesName+':<span class="number-class">'+(params[i].value == undefined ? "" :params[i].value)+'</span></span><br/>'; }else{ relVal += ' <span class="tooltip-class" style="background-color:'+params[i].color+'"></span>' + '<span style="font-size:12px;color:'+params[i].color+'"> '+params[i].seriesName+':<span class="number-class">'+(params[i].value == undefined ? "" :params[i].value +'%')+'</span></span><br/>'; } } return relVal; }, }, legend: { // data:['降水量','折线','折线2'], x: 'center', y: 'bottom', itemWidth:36, itemHeight:6, itemGap:30, //orient:'horizontal', data:[ { name:'MAU', textStyle:{ fontSize:12, color:'#aaa' }, icon:'stack' }, { name:'日均DAU', textStyle:{ fontSize:12, color:'#aaa' }, icon:'stack' }, { name:'DAU/MAU', textStyle:{ fontSize:12, color:'#aaa', }, icon:'stack' } ] }, xAxis: [ { type: 'category', axisTick:{ show:false }, axisLabel: { textStyle: { color: '#aaa', } }, axisLine:{ lineStyle:{ color:'#aaa', } }, data: options.axisX } ], yAxis: [ { type: 'value', axisTick:{ show:false }, axisLine:{ show:false }, nameLocation : 'middle', min: options.axisY[0], max: options.axisY[1], interval: (options.axisY[1]-options.axisY[0])/5, axisLabel: { formatter: '{value} ', textStyle: { color: '#aaa', } }, }, { type: 'value', axisTick:{ show:false }, axisLine:{ show:false }, nameLocation : 'middle', min: options.axisY2[0], max: options.axisY2[1], interval: (options.axisY2[1]-options.axisY2[0])/5, axisLabel: { formatter: '{value} %', textStyle: { color: '#aaa', } } } ], series: [ { name:'MAU', type:'bar', barMaxWidth:window.barMaxWidth, yAxis: 1, itemStyle: { normal: { color: '#7DAAE2', } }, label:{ normal:{ show: true, position: 'top', textStyle:{ fontSize:12, color:'#666', }, formatter:function(c){ return c.value==0?'':c.value; } } }, data:options.data[0], barGap :0 }, { name:'日均DAU', type:'bar', barMaxWidth:window.barMaxWidth, yAxis: 1, itemStyle : { /*设置折线颜色*/ normal : { color:'#6EE0DC' } }, label:{ normal:{ show: true, position: 'top', textStyle:{ fontSize:12, color:'#666', }, formatter:function(c){ return c.value==0?'':c.value; } } }, data:options.data[1], barGap :0 }, { name:'DAU/MAU', type:'line', yAxisIndex: 1, symbol:'emptyCircle', symbolSize : 10, itemStyle : { /*设置折线颜色*/ normal : { color:'#F8967E', borderWidth:2, borderColor:'#F8967E', } }, label:{ normal:{ show: true, position: 'top', textStyle:{ fontSize:12, color:'#666', }, formatter: '{c}%' } }, data:options.data2[0] } ] }; // 基于准备好的dom，初始化echarts实例 var analyticChart = echarts.init($(container).get(0)); analyticChart.setOption(option); } },阅读全文
0 0
- echart 笔记
- Echart小小笔记
- echart
- Echart
- echart
- EChart
- Echart
- Echart
- EChart
- EChart报表插件使用笔记（1）
- 代码笔记 | Echart显示或导出图片
- Echart图的配置项设置笔记
- echart报表插件使用笔记（二）--按月统计
- Echart常见使用问题总结（个人笔记）
- echart初探
- EChart初始化
- echart 地图
- echart-X
- 工作总结第七天（先转载部分AJAX内容）
- spring mvc 07 火推
- ASP.NET中EnableViewState
- FluentData官方文档翻译
- samba服务器
- echart 笔记
- 马云：未来30年，计算会是生产力，数据将成为生产资料
- USB摄像头预览识别二维码
- Java 跨工程调用
- 686. Repeated String Match
- python 中文注释 报错 SyntaxError: Non-ASCII character '\xe5'
- zDialog设置宽高
- 使用lua配置C++程序
- [USACO1.1]Friday the Thirteenth
