echart图表工作笔记

兼容性的问题

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

.resize-sensor{
   display:none!important;
}

提示信息格式化

tooltip: {
    trigger: 'item',
    formatter: "{a} 标签换行 {b} : {c}", // 或者下边
    formatter: function(params){
        return params.name=="no"?"":(params.seriesName+" <br/>"+params.name+" : "+params.value);
    }
}

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

toolbox: {
    show: true,
    // itemSize:25,
    // iconStyle:{
        // normal:{
            // borderColor:'#bdbdbd'
        // }
    // },
    right:20,
    feature: {
        //restore: {},
        saveAsImage: {backgroundColor:'#000000', icon : 'image://../sources/download.png?t=004', iconStyle:{emphasis:{borderColor:"#fff"}}}, // 保存图片的背景色backgroundColor
        myTool : {
            show : true,
             title : '保存为图片',
             icon : 'image://../sources/download.png?t=004',
             iconStyle:{emphasis:{borderColor:"#fff"}},
             padding:30,
             onclick : function (){
                 html2canvas(document.getElementsByClassName('ant-card-body')[0]).then(function(canvas){
                 let dC = document.getElementById("downtextcontainer"), dataurl = canvas.toDataURL('jpg');
                 dC.href = dataurl;
                 dC.download = "map.jpg";

                if (window.VBArray) {
                     dC.click();
                 } else if (document.createEvent) {
                     var ev = document.createEvent('MouseEvents');
                     ev.initEvent('click', false, true);
                     dC.dispatchEvent(ev);
                 }
             });
         }
     },
},
color:['#cfb081','#fff2cd','#fbe5d7','#ededed','#dfebf7','#bdd7ee','#c2bdee','#dbbdee','#eebde4','#eebdd3'],//依次应用定义的颜色到饼图、雷达图、漏斗（柱图不适用这个）

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

series: [{
     name:seriesName,
     type:'funnel',
     sort: 'ascending',//[ default: 'descending' ]  数据排序， 可以取 'ascending', 'descending'。
}]

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

grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
},