曲线
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>ECharts</title> <script src="echarts.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '折线图堆叠' }, tooltip: { trigger: 'axis' }, legend: { //data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'] data: [] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, //data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] data: [] }, yAxis: { type: 'value' }, series: [ //{ // name: '邮件营销', // type: 'line', // stack: '总量', // data: [120, 132, 101, 134, 90, 230, 210] //} ] }; //数据格式 var ajaxData = [ { "title": "研发", "1月": "10", "2月": "20", "3月": "30", "4月": "40", "5月": "50", "6月": "60" }, { "title": "人事", "1月": "10", "2月": "20", "3月": "30", "4月": "40", "5月": "50", "6月": "60" }, { "title": "财务", "1月": "10", "2月": "20", "3月": "30", "4月": "40", "5月": "50", "6月": "60" }, { "title": "维护", "1月": "10", "2月": "20", "3月": "30", "4月": "40", "5月": "50", "6月": "60" } ]; debugger; for (var i in ajaxData) { var row = ajaxData[i]; // option.legend.data.push(row.title); //得到1 2 3对应的值 var arrays = []; //得到1 2 3月 for (var field in row) { if (field == "title") { continue; } if (i == 0) { option.xAxis.data.push(field); } arrays.push(row[field]); } var s = { name: row.title, type: 'line', stack: '总量', data: arrays }; option.series.push(s); } // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body></html>
柱状
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title> <script src="echarts.min.js"></script></head><body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '某地区蒸发量和降水量', subtext: '纯属虚构' }, tooltip: { trigger: 'axis' }, legend: { data: [] }, toolbox: { show: true, feature: { dataView: { show: true, readOnly: false }, magicType: { show: true, type: ['line', 'bar'] }, restore: { show: true }, saveAsImage: { show: true } } }, calculable: true, xAxis: [ { type: 'category', data: [] } ], yAxis: [ { type: 'value' } ], series: [ ] }; //数据格式 var ajaxData = [ { "title": "研发", "1月": "10", "2月": "20", "3月": "30", "4月": "40", "5月": "50", "6月": "60" }, { "title": "人事", "1月": "10", "2月": "20", "3月": "30", "4月": "40", "5月": "50", "6月": "60" } ]; debugger; for (var i in ajaxData) { var row = ajaxData[i]; // option.legend.data.push(row.title); //得到1 2 3对应的值 var arrays = []; //得到1 2 3月 for (var field in row) { if (field == "title") { continue; } if (i == 0) { option.xAxis[0].data.push(field); } arrays.push(row[field]); } var s = { name:row.title, type:'bar', data:arrays, markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, markLine : { data : [ {type : 'average', name: '平均值'} ] } } option.series.push(s); } // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script></body>
</html>
圆饼
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title> <script src="echarts.min.js"></script></head><body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '某站点用户访问来源', subtext: '纯属虚构', x: 'center' }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: [] }, series: [ { name: '访问来源', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; //数据格式 var ajaxData = [ { "name": "研发", "value": "200" }, { "name": "人事", "value": "300" }, { "name": "财务", "value": "400" }, { "name": "维护", "value": "100" } ]; debugger; for (var i in ajaxData) { var row = ajaxData[i]; option.legend.data.push(row.name); } option.series[0].data = ajaxData; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script></body></html>
简单柱子
// 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); var option = { xAxis: { type: 'category', data: [] }, yAxis: { type: 'value' }, series: [{ data: [], type: 'bar' }] }; //数据格式 var ajaxData = { "1月": "10", "2月": "20", "3月": "30", "4月": "40", "5月": "50", "6月": "60" }; for (var field in ajaxData) { option.xAxis.data.push(field); option.series[0].data.push(ajaxData[field]); } // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);
