你的位置:首页 > Java教程

[Java教程]echarts之我用


  最近在用echarts做项目,抽点时间总结一下。

  首先说一下什么是echarts。echarts是百度开发的类似于fusioncharts的图表展示控件。区别于fusioncharts的是echarts是基于html5的,不需要浏览器安装flash控件。只需要浏览器支持HTML5即可。

  echarts主页:http://echarts.baidu.com/

  echarts效果展示:http://echarts.baidu.com/doc/example.html?qq-pf-to=pcqq.c2c

  echarts属性解读:http://echarts.baidu.com/doc/doc.html#Legend

  先贴一个代码实例:

<body>  <div id="main" ></div><!--图表展示位置DIV-->  <script type="text/javascript">   // 路径配置  require.config({    paths: {      echarts:'asset/echarts'//echarts路径    }  });    // 使用  require(    [      'echarts',      'echarts/chart/bar',      'echarts/chart/line',      'echarts/chart/pie'    //使用的Echart类型,可在下面data部分查看。    ],    function(ec){      var myChart = ec.init(document.getElementById('main'));//根据ID获取用于展示的DIV      option = {        title : {          text: '未来一周气温变化',    //图表标题          subtext: '纯属虚构'       //图表副标题        },        tooltip : {          trigger: 'axis'        },        legend: {          data:['最高气温','最低气温']  //图例        },        toolbox: {              //工具          show : true,          feature : {            mark : {show: true},            dataView : {show: true, readOnly: false},            magicType : {show: true, type: ['line', 'bar']},            restore : {show: true},            saveAsImage : {show: true}          }        },        calculable : true,        xAxis : [              //X轴展示的内容          {            type : 'category',            boundaryGap : false,            data : ['周一','周二','周三','周四','周五','周六','周日']          }        ],        yAxis : [              //y轴坐标          {            type : 'value',            axisLabel : {              formatter: '{value} °C'            }          }        ],        series : [              //具体展示内容          {            name:'最高气温',                //展示内容1对应的图例            type:'line',                  //图表类型,需根据该类型引入相应的js            data:[11, 11, 15, 13, 12, 13, 10],     //图表内容            markPoint : {                               data : [                {type : 'max', name: '最大值'},                {type : 'min', name: '最小值'}              ]            },            markLine : {              data : [                {type : 'average', name: '平均值'}              ]            }          },          {            name:'最低气温',            type:'line',            data:[1, -2, 2, 5, 3, 2, 0],            markPoint : {              data : [                {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}              ]            },            markLine : {              data : [                {type : 'average', name : '平均值'}              ]            }          }        ]      };      myChart.setTheme("macarons");      //设置echarts的主题      myChart.setOption(option);        //在DIV上绘制图表    });  </script> </body>

  下面就如何使用该控件进行一步一步讲解:

  首先引入echarts.js该js文件

  然后再页面中定义好需要展示图表的div的位置,并设置唯一ID。

  然后引入上图中的js代码块,修改相应的代码就OK了。

  修改代码前可以去echarts效果展示中查看相应的效果图,适用于自己的点进去复制左侧的代码,替换代码块中的option。然后添加用到的echarts类型相应的js。

应用过程中遇到的问题:

  1、堆叠式柱状图数据过于密集时数字重叠。

     解决方法:控制展示数据,当小于某个数时不展示,将下面代码添加到series中,修改if else 条件。

itemStyle: {  normal: {    label : {     show: true, position: 'insideTop',     formatter:function(value){       if(value.data<=2)         return "";       else        return value.data;     }    }  }},

  2、滚动条太高,覆盖数据

    解决方法:设置滚动条高度。

dataZoom : {  show : true, //滚动条是否展示  start : 0,  //滚动条开始位置--百分比   end : 25,  //滚动条结束为止--百分比   height:20  //滚动条高度},

  3、y轴太窄,数据显示不全

    解决方法:控制图像面板的位置,使坐标轴区域面积变大。

grid: {  x: 110    //面板的开始位置,距div左侧的像素数},

  4、点击柱子或节点相应事件

myChart.on("click",function(params,ctx){  if(params.seriesName=="图例"){//如果点击的柱子或节点是图例中的一个的时候,相应事件              //事件    }  });});

  5、控制鼠标悬浮显示内容,下面代码是控制如果是负数的时候显示正数。

tooltip : {  trigger: 'item',  formatter: function (params){    if(params.value<=0)         return params.name + '<br/>'+ params.seriesName + ' : ' + params.value*(-1);    else      return params.name + '<br/>'+ params.seriesName + ' : ' + params.value;  }},