echarts 3.0
Posted JLCUI
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts 3.0相关的知识，希望对你有一定的参考价值。
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <%@ include file="../common/header.jsp"%> <title>车辆统计</title> <link rel="stylesheet" href="../../css/jquery.fancybox.css" type="text/css" /> <style type="text/css"> html { overflow: auto; } .botton { padding: 5px 10px; background-color: #22ab39; border-radius: 5px; border: 0px; color: #fff; font-size: 14px; width: 120px; margin: 0px 10px 10px 0px; font-family: "Microsoft YaHei UI Light", "瀵邦喛钂嬮梿鍛寸拨"; } .botton:hover { background-color: #145d20; } </style> <body> <span style="color:#fff;">服务城市:</span> <select id="selectCity" name="selectCity" class="easyui-combobox" style="width: 100px;"> <option value="-1">全部</option> <option value="0">北京</option> </select> <input type="button" onclick="search();" value="查询" class="b_cx" /> <script src="../../js/echarts.js"></script> <div id="main" style="height: 400px;width:100%;"></div> <script type="text/javascript"> $(function() { $("#main").height($(window).height()-80); SetChart(); }); function SetChart() { var myChart = echarts.init(document.getElementById(‘main‘)); // Generate data var category = []; var dottedBase = +new Date(); var lineData = []; var barData = []; var result = []; var result1 = []; var result2 = []; for (var i = 0; i < 20; i++) { var date = new Date(dottedBase += 3600 * 24 * 1000); category.push([ date.getFullYear(), date.getMonth() + 1, date.getDate() ].join(‘-‘)); var b = Math.random() * 200; var d = Math.random() * 200; barData.push(b) lineData.push(d + b); } $.ajax({ type : "POST", data:{ createStartTime:‘‘, createEndTime:‘‘ }, url : "<%=request.getContextPath()%>/vehicleDataController/vehicleModleData", dataType : "json", async: false,//同步 success : function(msg) { var data = msg.data; var data1 = msg.data1; var data2 = msg.data2; if(data){ for(var i = 0;i<data.length;i++){ var veh = data[i]; result.push({ value:veh.status, name:veh.carname }); } } if(data1){ for(var i = 0;i<data1.length;i++){ var veh = data1[i]; result1.push({ value:veh.status, name:veh.carname }); } } if(data2){ for(var i = 0;i<data2.length;i++){ var veh = data2[i]; result2.push({ value:veh.status, name:veh.carname }); } } } }); option = { backgroundColor : ‘#ece6e6‘, title : { text: ‘‘, subtext: ‘‘, x:‘center‘ }, tooltip : { trigger: ‘item‘, formatter: "{a} {b} :{d}%", textStyle: { fontSize:14 } }, legend: { orient: ‘vertical‘, left: ‘left‘, data: [] }, toolbox: { show: true, orient: ‘vertical‘, left: ‘right‘, top: ‘center‘, feature: { dataView: {readOnly: false}, restore: {}, saveAsImage: {} } }, grid: [ {x: ‘7.5%‘,y: ‘65%‘, width: ‘88%‘, height: ‘30%‘}, ], xAxis: [ {gridIndex: 0, type: ‘category‘, axisTick: { alignWithLabel: true }, data: []}, ], yAxis: [ {gridIndex: 0,name:‘年级‘,show:false }, ], series : [ { name: ‘车型‘, type: ‘pie‘, radius : ‘40%‘, center: [‘15%‘, ‘40%‘], data:result, label: { normal: { position: ‘inner‘, formatter: ‘{c}辆‘, textStyle: { color: ‘#ffffff‘, fontSize: 14 } } }, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: ‘rgba(0, 0, 0)‘ } } }, { name: ‘租用状态‘, type: ‘pie‘, radius : ‘40%‘, center: [‘45%‘, ‘40%‘], data:result1, label: { normal: { position: ‘inner‘, formatter: ‘{c}辆‘, offset: [,100], textStyle: { color: ‘#ffffff‘, fontSize: 14 } } }, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: ‘rgba(0, 0, 0)‘ } } }, { name: ‘车辆状态‘, type: ‘pie‘, radius : ‘40%‘, center: [‘75%‘, ‘40%‘], data:result2, label: { normal: { position: ‘inner‘, formatter: ‘{c}辆‘, textStyle: { color: ‘#ffffff‘, fontSize: 14 } } }, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: ‘rgba(0, 0, 0)‘ } } } ] }; myChart.setOption(option); } //查询按钮事件 function search() { $.ajax({ type : "POST", data:{ createStartTime:‘‘, createEndTime:‘‘ }, url : "<%=request.getContextPath()%>/vehicleDataController/vehicleModleData", dataType : "json", async: false,//同步 success : function(msg) { var data = msg.data; var data1 = msg.data1; var data2 = msg.data2; if(data){//车型 车辆总数 for(var i = 0;i<data.length;i++){ var veh = data[i]; result.push({ value:veh.status, name:veh.carname }); } } if(data1){//已租未租 车辆总数 for(var i = 0;i<data1.length;i++){ var veh = data1[i]; result1.push({ value:veh.status, name:veh.carname }); } } if(data2){//车辆状态 车辆总数 for(var i = 0;i<data2.length;i++){ var veh = data2[i]; result2.push({ value:veh.status, name:veh.carname }); } } } }); } </script> <div class="main_search"> <div id="dateDiv" style="width: 100%; margin: 0px auto;"></div> <div> <table id="dg" style="width: 100%;"></table> </div> </div> </body>
以上是关于echarts 3.0的主要内容，如果未能解决你的问题，请参考以下文章