Echarts图表常用功能使用记录

1、坐标轴

1.1、X轴： 

xAxis : {
    type: 'category',
    boundaryGap : false,
    data : xAxisData,    //数组
    axisLabel: {        // x轴的字体样式
        show: true,
        textStyle: {
            color: '#fff',
            fontSize:'16'
        }
    },
    splitLine: {    
        show: false,     // 控制网格线是否显示
        lineStyle: {    //  改变轴线颜色
            color: ['red']
        }                            
    },
    axisLine:{    // x轴的颜色和宽度
        lineStyle:{
            color:'#fff',
            width:3,   //这里是坐标轴的宽度,可以去掉
        }
    }
}
复制代码

1.2、Y轴： 

yAxis: {
    type: 'category',
    data: ['福田','南山','罗湖','盐田','龙华','宝安','龙岗'],
    axisLabel: {    // y轴的字体样式
        show: true,
        textStyle: {
            color: '#fff'
        }
    },    
    axisLine:{    // y轴的颜色和宽度
        lineStyle:{
            color:'#fff',
            width:1,    //这里是坐标轴的宽度
        }
    }
}复制代码

2、图例： 

legend: {
    data: ['交警', '武警','协警'],
    textStyle: {  
        color: '#fff'          //legend字体颜色 
    }
}复制代码

3、提示框： 

tooltip : {
      trigger: 'axis',
      axisPointer : {            // 坐标轴指示器，坐标轴触发有效
          type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
 }复制代码

4、动画： 

5、数据：

6、图表：

6.1、图表位置：

grid: {
    left: '3%',   //距离左边的距离
    right: '6%', //距离右边的距离
    bottom: '8%',//距离下边的距离
    top: '12%' //距离上边的距离
}复制代码

6.2、图表标题

title:{
    left:'center',    //标题居中,left的值为'left', 'center', 'right'
    itemGap:20    //主副标题之间的间距,默认为10 
    text:'标题文本',
    textStyle:{        
        color:'#ccc',    //文字颜色
        fontStyle:'normal',    //字体风格,'normal','italic','oblique'
        fontWeight:'bold',    //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
        fontFamily:'sans-serif',    //字体系列
        fontSize:18    //字体大小
    }
    subtext:'副标题',
    subtextStyle:{}    //同上方的textStyle
}复制代码

关于echarts使用的常见问题总结

1.legend图例不显示的问题:
        在legend中的data为一个数组项,数组项通常为一个字符串，每一项需要对应一个系列的 name,如果数组项的值与name不相符则图例不会显示;
2.图表位置无法紧贴画布边缘的问题:
        在grid绘图网格里,containLabel(grid 区域是否包含坐标轴的刻度标签,默认不包含)为true的情况下,无法使图表紧贴着画布显示,但可以防止标签标签长度动态变化时溢出容器或者覆盖其他组件,将containLabel设置为false即可解决;

grid:{
    containLabel:false
}复制代码

3.反向坐标轴:
在echarts3中xAis和

yAis:{
  inverse:true  
}复制代码

新添加了inverse属性,在inverse为true的情况下执行反向坐标轴;

4.动态替换地图图表的方法:
        在echarts3中由于地图精度的提高,不在内置地图数据；可以在地图下载页面http://echarts.baidu.com/download-map.html 下载对应文件,按需求引用;
地图的geojson文件只包含了两层数据(国>省,省>市,市>区)
eCharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册,我一般使用后者;
方法如下:

function mapCharts(name,id){
    $.get('json路径/'+name+'.json', function (geoJson) {
        echarts.registerMap(name, geoJson);
        var chart = echarts.init(document.getElementById(id));
        chart.setOption({
            series: [{
            type: 'map',
            map: name
            }]
        });
    });
};复制代码

5.柱状图的宽度问题:
如设计图给出柱状图指定宽度,直接指定series.barWidth柱状图的宽度(默认barWidth为自适应),自适应功能会失效,在小尺寸状态下柱状图宽度不会发生改变;

如不指定宽度,使用默认自适应会导致多条数据与单条数据宽度显示不一致,所以在设计图明确宽度的情况下,使用series.barMaxWidth(最大宽度)属性,来解决这一问题;

自适应多条数据的效果

自适应单条数据的效果

使用了最大高度的效果

6.部分情况下初始化图表失败的问题
       在使用类似Bootstrap轮播图等使用display:none属性隐藏其他图片的插件时,这种情况下会导致echarts初始化时获取不到画布宽高,导致绘制图表失败;
        如果不考虑ie9以下可考虑swiper3等使用overfllow:hidden属性隐藏多余图片的插件,如需兼容ie9以下可考虑swiper2(高度无法自适应),或者自己手写轮播图;

7.echarts图表响应式的问题
echarts提供了图表的resize方法,使用时可在setoption后添加如下代码:

$(window).on('resize',function(){
    myChart.resize();
});复制代码

8.图表判断返回颜色
echarts的color属性提供了function方法

color: function(params) {
//颜色数组
    var colorList = [
        ‘#C1232B‘,‘#B5C334‘,‘#FCCE10‘,‘#E87C25‘,‘#27727B‘,
        ‘#FE8463‘,‘#9BCA63‘,‘#FAD860‘,‘#F3A43B‘,‘#60C0DD‘,
        ‘#D7504B‘,‘#C6E579‘,‘#F4E001‘,‘#F0805A‘,‘#26C0C0‘
    ];
//判断的代码

//根据条件返回相应颜色
return colorList[params.dataIndex]
}复制代码

9.使用formatter方法格式化文本(用于在label标签,tolltip等显示信息需要自定义时)
legend图例下的使用
使用字符串模板，模板变量为图例名称 {name}

formatter: 'Legend {name}'
//使用回调函数
formatter: function (name) {
    return 'Legend ' + name;
};复制代码

label下的使用
主要是对params(一个对象包含data数据)参数的返回

formatter: function (params) {
    return params.xxx;
};复制代码

10.tolltip里添加小标识(圆点之类的)的方法
在formatter里返回时拼接html元素;

formatter: function(params) {
    if(params.data.value) {
        if(params.data.value.length > 0) {
            var str = '';
            for(var i = 0; i < params.data.value.length; i++) {
                if(str !== '') {
                    str += '</br>' + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color[i] + '"></span>';
                }
                str += params.data.value[i] + '人';
            }
            return params.name + '</br>' + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color[0] + '"></span>' + str;
        }
    }
    return params.data.name + ':' + (params.data.value ? params.data.value : '--');
}复制代码

转载于:https://juejin.im/post/5bcd6b94e51d457a32544fbd