1:下载:
2:加入项目
只须要把:doc\example\www\js下的js文件拷到项目中即可
3:代码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>ECharts</title>
- <!--Step:1 引入一个模块加载器,如esl.js或者require.js-->
- <script src="esl.js"></script>
- </head>
- <body>
- <!--Step:2 为ECharts准备一个具备大小(宽高)的Dom-->
- <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
- <script type="text/javascript">
- // Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径
- require.config({
- paths:{
- echarts:'./echarts',
- 'echarts/chart/bar' : './echarts-map',
- 'echarts/chart/line': './echarts-map',
- 'echarts/chart/map' : './echarts-map'
- }
- });
- // Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径
- require(
- [
- 'echarts',
- 'echarts/chart/bar',
- 'echarts/chart/line',
- 'echarts/chart/map'
- ],
- function(ec) {
- //--- 折柱 ---
- var myChart = ec.init(document.getElementById('main'));
- // 过渡---------------------
- myChart.showLoading({
- text: '正在努力的读取数据中...', //loading话术
- });
- var option = {
- legend: { // 图例配置
- orient:'horizontal', //布局方式,默认为水平布局,可选为:'horizontal' | 'vertical'
- x:'center', //水平安放位置,默认为全图居中,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
- y:'top', //垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
- backgroundColor:'rgba(0,0,0,0)', //图例背景颜色,默认透明
- borderColor: '#ccc', //图例边框颜色
- selectedMode:true, //图例不能点了(false)
- padding: 5, // 图例内边距,单位px,默认上下左右内边距为5
- itemGap: 10, // Legend各个item之间的间隔,横向布局时为水平间隔,纵向布局时为纵向间隔
- data: []
- },
- toolbox: { //小工具
- show : true,
- feature : {
- mark : true,
- dataZoom : true,
- dataView : true,
- magicType:['line', 'bar'],
- restore : true,
- saveAsImage : true
- }
- },
- dataZoom : { //缩略图
- show : true,
- realtime : true,
- start : 20,
- end : 80
- },
- tooltip: { // 气泡提示配置
- trigger: 'axis', // 触发类型,默认数据触发,可选为:'axis'
- },
- xAxis: [ // 直角坐标系中横轴数组
- {
- type: 'category', // 坐标轴类型,横轴默认为类目轴,数值轴则参考yAxis说明
- boundaryGap: false, //数据从坐标轴顶开始
- data: []
- }
- ],
- yAxis: [ // 直角坐标系中纵轴数组
- {
- type: 'value', // 坐标轴类型,纵轴默认为数值轴,类目轴则参考xAxis说明
- boundaryGap: [0.1, 0.1], // 坐标轴两端空白策略,数组内数值代表百分比
- splitNumber: 4 // 数值轴用,分割段数,默认为5
- }
- ],
- series: [
- ]
- };
- var jsonranklist={"data":{"1":12,"2":56,"3":20,"4":6},"indata":{"1":3,"2":16,"3":28,"4":56}};//可从后台传入
- var xname=[];
- for(var key in jsonranklist){
- var databand=[];
- if(key=="data"){
- for(var datakey in jsonranklist[key]){
- databand.push(jsonranklist[key][datakey]);
- xname.push(datakey);
- }
- }
- if(key=="indata"){
- for(var datakey in jsonranklist[key]){
- databand.push(jsonranklist[key][datakey]);
- }
- }
- option.legend.data.push(key);//追加数据
- seriesx={name:key,type:'line',data:databand,itemStyle: {normal: {areaStyle: {}}},stack:'a'};//参数分别表示:数据名称,图表类型,数据,样式:在此是填充,数据叠加(堆积图:相同stack名字的加在一起)
- option.series.push(seriesx);
- }
- option.xAxis[0].data=xname;
- myChart.setOption(option);
- }
- );
- </script>
- </body>
- </html>
4:通过后台传json来重新绘制图表
1):对上面的代码进行修改
- // Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径
- <span style="color: #ff0000;">var ECharts; //使其它方法可以访问到它
- </span> require([ 'echarts', 'echarts/chart/bar', 'echarts/chart/line',
- 'echarts/chart/map' ], function(ec) {
- //--- 折柱 ---
- ECharts=ec;
- var myChart = ec.init(document.getElementById('main'));
2):对一按钮增加单击事件然后传值刷新图表
- $('#channelBandwidth').click( function() {
- $.ajax({
- type:'get',//可选get
- url:'${projectPath}/search',
- data:{"channelType":$('#channelType').val(),"channel":$('#channel').val(),"day":$('#day').val(),"startTime":$('#startTime').val(),"endTime":$('#endTime').val(),"database":$('#database').val()},
- dataType:'text',//服务器返回的数据类型 可选XML ,Json jsonp script htmltext等
- success:function(msg){
- var msgObj=JSON.parse(msg); <span style="color: #ff0000;"> //因为图表接收的是对象而ajax返回的是字符串,所以须转换
- </span> //重新构建图形
- var myChart = ECharts.init(document.getElementById('main'));
- setoptiondata(msgObj,myChart);
- },
- error:function(){
- alert('error');
- }
- })})
具体代码 如下
- <%@ page language="java" contentType="text/html; charset=utf-8"
- pageEncoding="utf-8"%>
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>ECharts</title>
- <!--Step:1 引入一个模块加载器,如esl.js或者require.js-->
- <script src="resources/echarts/esl.js"></script>
- <script src="resources/echarts/echarts.js"></script>
- <script src="resources/echarts/echarts-map.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- $('#channelBandwidth').click( function() {
- $.ajax({
- type:'get',//可选get
- url:'${projectPath}/search',
- data:{"channelType":$('#channelType').val(),"channel":$('#channel').val(),"day":$('#day').val(),"startTime":$('#startTime').val(),"endTime":$('#endTime').val(),"database":$('#database').val()},
- dataType:'text',//服务器返回的数据类型 可选XML ,Json jsonp script htmltext等
- success:function(msg){
- var msgObj=JSON.parse(msg);
- //重新构建图形
- var myChart = ECharts.init(document.getElementById('main'));
- setoptiondata(msgObj,myChart);
- },
- error:function(){
- alert('error');
- }
- })})
- });
- </script>
- </head>
- <body>
- <select name="channelType" id="channelType">
- <option value="channelName">频道名称</option>
- <option value="channelId">频道id</option>
- </select>
- <input type="test" name="channel" id="channel" />
- <input type="test" name="day" id="day" />
- <input type="test" name="startTime" id="startTime" />
- <input type="test" name="endTime" id="endTime" />
- <select name="database" id="database">
- <option value="tz">通州</option>
- <option value="zw">兆维</option>
- </select>
- <input type="button" id="channelBandwidth" value="查询" />
- <!--Step:2 为ECharts准备一个具备大小(宽高)的Dom-->
- <div id="main"
- style="height: 500px; border: 1px solid #ccc; padding: 10px;"></div>
- <script type="text/javascript">
- // Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径
- require.config({
- paths : {
- echarts : './echarts',
- 'echarts/chart/bar' : './echarts-map',
- 'echarts/chart/line' : './echarts-map',
- 'echarts/chart/map' : './echarts-map'
- }
- });
- // Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径
- var ECharts;
- require([ 'echarts', 'echarts/chart/bar', 'echarts/chart/line',
- 'echarts/chart/map' ], function(ec) {
- //--- 折柱 ---
- ECharts=ec;
- var myChart = ec.init(document.getElementById('main'));
- // 过渡---------------------
- myChart.showLoading({
- text : '正在努力的读取数据中...', //loading话术
- });
- jsonranklist = {"data":{"2013-11-08":3,"2013-11-07":5,"2013-11-06":3,"2013-11-05":12},"indata":{"2013-11-08":9,"2013-11-07":7,"2013-11-06":23,"2013-11-05":5}};//可从后台传入
- setoptiondata(jsonranklist,myChart);
- });
- function setoptiondata(jsonranklist,myChart){
- var option = {
- legend : { // 图例配置
- orient : 'horizontal', //布局方式,默认为水平布局,可选为:'horizontal' | 'vertical'
- x : 'center', //水平安放位置,默认为全图居中,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
- y : 'top', //垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
- backgroundColor : 'rgba(0,0,0,0)', //图例背景颜色,默认透明
- borderColor : '#ccc', //图例边框颜色
- selectedMode : true, //图例不能点了(false)
- padding : 5, // 图例内边距,单位px,默认上下左右内边距为5
- itemGap : 10, // Legend各个item之间的间隔,横向布局时为水平间隔,纵向布局时为纵向间隔
- data : []
- },
- toolbox : { //小工具
- show : true,
- feature : {
- mark : true,
- dataZoom : true,
- dataView : true,
- magicType : [ 'line', 'bar' ],
- restore : true,
- saveAsImage : true
- }
- },
- dataZoom : { //缩略图
- show : true,
- realtime : true,
- start : 20,
- end : 80
- },
- tooltip : { // 气泡提示配置
- trigger : 'axis', // 触发类型,默认数据触发,可选为:'axis'
- },
- xAxis : [ // 直角坐标系中横轴数组
- {
- type : 'category', // 坐标轴类型,横轴默认为类目轴,数值轴则参考yAxis说明
- boundaryGap : false, //数据从坐标轴顶开始
- data : []
- } ],
- yAxis : [ // 直角坐标系中纵轴数组
- {
- type : 'value', // 坐标轴类型,纵轴默认为数值轴,类目轴则参考xAxis说明
- boundaryGap : [ 0.1, 0.1 ], // 坐标轴两端空白策略,数组内数值代表百分比
- splitNumber : 4
- // 数值轴用,分割段数,默认为5
- } ],
- series : [
- ]
- };
- var xname = [];
- for ( var key in jsonranklist) {
- var databand = [];
- if (key == "data") {
- for ( var datakey in jsonranklist[key]) {
- databand.push(jsonranklist[key][datakey]);
- xname.push(datakey);
- }
- }
- if (key == "indata") {
- for ( var datakey in jsonranklist[key]) {
- databand.push(jsonranklist[key][datakey]);
- }
- }
- option.legend.data.push(key);//追加数据
- seriesx = {
- name : key,
- type : 'line',
- data : databand,
- itemStyle : {
- normal : {
- areaStyle : {}
- }
- },
- stack : 'a'
- };
- option.series.push(seriesx);
- }
- option.xAxis[0].data = xname;
- myChart.setOption(option,true);
- }
- </script>
- </body>
- </html>
5:坐标轴单位格式化
yAxis : [ // 直角坐标系中纵轴数组
{
type : 'value', // 坐标轴类型,纵轴默认为数值轴,类目轴则参考xAxis说明
axisLabel : {
formatter:function(value){ //个性化y轴单位
if(value<1000){
return value + ' Byte';
}else if(value<1000000){
return value/1000 +' KB';
}else if(value<1000000000){
return value/1000000 +' MB';
}else if(value<1000000000000){
return value/1000000000 +' GB';
}else if(value<1000000000000000){
return value/1000000000000 +' TB';
}else{
return value/1000000000000000 +' PB';
}
}
}
{
type : 'value', // 坐标轴类型,纵轴默认为数值轴,类目轴则参考xAxis说明
axisLabel : {
formatter:function(value){ //个性化y轴单位
if(value<1000){
return value + ' Byte';
}else if(value<1000000){
return value/1000 +' KB';
}else if(value<1000000000){
return value/1000000 +' MB';
}else if(value<1000000000000){
return value/1000000000 +' GB';
}else if(value<1000000000000000){
return value/1000000000000 +' TB';
}else{
return value/1000000000000000 +' PB';
}
}
}
提示气泡数据格式化
- tooltip : { // 气泡提示配置
- trigger : 'axis', // 触发类型,默认数据触发,可选为:'axis'
- formatter:function(value){
- return unitdata(value);
- }
- }
6:2.0增加了用户事件交互(http://echarts.baidu.com/doc/example/event.html)
配置(optione下的calculable:true可以使用所有数据响应事件)
var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.CLICK, eConsole);
myChart.on(ecConfig.EVENT.CLICK, eConsole);
会调用自定义函数 function eConsole(param) param.name可以得到x轴数据
7:显示图表最值(http://echarts.baidu.com/doc/example/mix10.html)
- markPoint : {
- symbol: 'emptyPin',
- itemStyle : {
- normal : {
- color:'#1e90ff',
- label : {
- show:true,
- position:'top',
- formatter: function (a,b,v) {
- return Math.round(v/10000) + ' 万'
- }
- }
- }
- },
- data : [
- {type : 'max', name: '最大值', symbolSize:5},
- {type : 'min', name: '最小值', symbolSize:5}
- ]
- },
- markLine : {
- symbol : 'none',
- itemStyle : {
- normal : {
- color:'#1e90ff',
- label : {
- show:true,
- formatter: function (a,b,v) {
- return Math.round(v/10000) + ' 万'
- }
- }
- }
- },
- data : [
- {type : 'average', name: '平均值'}
- ]
- }
- }
8:图例线为直线 图表中不显示图例线(areaStyle: {}用来填充数据型流量图)
seriesx = {name:bunamestr,type:'line',data:outdataband,symbol: 'none',itemStyle: {normal: {areaStyle: {},lineStyle: {width:0}}},stack:'a'};