Echarts示例总结
来源：互联网 发布：java开源社区聚类 编辑：程序博客网 时间：2024/05/18 08:24
Echarts示例总结
前言
对于echarts，很多人对它的“优美效果”给出很高的赞赏。我们做网站/应用的时候，很多需要数据统计报表，现在给大家推荐一个百度的报表控件，效果不错，兼容ie8+以上等主流浏览器。
另外，有幸得到一位伯乐的提醒，本人将文章的内容进行了更新。
准备开发环境
1、下载好echarts开发包并加入到工程目录下。
下载地址：http://echarts.baidu.com/echarts2/doc/example.html
2、引入echarts的js ，如：
<body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="height:400px"></div> <!-- ECharts单文件引入 --> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script></body>
3、配置echarts显示
<script type="text/javascript">require.config({paths: {echarts: '${ctx}/tiles/echarts'}}); require(['echarts','echarts/chart/pie','echarts/chart/scatter','echarts/chart/bar','echarts/chart/line'],function (ec){//绘制统计图drawQyfr(ec);drawFqyfr(ec);drawZczjfb(ec); //..............});</script>4、配置echarts参数（结合示例）
示例
介绍：由于统计的数据量达到百万级，直接访问是不可行的，中间我们已经采举方案（通过sql统计生成json放入中间表，由于统计过程很麻烦且数据量大、耗时，数据需要提前准备好，如：定时统计前一天晚上最新的数据生成最新的json）将数据达到及时访问，提高用户体验。所以其中的数据是在后台就已经生成好了，在配置项目中只负责显示。读者是看不到配置的具体值，但熟悉并用过echarts的读者应该能懂是怎么回事。
● 示例一、柱状图（在“标准柱状图”基础上修改提高美观度）：
配置参数：
function drawbzf(ec) {var temp;$.ajax({ type: "GET", url: "${ctx}/dp/piequery?info.sqlcode=20160512145927238", data: {}, async : false, success: function(data){ temp = eval('('+data+')'); } }); // 基于准备好的dom，初始化echarts实例var myChart = ec.init(document.getElementById("bzf"));// 指定图表的配置项和数据var option = {//显示提示框组件tooltip : {},//绘图网格配置grid : { // 控制图的大小，调整下面这些值就可以，y : 25,x : 90,x2 : 60,y2 : 85,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上//去除边框线borderWidth : 0},//x轴相关设置xAxis : [ {//设置为类目轴type : 'category',//类目在分割线上boundaryGap : false,//类目轴名称data : ['',temp[0].name,temp[1].name,temp[2].name,temp[3].name,temp[4].name,temp[5].name,temp[6].name ,temp[7].name,temp[8].name,temp[9].name,temp[10].name,temp[11].name,temp[12].name, temp[13].name,temp[14].name,temp[15].name,temp[16].name,temp[17].name,'' ], //坐标轴刻度标签的相关设置 axisLabel : {formatter:function(val){ return val.split("").join("\n"); }, textStyle:{ color: '#B6A2DE', }, interval:0, //rotate:45, margin:2,//刻度样式textStyle : {//文字透明color : 'rgba(255,255,255,0.5)',},//坐标轴名称与轴线之间的距离nameGap : 25,},//轴线axisLine : {//轴线样式lineStyle : {//设置轴线宽度width : 1,//轴线颜色color : 'rgba(1,134,198,0.8)'},},//分割线splitLine : {//分割线样式lineStyle : {//分割线透明度color : ['rgba(255,255,255,0)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)', 'rgba(255,255,255,0.3)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)', 'rgba(255,255,255,0.3)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)', 'rgba(255,255,255,0.3)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)', 'rgba(255,255,255,0.3)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)', 'rgba(255,255,255,0.3)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)', 'rgba(255,255,255,0.3)','rgba(255,255,255,0.3)']}},//刻度线设置axisTick : {//隐藏刻度线show : false,}} ],//y轴相关设置yAxis : [ {//设置为数值轴type : 'value',//坐标轴刻度标签的相关设置 axisLabel : {//刻度样式textStyle : {//文字透明color : 'rgba(255,255,255,0.5)'},//刻度格式formatter : "{value}"+"套"},//轴线axisLine : {//轴线样式lineStyle : {//设置轴线宽度width : 1,//轴线颜色color : 'rgba(1,134,198,0.8)'}},//分割线splitLine : {//分割线样式lineStyle : {//分割线透明度color : ['rgba(255,255,255,0)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)', 'rgba(255,255,255,0.3)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)' ,'rgba(255,255,255,0)']}}} ],//系列列表配置series : [ {//柱状图type : 'bar',//修改柱状图宽度barWidth : 35,//系列名称name : '保障房数量',boundaryGap : false,//系列中的数据内容数组data : [ 0, temp[0].value, temp[1].value, temp[2].value, temp[3].value,temp[4].value,temp[5].value, temp[6].value,temp[7].value,temp[8].value,temp[9].value,temp[10].value,temp[11].value, temp[12].value,temp[13].value,temp[14].value,temp[15].value,temp[16].value,temp[17].value,0 ], //系列样式itemStyle : {normal : {//柱状图颜色color : function(params) {// 颜色列表var colorList = [ 'rgba(0,0,0,0)','rgb(194,35,43)', 'rgb(182,196,53)','rgb(253,206,15)', 'rgb(233,125,38)','rgb(39,115,124)', 'rgb(255,131,99)','rgb(251,218,97)', 'rgb(95,192,221)','rgb(226,80,75)', 'rgb(213, 75, 68)','rgb(285, 121, 29)','rgb(201, 118, 232)','rgb(95, 165, 85)','rgb(253, 110, 56)','rgb(216, 50, 65)','rgb(233, 125, 38)','rgb(39, 110, 114)','rgb(233, 105, 8)'];//返回颜色return colorList[params.dataIndex];},//柱状图圆角barBorderRadius : 3}},} ]};//使用刚指定的配置项和数据显示图表。myChart.setOption(option);}效果：
● 示例二、折线图
配置参数：
function drawrffl(ec){ //使用SQLCode获取数据var temp;$.ajax({ type: "GET", url: "${ctx}/dp/piequery?info.sqlcode=20160512160333028", data: {}, async : false, success: function(data){ data = eval('('+data+')');temp = data; } });var myChart = ec.init(document.getElementById('rffl'));var option = {title : { x:'left' },tooltip : { trigger: 'axis' }, //绘图网格配置grid : { // 控制图的大小，调整下面这些值就可以，y : 25,x : 90,x2 : 60,y2 : 60,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上//去除边框线borderWidth : 0,}, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : ['',temp[1].name,temp[2].name,temp[3].name,temp[4].name,temp[5].name,temp[6].name,temp[7].name,temp[8].name], //坐标轴刻度标签的相关设置 axisLabel : {//刻度样式textStyle : {//文字透明color : 'rgba(255,255,255,0.5)',},//坐标轴名称与轴线之间的距离nameGap : 25},//轴线axisLine : {//轴线样式lineStyle : {//设置轴线宽度width : 1,//轴线颜色color : 'rgba(1,134,198,0.8)'}}, //分割线splitLine : {//分割线样式lineStyle : {//分割线透明度color : ['rgba(255,255,255,0)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)', 'rgba(255,255,255,0.3)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)', 'rgba(255,255,255,0.3)','rgba(255,255,255,0.3)','rgba(255,255,255,0.3)', 'rgba(255,255,255,0)']}},//刻度线设置axisTick : {//隐藏刻度线show : false,} } ], //y轴相关设置 yAxis : [ { type : 'value', axisLabel : { //刻度样式 textStyle : { //文字透明 color : 'rgba(255,255,255,0.5)' }, formatter: '{value}' }, min:0, max:110000 } ], series : [{//name:"企业法人登记",type:'line',//smooth:true,data:[temp[0].value,temp[1].value,temp[2].value,temp[3].value,temp[4].value,temp[5].value,temp[6].value,temp[7].value,temp[8].value],itemStyle: {normal: {//填充区域areaStyle : {//默认填充type : 'default',//填充颜色color : 'rgba(251,217,97,0.4)'},//线条颜色color : 'rgba(2, 208, 192,0.8)'}},markPoint : { data : [ {type : 'min', name: '最小值'}, {type : 'max', name: '最大值'} ] }} ]};myChart.setOption(option);}效果：
● 示例三、堆积条形图
配置参数：
function drawnljg(ec){var nannljg;var nvnljg;$.post("${ctx}/dp/queryjson?info.sqlcode=20160420145043438",{ Action: "post"},function(data, textStatus){data = eval('('+data+')');nannljg=data[1];$.post("${ctx}/dp/queryjson?info.sqlcode=20160420150431432",{ Action: "post"},function(data, textStatus){data = eval('('+data+')');nvnljg=data[1];var myChart = ec.init(document.getElementById("nljg"));var option = { tooltip : { }, legend: { data:['男', '女'], show:false }, toolbox: { feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'value', splitNumber: 100000 , show:false, } ], yAxis : [ { type : 'category', data : ['20岁以下','21~30岁','31~40岁','41~50岁','51~60岁','61岁以上'] ,axisLabel : { textStyle : { color : '#717E88' } }} ], grid: { // 控制图的大小，调整下面这些值就可以， x: 80, y:30, x2: 10, y2: 10,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上 }, series : [ { name:'男', type:'bar', stack: '总量', itemStyle : { normal: {color: "#FF8363"}}, data:nannljg }, { name:'女', type:'bar', stack: '总量', itemStyle : { normal: { color:"#0086CB", label : {show: true, position: 'right', textStyle: { color: '#717E88' }, formatter: function (params){ for (var i = 0, l = option.yAxis[0].data.length; i < l; i++) { return ((option.series[0].data[i] + params.value)/10000).toFixed(1)+'万'; } } }}}, data:nvnljg } ]}; myChart.setOption(option);});});}效果：
● 示例四、环形图
配置参数：
function drawZcdybgcytj(ec){ //使用SQLCode获取数据var temp;$.ajax({ type: "GET", url: "${ctx}/dp/piequery?info.sqlcode=20160517104737830",//20160421133808633 data: {}, async : false, success: function(data){ data = eval('('+data+')');temp = data; } });var myChart = ec.init(document.getElementById('frlxtjt'));option = { tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient : 'vertical', x : 'right', textStyle : {//文字透明color : 'rgba(255,255,255,0.5)',}, data:[temp[0].name,temp[1].name,temp[2].name,temp[3].name,temp[4].name] }, calculable : true, series : [ { name:'法人类型', type:'pie', radius : ['55%', '75%'], center : ['50%', '44%'], itemStyle : { normal : { label : { show : false }, labelLine : { show : false } }, emphasis : { label : { show : false, position : 'center', textStyle : { fontSize : '30', fontWeight : 'bold' } } } }, data:[ {value:temp[0].value, name:temp[0].name}, {value:temp[1].value, name:temp[1].name}, {value:temp[2].value, name:temp[2].name}, {value:temp[3].value, name:temp[3].name}, {value:temp[4].value, name:temp[4].name} ] } ]};myChart.setOption(option);}效果：
● 示例五、柱状+折线
配置参数：
//分街道 -人房分离差异情况柱状图 function drawRfflqk(ec) {var temp;$.ajax({type : "GET",url : "${ctx}/dp/piequery?info.sqlcode=20160519192023986",data : {},async : false,success : function(data) {temp = eval('(' + data + ')');}});var myChart = ec.init(document.getElementById("rfflqk"));option = {title : {text : '人房分离差异情况统计图'},tooltip : {trigger : 'axis'},legend : {x : 'center',y : 'bottom',data : [ '最近10年人房分离差异柱状图', '最近10年人房分离差异折线图' ]},calculable : true,xAxis : [ {type : 'category',data : [ temp[0].name, temp[1].name, temp[2].name, temp[3].name, temp[4].name, temp[5].name, temp[6].name, temp[7].name]} ],grid : { // 控制图的大小，调整下面这些值就可以，x : 100,x2 : 100,y2 : 90,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上},yAxis : [ {type : 'value',axisLabel : {formatter : '{value} 户'}} ],series : [{name : '最近10年人房分离差异柱状图',type : 'bar',data : [ temp[0].value, temp[1].value, temp[2].value, temp[3].value, temp[4].value, temp[5].value, temp[6].value, temp[7].value],markPoint : {data : [ {type : 'max',name : '最大值'}, {type : 'min',name : '最小值'} ]},itemStyle : {normal : {color : "#08BA70"}}},{name : "最近10年人房分离差异折线图",type : 'line',smooth : 'true',data : [ temp[0].value, temp[1].value, temp[2].value, temp[3].value, temp[4].value, temp[5].value, temp[6].value, temp[7].value ],markPoint : {data : [ {type : 'max',name : '最大值'}, {type : 'min',name : '最小值'} ]}} ]};myChart.setOption(option);}
● 示例六、折线走势
配置参数：
function drawFrdjtj(ec){//使用SQLCode获取数据var cldjYear;var cldjValue;$.ajax({ type: "GET", url: "${ctx}/dp/queryjson?info.sqlcode=20160519172806993",//成立 20160519172806993 old:20160420112618683 data: {}, async : false, success: function(data){ data = eval('('+data+')');cldjYear = data[0];cldjValue = data[1]; } });var bgdjValue;$.ajax({ type: "GET", url: "${ctx}/dp/queryjson?info.sqlcode=20160519172831038",//变更 data: {}, async : false, success: function(data){ data = eval('('+data+')'); bgdjValue = data[1]; } });var zxdjValue;$.ajax({ type: "GET", url: "${ctx}/dp/queryjson?info.sqlcode=20160519172846889",//注销 data: {}, async : false, success: function(data){ data = eval('('+data+')'); zxdjValue = data[1]; } });var myChart = ec.init(document.getElementById('frdjtj'));var option = {title : { text: '法人登记走势图 ', x:'left' },tooltip : { trigger: 'axis' }, legend: { data:['成立','变更','注销'], y : 'bottom' }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : cldjYear, } ], yAxis : [ { type : 'value', axisLabel : { formatter: '{value}' }, } ], series : [{name:"成立",type:'line',smooth:true,data:cldjValue,itemStyle: {normal: {areaStyle: {type: 'default',//填充颜色color : 'rgba(95, 165, 85,0.8)'},}},markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }},{name:"变更",type:'line',smooth:true,data:bgdjValue,itemStyle: {normal: {areaStyle: {type: 'default',//填充颜色color : 'rgba(255, 127, 80,0.8)'},}},markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }},{name:"注销",type:'line',smooth:true,data:zxdjValue,itemStyle: {normal: {areaStyle: {type: 'default',//填充颜色color : 'rgba(135, 206, 250,0.8)'},}},markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }} ]};myChart.setOption(option);}效果：
以下为静态数据示例
● 示例1
示例1配置：
//租金范围 饼图 1000以下 1000-2000 2000-5000 5000-8000 8000 以上function drawZjfw(ec){var myChart = ec.init(document.getElementById('zjfw'));var option = { title : { text: '租金范围统计分析', x :'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { x : 'center', y : 'bottom', data:['1000以下','1000-2000','2000-5000','5000-8000','8000 以上'] }, calculable : true, series : [ { name:'租金范围', type:'pie', radius : [30, 110], center : ['50%', '50%'], roseType : 'area', x: '50%', // for funnel max: 40, // for funnel sort : 'ascending', // for funnel data:[{value:15, name:'1000以下'},{value:52, name:'1000-2000'},{value:86, name:'2000-5000'},{value:32, name:'5000-8000'},{value:3, name:'8000 以上'}, ] } ]};myChart.setOption(option);}//房型结构 饼图function drawFwjg(ec){var myChart = ec.init(document.getElementById('fwjg'));var option = { title : { text: '房屋结构统计分析', x :'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { x : 'center', y :'bottom', data:['砖木结构','砖混结构','钢筋混泥土','钢结构'] }, calculable : true, series : [ { name:'房屋结构统', type:'pie', radius : '50%', center: ['50%', '50%'], data:[ {value:335, name:'砖木结构'}, {value:310, name:'砖混结构'}, {value:234, name:'钢筋混泥土'}, {value:135, name:'钢结构'} ] } ]};myChart.setOption(option);}● 示例2（和示例1相似）
示例2代码：
//法人类别-饼图(企业法人)function drawQyfr(ec){var myChart = ec.init(document.getElementById('qyfr'));var option = {title: {text: '企业法人',x: 'center',y: '30'},tooltip: {trigger: 'item',},legend: {orient: 'horizontal',x: 'center',y:'bottom',data: ['全民所有制企业法人','集体所有制企业法人','私营企业法人','联营企业法人','中外合资经营企业法人','中外合作经营企业法人','外资企业法人']},calculable: true,series: [{name: '法人',type: 'pie',radius : ['20',"80"],center: ['50%', '50%'],roseType : 'area',itemStyle: {normal: {label: {//show:false},labelLine:{show:true}},emphasis : {label : {show : false,position : 'center',textStyle : {fontSize : '30', fontWeight : 'bold'}}}},data:[ {value:335, name:'全民所有制企业法人'}, {value:310, name:'集体所有制企业法人'}, {value:234, name:'私营企业法人'}, {value:234, name:'联营企业法人'}, {value:234, name:'中外合资经营企业法人'}, {value:234, name:'中外合作经营企业法人'}, {value:234, name:'外资企业法人'} ]}]};myChart.setOption(option);}//法人类别-饼图(非企业法人)function drawFqyfr(ec){var myChart = ec.init(document.getElementById('fqyfr'));var option = {title: {text: '非企业法人',x: 'center',y: '30'},tooltip: {trigger: 'item',},legend: {orient: 'horizontal',x: 'center',y:'bottom',data: ['机关法人','事业单位法人','社会团体法人']},calculable: true,series: [{name: '法人',type: 'pie',radius : ['20',"80"],center: ['50%', '50%'],roseType : 'area',itemStyle: {normal: {label: {//show:false},labelLine:{show:true}},emphasis : {label : {show : false,position : 'center',textStyle : {fontSize : '30', fontWeight : 'bold'}}}},data:[ {value:335, name:'机关法人'}, {value:310, name:'事业单位法人'}, {value:234, name:'社会团体法人'} ]}]};myChart.setOption(option);}● 示例3
示例3配置：
//法人登记统计图 function drawFrdjtj(ec){var myChart = ec.init(document.getElementById('frdjtj'));var option = {title : { text: '法人登记走势图 ', x:'left' },tooltip : { trigger: 'axis' }, legend: { data:['企业法人登记','非企业法人登记'] }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : ['2008年','2009年','2010年','2011年','2012年','2013年','2014年','2015年'] } ], yAxis : [ { type : 'value', axisLabel : { formatter: '{value} 人' }, min:100, max:5000 } ], series : [{name:"企业法人登记",type:'line',smooth:true,data:[789,807,3343,788,544,3450,3076,865],itemStyle: {normal: {areaStyle: {type: 'default'}}},markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }}, { name:"非企业法人登记", type:'line', smooth:true, data:[1340,1556,1530,1867,1473,1678,1977,1787], itemStyle: {normal: {areaStyle: {type: 'default'}}}, markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] } } ]};myChart.setOption(option);}● 示例4
示例4配置：
//近10年，成立、变更、注销 折线图 function drawFrZxt(ec){var myChart = ec.init(document.getElementById('FrZxt'));var option = {title : { text: '近10年法人登记折线图 ', x:'left' },tooltip : { trigger: 'axis' }, legend: { data:['成立','变更','注销'], y : 'bottom' }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : ['2005年','2006年','2007年','2008年','2009年','2010年','2011年','2012年','2013年','2014年','2015年'] } ], yAxis : [ { type : 'value', axisLabel : { formatter: '{value} 人' }, min:100, max:5000 } ], series : [{name:"成立",type:'line',smooth:true,data:[1289,807,3343,588,644,2450,1076,665,1258,2341,1398],itemStyle: {normal: {areaStyle: {type: 'default'}}},markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }}, { name:"变更", type:'line', smooth:true, data:[490,586,930,667,323,847,207,1487,2341,1025,542], itemStyle: {normal: {areaStyle: {type: 'default'}}}, markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] } }, { name:"注销", type:'line', smooth:true, data:[1240,1756,830,967,1473,1278,1177,787,893,875,365], itemStyle: {normal: {areaStyle: {type: 'default'}}}, markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] } } ]};myChart.setOption(option);} 4 0
- Echarts示例总结
- Echarts示例总结
- echarts总结
- echarts 总结
- 百度ECharts使用示例
- Echarts使用示例
- eCharts使用图表简单示例
- eCharts使用图表简单示例
- echarts图表导出excel示例
- Echarts象形图简单示例
- ECharts总结的很好
- Echarts使用总结
- Echarts 使用总结
- Echarts使用心得总结
- ECharts使用心得总结
- echarts个人使用总结
- Echarts 简单实用总结
- echarts学习总结
- 反射
- NYOJ37最大回文字符串（LCS）
- 面试技巧
- SSRS：Reporting Services报表制作技巧
- 管理数据库和表
- Echarts示例总结
- MP4文件格式的解析，以及MP4文件的分割算法
- 面试招聘
- canvas中paint画圆时strokewidth和radius的关系
- 微信-连接一切的力量
- 基于jQuery的fullPage.js全屏滚动插件
- 配置qt + wince6.0 + vs2005环境（转载+原创）
- C#參數傳遞的三種方法：一般傳值、 ref、out
- LeetCode 2. Add Two Numbers 解题报告
