当前位置: 代码迷 >> 综合 >> Echarts.js的简单方法归类
  详细解决方案

Echarts.js的简单方法归类

热度:78   发布时间:2023-09-27 13:19:40.0

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 : ['点击本地保存'] 
                  }
            }
  },

  相关解决方案