Echarts.js的简单方法归类

1.在使用图标的时候我们有的时候需要知道每一个坐标的数据，但是一般的折线图只能查看到拐点的坐标，两个拐点的线中间部分电的坐标无法看到：如下设置 tooltip即可获得X,Y两条虚轴

        tooltip : {
                  trigger: 'axis',
                   axisPointer:{
                   show: true,
                   type : 'cross',
                         lineStyle: {
                               type : 'dashed',
                               width : 1
                           }
                      },
                    formatter : function (params) {
                            return params.seriesName + ' : [ '
                                     + params.value[0] + ', ' 
                                     + params.value[1] + ' ]';
                       }
            }

2.当窗口大小改变时，让图表改变

var myChart = echarts.init(document.getElementById('myChart')); 
myChart.resize();

3.去除折线拐点处的样式，在series的数组中增加symbol:'none'；

4.动态添加数据到图表中，在ajax获取的数据中：

for(var i=0;i<newArr.length;i++){
        var dataName = 'line'+i;
        var item = {   
                  symbol:'none',
                   clickable: false,
                    name:dataName,
                    type:'line',
                    data:newArr[i]
                };
         option.series.push(item);
 }

5.动态设置折线颜色，其中最后一条为固定颜色，在option中设置：

color:[],
legend: {
       data:[]
  }

利用随机数，拼接获取折线颜色（16进制）

//设置legend的颜色以及样式,结果线（最后一条线）为黑色
        for(var i=0;i<newArr.length;i++){
                if(i==newArr.length-1){
                        var color="#000000";
                }else{
                       var color="#";
                        for(var j=0;j<6;j++){
                              color += (Math.random()*16 | 0).toString(16);
                         }
                  }
                option.color.push(color);
           }

6.动态设置X,Y坐标的开始与结束。

xAxisArr（为获取到数据所有X轴点数的数组）

var xAxisMin = Math.min.apply(null, xAxisArr);//X轴坐标最小值

var xAxisMax = Math.max.apply(null, xAxisArr);//X轴坐标最小值

myChart.setOption({ 
        xAxis:[
            {
                   type : 'value',
                   min:xAxisMin,
                   max:xAxisMax,
                   scale: true,
                   axisLine: {
                            show: false,
                     }
              }
         ],
 });
myChart.setOption(option);//插入option，动态设置图表

7.在图表数据加载完之前先显示一段简单的loading动画

myChart.showLoading();  //开启

myChart.hideLoading();//隐藏  

8.保存、刷新按钮样式的更改，在toolbox中设置feature下的saveAsImage、restore分别设置，可以更改按钮图标样式和大小

toolbox: {
         show : true,
         padding:15,
         itemSize:30,
         feature : {
                restore : {
                      show : true,
                       title : '',
                        icon : './img/Refresh.png',
                        color : 'black'
                   },
                  saveAsImage :{
                           show : true,
                            title : '',
                            icon : './img/save.png',
                            type : 'jpg',
                            lang : ['点击本地保存'] 
                  }
            }
  },