echarts各种用法大全

在echarts中自定义提示框内容 https://blog.csdn.net/qq_25646191/article/details/78874289 option = { title : { text: '某地区蒸发量和降水量', subtext: '纯属虚构' }, /** * tooltip配置项示例 */ /** * tooltip配置项示例 */ //用formatter回调函数显示多项数据内容 tooltip: { trigger: 'axis', formatter: function (params, ticket, callback) { var htmlStr = ''; for(var i=0;i<params.length;i++){ var param = params[i]; var xName = param.name;//x轴的名称 var seriesName = param.seriesName;//图例名称 var value = param.value;//y轴值 var color = param.color;//图例颜色 if(i===0){ htmlStr += xName + '<br/>';//x轴的名称 } htmlStr +='<div>'; //为了保证和原来的效果一样，这里自己实现了一个点的效果 htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>'; //圆点后面显示的文本 htmlStr += seriesName + '：' + value + '笔'; htmlStr += '</div>'; } return htmlStr; } } , legend: { data:['蒸发量','降水量'] }, xAxis : [ { type : 'category', data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] } ], yAxis : [ { type : 'value' } ], series : [ { name:'蒸发量', type:'bar', data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], }, { name:'降水量', fontSize:48, type:'bar', data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3], } ] }; 异步请求echarts查询 https://blog.csdn.net/u010452388/article/details/81877663 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ECharts入门</title> </head> <body>  <script src='../js/echarts.js'></script> <script src="../js/jquery-1.8.3.min.js"></script> <script> //将集合中的数据保留两位小数 function dataToFixed(data) { var seriesData = []; for (var i = 0; i < data.seriesSaleList.length; i++) { //将销量保留两位小数 var temp = data.seriesSaleList[i].toFixed(2); seriesData.push(temp); } return seriesData; } //生成图标的方法 function generateChart(data) { //基于准备好的DOM，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); //指定图表的配置项和数据 myChart.clear(); var option = { title: { text: '销售额曲线图' }, //提示框组件 tooltip: { //坐标轴触发，主要用于柱状图，折线图等 trigger: 'axis' }, //数据全部显示 axisLabel: { interval: 0 }, //图例 legend: { data: ['销售额'] }, //横轴 xAxis: { data: data.xAxisList }, //纵轴 yAxis: {}, //系列列表。每个系列通过type决定自己的图表类型 series: [ { name: '销售额', //折线图 type: 'line', data: dataToFixed(data)//处理小数点数据 } ] }; //使用刚指定的配置项和数据显示图表 myChart.setOption(option); } //buttion调用的方法 function getData() { var start = $('#start').val(); var end = $('#end').val(); //异步请求 $.post( "../ordersale/guFindEchartsData.do",//访问地址 {start: start, end: end},//携带的参数 function (data) { generateChart(data); }, "json" ); } </script> <div align="center"> <label for="start">开始日期：</label><input id="start" type="date" value="2018-08-13"/> <label for="end">结束日期：</label><input id="end" type="date" value="2018-08-16"/> <button onclick="getData()">查询</button> </div> <hr>  <div id='main' style='width: 90%;height:400px;' align="center"></div> </body> </html> echarts data:function写法 https://blog.csdn.net/qq_15545909/article/details/81664514 ----------------------------------------bar----------------------------- function barcount() { var myChart = echarts.init(document.getElementById('jdxgswztj')); myChart.setOption({ title : { text : '?????????', x:'center', textStyle : { fontSize : '28' } }, tooltip : {textStyle : { fontSize : '20' }}, legend : { data : [ /* '```' */ ] }, xAxis : { data : [], axisLabel:{ textStyle:{ fontSize:20 }} }, yAxis : [{ axisLabel : { formatter: '{value}', textStyle: { fontSize:20 } } }], series : [ { name : '',/*```` */ type : 'bar', data : [], textStyle : { fontSize : '38' } }], color : [ "#1397DC", "#12C1EC", "#6FE498", "#E2E2E2", "#3CB2EF", "#71F6F9", "#3EE486", "#FFF065" ] }); myChart.showLoading(); var names = []; //???????????X????? var nums = []; //???????????Y???? $.ajax({ type : "post", async : true, url : "jdxgswz/jdxtzGsWzCount", data : {}, dataType : "json", success : function(result) { if (result) { for (var i = 0; i < result.length; i++) { names.push(result[i].xlmc); //????????????? } for (var i = 0; i < result.length; i++) { nums.push(result[i].shuliang); //????????????? } myChart.hideLoading(); //?????? myChart.setOption({ //?????? xAxis : { data : names }, series : [ { // ???????????? name : '',/*````*/ data : nums, barWidth: '30%', }] }); } }, error : function(errorMsg) { //?????????? alert("????????!"); myChart.hideLoading(); } }); } ----------------legend显示位置设置------------------------------------- https://blog.csdn.net/david_jiahuan/article/details/80096922

echarts各种用法大全

猜你喜欢