echart记录

2017-05-30

cmd-markdown-logo

echarts响应式变化

1
2
3

window.addEventListener('resize',function(){
   myChart.resize();
});

有时候100%失效会造成echarts找不到容器的高度 100%会默认成100px

function chartssize (container,charts) {
  function getStyle(el, name) {　　
    if (window.getComputedStyle) {　　　
      return window.getComputedStyle(el, null);　　
    } else {　　　
      return el.currentStyle;　　
    }　
  }
  var wi = getStyle(container, 'width').width;
  var hi = getStyle(container, 'height').height;
  charts.style.width = wi
  charts.style.height = hi
}
//然后监控每次浏览器窗口变化的时候调用chartssize（）就可以了。
//找到外层容器元素id/echart的id即可
var container = document.getElementById('container')
window.onresize=function(){
 chartssize（外层容器,echartsId）
}

这里有需要注意的问题,通过myChartsize .style.width = chartBox .style.width 这种方式去设置是无效的.因为直接获取chartBox .style.width是取不到的，因为chartBox你设置的是百分比宽高。所以要用getComputedStyle（）方法取。

vue中echart找不到元素高度(响应式还有些bug)

var echart_ = document.getElementById(id) ;
var widthCss = window.getComputedStyle(this.$refs.echartWrap_).width;
//找不到元素的高度智能找window的高度算出echarts父级的高度
var heightCss = window.innerHeight/3 -90 +'px';
echart_.style.width = widthCss;
echart_.style.height = heightCss;
var  barEcharts = echarts.init(echart_);
window.addEventListener("resize", () => {
    barEcharts.resize();
});
barEcharts.setOption({

})

echarts API clear()清理数据缓存

echarts封装需要用clear在每次加载前清空数据否则会造成数据缓存
关于echarts数据缓存问题的处理 clear()

清空当前实例，会移除实例中所有的组件和图表。清空后调用 getOption 方法返回一个{}空对象。

var backbone_line = echarts.init(document.getElementById('backbone_line'));
   backbone_line.clear();// 图表清空避免ajax的数据缓存
   backbone_line.setOption({
      // echarts代码
   })

echarts API dispose()销毁实例

使用Echarts插件的时候，多次加载会出现There is a chart instance already initialized on the dom.这个警告错误，页面上只出现一次图表成为空白
There is a chart instance already initialized on the dom 在DOM上已经初始化了一个图表实例。

解决方法； dispose() 销毁实例，销毁后实例无法再被使用

function echartData(){
    if (backbone_line != null && backbone_line != ""
     && backbone_line != undefined){
            myChart.dispose();//销毁实例
    }
    var backbone_line = echarts.init(document.getElementById('backbone_line'));
    backbone_line.setOption({
       // echarts代码
    })
}

柱状图改成条形图

互换X轴Y轴就行

关于X轴数据过多显示不全的问题

-解决办法1：xAxis.axisLabel 属性

axisLabel: {
   interval:0,//设置为0强制显示所有标签
   rotate:40//标签倾斜的角度
}

cmd-markdown-logo
-解决办法2：调用formatter文字竖直显示

axisLabel: {
      interval: 0,
      formatter:function(value) {
          return value.split("").join("\n");
      }
}

cmd-markdown-logo

文字竖直这个formatter实在有点太简单化了，做一个两个字的加\n的换行

axisLabel: {
    interval: 0,
    formatter:function(value)
    {
        debugger
        var ret = "";//拼接加\n返回的类目项
        var maxLength = 2;//每项显示文字个数
        var valLength = value.length;//X轴类目项的文字个数
        var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
        if (rowN > 1)//如果类目项的文字大于3,
        {
            for (var i = 0; i < rowN; i++) {
                var temp = "";//每次截取的字符串
                var start = i * maxLength;//开始截取的位置
                var end = start + maxLength;//结束截取的位置
                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                temp = value.substring(start, end) + "\n";
                ret += temp; //凭借最终的字符串
            }
            return ret;
        }
        else {
            return value;
        }
    }
}

解决办法3：X轴类目项隔一个换行(使用formatter中index参数)

axisLabel: {
    interval: 0,
    formatter:function(value,index)
    {
        debugger
        if (index % 2 != 0) {
            return '\n\n' + value;
        }
        else {
            return value;
        }
    }
}

toolbox自定义的工具

toolbox:{
    feature:{
       //自定义的工具名字，只能以 my 开头
         myTool1: {
              show:true,
              title:'放大',
              icon: 'image://pmc/images/index/to_max.png',
              onclick: function (option){
                  //echarts的option信息
                  console.log(option)
              }
         }
    }
}