echart图表工作笔记

分类：Javascript| 发布：camnprbubuol| 查看：340 | 发表时间：2016/11/23

兼容性的问题

IE11下echart图表出现凹进去的边框，解决办法，隐藏object。即：

view source
print?
1.resize-sensor{
2   display:none!important;
3}

提示信息格式化

view source
print?
1tooltip: {
2    trigger: 'item',
3    formatter: "{a} 标签换行 {b} : {c}", // 或者下边
4    formatter: function(params){
5        return params.name=="no"?"":(params.seriesName+"
6"+params.name+" : "+params.value);
7    }
8}

工具栏（保存为图片、新建工具图标）

view source
print?
01toolbox: {
02    show: true,
03    // itemSize:25,
04    // iconStyle:{
05        // normal:{
06            // borderColor:'#bdbdbd'
07        // }
08    // },
09    right:20,
10    feature: {
11        //restore: {},
12        saveAsImage: {backgroundColor:'#000000', icon : 'image://../sources/download.png?t=004', iconStyle:{emphasis:{borderColor:"#fff"}}}, // 保存图片的背景色backgroundColor
13        myTool : {
14            show : true,
15             title : '保存为图片',
16             icon : 'image://../sources/download.png?t=004',
17             iconStyle:{emphasis:{borderColor:"#fff"}},
18             padding:30,
19             onclick : function (){
20                 html2canvas(document.getElementsByClassName('ant-card-body')[0]).then(function(canvas){
21                 let dC = document.getElementById("downtextcontainer"), dataurl = canvas.toDataURL('jpg');
22                 dC.href = dataurl;
23                 dC.download = "map.jpg";
24 
25                if (window.VBArray) {
26                     dC.click();
27                 } else if (document.createEvent) {
28                     var ev = document.createEvent('MouseEvents');
29                     ev.initEvent('click', false, true);
30                     dC.dispatchEvent(ev);
31                 }
32             });
33         }
34     },
35},
36color:['#cfb081','#fff2cd','#fbe5d7','#ededed','#dfebf7','#bdd7ee','#c2bdee','#dbbdee','#eebde4','#eebdd3'],//依次应用定义的颜色到饼图、雷达图、漏斗（柱图不适用这个）

排序等option，参考：http://echarts.baidu.com/option.html

view source
print?
1series: [{
2     name:seriesName,
3     type:'funnel',
4     sort: 'ascending',//[ default: 'descending' ]  数据排序， 可以取 'ascending', 'descending'。
5}]

 

缩放图表，以便数据显示完整

view source
print?
1grid: {
2    left: '3%',
3    right: '4%',
4    bottom: '3%',
5    containLabel: true
6},
365据说看到好文章不转的人，服务器容易宕机！
标签：
原创文章如转载，请注明：转载自郑州网建-前端开发　http://camnpr.com/
本文链接：http://camnpr.com/javascript/2270.html

相关文章

关注本站

[+] 关注微博 留言板 WAP访问本站 订阅本站

一条新消息

爱国主义是一种有害的、精神错乱的白痴形式。--萧伯纳 [?]
    冬天来了，该换包包了，猛烈点击！！！
     平还是不平？
    流浪猫咪的女包店

小编推荐

    东东找到花花了
  • 最新评论
  • 最近访客

    热门文章

    想你所想 爱你所爱

    豫ICP备10013645号 Copyright 2009-2022 camnpr.com  
    关于我们 - 广告合作 - 免责声明 - 投诉建议