首页 > 代码库 > echarts简单使用案例
echarts简单使用案例
先上效果图:
1.引入js
<script src="http://www.mamicode.com//js/echarts/build/dist/echarts.js"></script>
网盘下载: https://yunpan.cn/cMCdXqfIJWRLq 访问密码 4880
2.echarts 前台显示需要一个div容器,并设置高度.
3.配置echarts的路径,和所需模块(可以只加载你需要的)
4.根据数据,显示成不同的图形:柱状图,饼状图,折线图,地图...
echarts的文件结构:
Ajax获取后台数据
1 //根据产业名称获取图表数据 2 function getData(idx,cymcName,names){ 3 if(cymcName==null||cymcName=="") return; 4 //var jsonObj = {};//注意是{} 5 $.ajax({ 6 type : "POST", // 提交的方式 7 url : "/fysy/fysy/fysqyjyfxtwo/FysQyjyfxTwo.do?method=queryDataByCymc&cymcName=" + cymcName+"&rand="+Math.random(), // 提交的action地址 8 success : function(msg) { 9 var jsonObj = eval("(" + msg + ")");10 var fxdxList = jsonObj["fxdxList"]; //分析对象列表11 var srList = jsonObj["srList"]; //收入列表12 var lrList = jsonObj["lrList"]; //毛利列表13 var sdate = jsonObj["sdate"]; //日期14 15 var srCurrYearList = jsonObj["srCurrYearList"]; //收入列表16 var lrCurrYearList = jsonObj["lrCurrYearList"]; //毛利列表17 18 19 var sdateLastYear = (sdate.substring(0,4)-1)+"年"+sdate.substring(4)+"月";20 sdate = sdate.substring(0,4)+"年"+sdate.substring(4)+"月";21 showEcharts(idx,fxdxList,srList,lrList,sdateLastYear,srCurrYearList,lrCurrYearList,sdate,names);22 },23 error : function() {24 }25 });26 27 }28 29 //通過獲取的數據，顯示echarts圖30 function showEcharts(tabDivIndex,fxdxList,srList,lrList,sdateLastYear,srCurrYearList,lrCurrYearList,sdate,names){
配置echarts,根据数据显示成不同的图
1 var myChart1 = null; 2 var myChart2 = null; 3 require.config({ 4 paths: { 5 ‘echarts‘: ‘/fysy/js/echarts/build/dist‘ 6 } 7 }); 8 require([ 9 ‘echarts‘, 10 ‘echarts/chart/bar‘, 11 ‘echarts/chart/line‘, 12 ‘echarts/chart/gauge‘ 13 ], function (ec) { 14 //1.--- 柱状图,各个产业收入分析 --- 15 var oDiv1 = "cyfxechart"+tabDivIndex+"1"; 16 myChart1 = ec.init(document.getElementById(oDiv1)); 17 var legendArr1 = new Array(); 18 legendArr1.push(sdateLastYear); 19 legendArr1.push(sdate); 20 21 option1 = { 22 title : { 23 text: names[tabDivIndex]+"收入分析", 24 x:"center", 25 y:"top", 26 textStyle:{ 27 fontWeight:‘bolder‘ 28 } 29 }, 30 tooltip : { 31 trigger: ‘axis‘, 32 formatter:function(params){ 33 return customFormatter(params); 34 }, 35 position:function(p){ 36 return [p[0]-100,p[1]-400];//向左100,向上400 37 } 38 }, 39 legend: { 40 data: legendArr1, 41 x:"left", 42 orient:‘vertical‘ //纵向布局 43 }, 44 toolbox: { 45 show : true, 46 feature : { 47 mark : {show: true}, 48 dataView : { 49 show : true, 50 title : ‘数据视图‘, 51 readOnly: true, 52 lang: [‘数据视图‘, ‘关闭‘, ‘刷新‘] 53 }, 54 magicType : {show: true, type: [‘line‘,‘bar‘]}, 55 restore : {show: true}, 56 saveAsImage : { 57 show: true, 58 title : ‘保存为图片‘, 59 type : ‘png‘, 60 lang : [‘点击保存‘] 61 } 62 } 63 }, 64 calculable : true, 65 xAxis : [{ 66 type : ‘category‘, 67 data : fxdxList //["a","b","c","d"] 68 }], 69 yAxis : [{ 70 type : ‘value‘, 71 axisLabel : { 72 formatter: ‘{value}‘ 73 } 74 }], 75 series : [{ 76 ‘name‘:sdateLastYear, 77 ‘type‘:‘bar‘, 78 ‘barWidth‘: 60, 79 "data":srList, 80 ‘itemStyle‘: { // 系列级个性化样式 81 normal: { 82 color:colorList[0], 83 label : { 84 show : true, 85 position : ‘top‘, 86 formatter : "{c}", 87 textStyle : { 88 color: ‘blue‘ 89 } 90 } 91 } 92 } 93 }, 94 { 95 ‘name‘:sdate, 96 ‘type‘:‘bar‘, 97 ‘barWidth‘: 60, 98 "data":srCurrYearList, 99 ‘itemStyle‘: { // 系列级个性化样式100 normal: {101 color:colorList[1], 102 label : {103 show : true,104 position : ‘top‘,105 formatter : "{c}",106 textStyle : {107 color: ‘blue‘108 }109 }110 }111 }112 }113 ]114 };115 myChart1.setOption(option1,true);116 117 //2.--- 柱状图,各个产业毛利分析 ---118 var oDiv2 = "cyfxechart"+tabDivIndex+"2";119 myChart2 = ec.init(document.getElementById(oDiv2));120 var legendArr2 = new Array();121 legendArr2.push(sdateLastYear);122 legendArr2.push(sdate);123 option2 = {124 title : {125 text: names[tabDivIndex]+"毛利分析",126 x:"center",127 y:"top",128 textStyle:{129 fontWeight:‘bolder‘130 }131 }, 132 tooltip : {133 trigger: ‘axis‘,134 formatter:function(params){135 return customFormatter(params);136 },137 position:function(p){138 return [p[0]-100,p[1]-400];//向左100,向上400139 }140 },141 legend: {142 data: legendArr2,143 x:"left",144 orient:‘vertical‘ //纵向布局145 }, 146 toolbox: {147 show : true,148 feature : {149 mark : {show: true},150 dataView : {151 show : true,152 title : ‘数据视图‘,153 readOnly: true,154 lang: [‘数据视图‘, ‘关闭‘, ‘刷新‘]155 },156 magicType : {show: true, type: [‘line‘,‘bar‘]},157 restore : {show: true},158 saveAsImage : {159 show: true,160 title : ‘保存为图片‘,161 type : ‘png‘,162 lang : [‘点击保存‘]163 }164 }165 },166 calculable : true,167 xAxis : [{168 type : ‘category‘,169 data : fxdxList //["a","b","c","d"]170 }],171 yAxis : [{172 type : ‘value‘,173 axisLabel : {174 formatter: ‘{value}‘175 }176 }],177 series : [{178 ‘name‘:sdateLastYear, 179 ‘type‘:‘bar‘,180 ‘barWidth‘: 60,181 "data":lrList, 182 ‘itemStyle‘: { // 系列级个性化样式183 normal: {184 color: colorList[0], 185 label : {186 show : true,187 position : ‘top‘,188 formatter : "{c}",189 textStyle : {190 color: ‘blue‘191 }192 }193 }194 }195 },196 {197 ‘name‘:sdate, 198 ‘type‘:‘bar‘,199 ‘barWidth‘: 60,200 "data":lrCurrYearList, 201 ‘itemStyle‘: { // 系列级个性化样式202 normal: {203 color: colorList[1], 204 label : {205 show : true,206 position : ‘top‘,207 formatter : "{c}",208 textStyle : {209 color: ‘blue‘210 }211 }212 }213 }214 }215 ]216 };217 myChart2.setOption(option2,true);218 219 //点击事件220 var ecConfig = require(‘echarts/config‘);221 function eConsole(param) {222 openReport(names[tabDivIndex],param.name,param.seriesName,option1.title.text);223 }224 225 myChart1.on(ecConfig.EVENT.CLICK, eConsole);226 myChart2.on(ecConfig.EVENT.CLICK, function(param){227 openReport(names[tabDivIndex],param.name,param.seriesName,"ml");//调用自定义函数,显示报表228 });229 230 231 });232
其他:
一些颜色,无关紧要
1 var colorList=[‘#4488BB‘,‘#228B22‘,‘#FF4500‘,‘#F827F8‘,‘#1040CA‘,2 ‘#C1232B‘,‘#B5C334‘,‘#FCCE10‘,‘#E87C25‘,‘#27727B‘,3 ‘#FE8463‘,‘#9BCA63‘,‘#FAD860‘,‘#F3A43B‘,‘#60C0DD‘,4 ‘#D7504B‘,‘#C6E579‘,‘#F4E001‘,‘#F0805A‘,‘#26C0C0‘];
//方法一：正则转换为千位符格式 (ysjdjds || 0).toString().replace(/(d)(?=(?:d{3})+$)/g, ‘$1,‘); //方法二：千位符转换方法 function toThousands(num) { var num = (num || 0).toString(), result = ‘‘; while (num.length > 3) { result = ‘,‘ + num.slice(-3) + result; num= num.slice(0,num.length - 3); } if (num) { result = num + result; } return result; }
echarts简单使用案例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。