[关闭]
@buluoXu 2015-07-18T15:37:28.000000Z 字数 3443 阅读 2993

ECHarts使用分享

图表 ECHarts
发布：徐仁朝

ECHarts图表使用中遇到的一些小坑

一、响应式图表

echarts默认不是响应式的，不会跟随屏幕的大小动态改变图表。怎么办？难道echarts只能在pc上使用，移动端不能很好的显示？怎么可能呢？其实想让echarts实时响应，so easy！！！

  1. <div id="main" style="height:400px"></div>
  1. var myChart=document.getElementById('main'),
  2. myChart.setOption({});
  3. window.onresize = myChart.resize;//ECharts没有绑定resize事件，显示区域大小发生改变内部并不知道，使用方可以根据自己的需求绑定关心的事件，主动调用resize达到自适应的效果

二、设置图表颜色

echarts图表自定义颜色

  1. series : [
  2.         {
  3.             name:'xxx',//图表名称
  4.             type:'line',
  5.             symbol: 'none',
  6.             itemStyle: {//自定义样式
  7.                 normal: {
  8.                     color: 'red'//自定义颜色
  9.                 }
  10.             },
  11.             data:[]//图表数据
  12.         }
  13.     ]

三、设置图表遮罩层

遮罩层主要为了提醒用户图表正在加载数据。

  1. <div id="main" style="height:400px"></div>
  1. var myChart=document.getElementById('main');
  2. myChart.showLoading();//显示遮罩
  3. myChart.hideLoading();//隐藏遮罩

四、图表数据未能清空问题

图表第一次显示时，就固定了数值，当点击按钮触发ajax获取数据填充到图表里面就会一直累加，不会清除上一次的数据。解决此问题，需要调用clear方法先清除数据，再填充新数据，如下：

  1. <div id="main" style="height:400px"></div>
  1. myChart.clear();//清除数据

五、最高值、最低值、平均值

并不是所有图表都需要设置此项，根据需求添加此项。

注意：如果数据是字符串类型，就会出现最大、最小值不准确问题，数据请尽量用数字类型（后端返回处理：int、double、float等）

  1. series : [
  2.         {
  3.             name:'xxx',//图表名称
  4.             type:'line',
  5.             markPoint: {//设置最高、最低值
  6.                 data: [
  7.                     { type: 'max', name: '最高' },
  8.                     { type: 'min', name: '最低' }
  9.                 ]
  10.             },
  11.             markLine: {//设置平均值
  12.                 data: [
  13.                     { type: 'average', name: '平均值' }
  14.                 ]
  15.             },
  16.             data:[]//图表数据
  17.         }
  18.     ]

六、图表dom的display为none时，图表不显示

display设置为none：不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
visible:hidden： 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。

因此，图表不能够正常显示，解决方法，通过visible:hidden设置图表隐藏。
实际情况：bootstrap里面的标签页组件是通过display设置标签页显示还是隐藏，这个就比较困难了。图表放进去肯定显示不全，修改源码？不太好，可能会出现意想不到的问题。那怎么搞呢？呵呵哒。。。其实直接调用标签页的方法，如下：

  1. <div role="tabpanel" class="tabpanel">
  2.   <ul class="nav nav-tabs" role="tablist">
  3.     <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">回复统计</a></li>
  4.     <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">审核统计</a></li>
  5.   </ul>
  6.   <div class="tab-content">
  7.   <!--为id为home、profile设置class为active，意味着所有标签页同时显示在一个页面里面-->
  8.     <div role="tabpanel" class="tab-pane active" id="home">
  9.         <h4>回复状态</h4>
  10.         <div class="replyState"></div>
  11.         <h4>点评回复统计</h4>
  12.         <div class="discussedReply"></div>
  13.         <h4>回复效率统计</h4>
  14.         <div class="replyPer"></div>
  15.     </div>
  16.     <div role="tabpanel" class="tab-pane active" id="profile">
  17.         <h4>审核状态</h4>
  18.         <div class="auditState"></div>
  19.         <h4>点评审核统计</h4>
  20.         <div class="discussedAudit"></div>
  21.         <h4>审核效率统计</h4>
  22.         <div class="auditPer"></div>
  23.     </div>
  24.   </div>
  26. </div>
  1. //由于标签页都显示出来了，通过下面的方法切换标签页
  2. $('.tabpanel a:last').tab('show');//先设置最后一个打开
  3. $('.tabpanel a:first').tab('show');//在设置第一个打开

七、不同图表不同数据格式

1、大部分图表数据格式为：data:[1,3,4,5,n...]
2、饼图数据格式：
data:[{value:20,name:'名称1'},{value:50,name:'名称2'},...]
3、环形图数据*：
环形图数据需要参照数据和真实数据两个，需要根据真实数据计算对应的参照数据。

  1. ToDayApprovedCountPie: function (store) {
  2.     var legend = [], ApprovedPass = [], ApprovedNotPass = [], NotApprovedCount = [], sum = 0, ap = 0, anp = 0, nap = 0;
  4.     sum = store['ApprovedPassCount'] + store['ApprovedNotPassCount'] + store['NotApprovedCount'];
  5.     ap=store['ApprovedPassCount'] / (sum ===0 ? 1 : sum)*100;//计算占比
  6.     ...
  8.     ApprovedPass.push({//真实数据（需要显示的）
  9.         value: ap.toFixed(0),
  10.         name: ap.toFixed(0) + "%审核通过"
  11.     }, {//参照数据（不需要显示的）
  12.         value: 100 - ap.toFixed(0),
  13.         name: '图表辅助信息（忽略）',//审核通过
  14.         itemStyle: placeHolderStyle
  15.     });
  16.     ...
  18.     legend.push(ap.toFixed(0) + "%审核通过", ...);
  20.     return {
  21.     ...
  22.         series: [
  23.             {
  24.                 name: '审核通过',
  25.                 type: 'pie',
  26.                 clockWise: false,
  27.                 radius: [75, 100],
  28.                 itemStyle: {
  29.                     normal: {
  30.                         color: '#6DD258'
  31.                     }
  32.                 },
  33.                 data: ApprovedPass
  34.             },
  35.             ...
  36.         ]
  37.     }
  38. }
4、组成瀑布图（需要参照数据）：
此图表需要按照一定的规律计算数据。如下数据：

  1. series : [
  2.     {
  3.         name:'辅助',
  4.         type:'bar',
  5.         stack: '总量',
  6.         data:[0, 1700, 1400, 1200, 300, 0]
  7.     },
  8.     {
  9.         name:'生活费',
  10.         type:'bar',
  11.         stack: '总量',
  12.         data:[2900, 1200, 300, 200, 900, 300]
  13.     }
  14. ]
  16. //按照如上数据的规律，总结出计算方法：
  17. var data=[2900, 1200, 300, 200, 900, 300]
  18. ,num = data[0],data2=[0];
  19. for (var i = 1, len = data.length; i < len; i++) {
  20.     num = num - data[i];
  21.     data2.push(num);
  22. }
  23. console.log(data2);//[0, 1700, 1400, 1200, 300, 0]
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注