zoukankan      html  css  js  c++  java
  • echarts使用记录(三):x/y轴数据和刻度显示及坐标中网格显示、格式化x/y轴数据、echarts 图例显示到右边、折线图平滑曲线

    1、去掉坐标轴刻度线,刻度数据,坐标轴网格,以Y轴为例,同理X轴

    xAxis: [{
        type: 'category',
        axisTick: {//决定是否显示坐标刻度  
            alignWithLabel: true,
            show:false
        },
        axisLabel:{  //决定是否显示数据  
            show:false
        }
    }],
    yAxis: [{
        type: 'value',
        axisTick: {
            show: false
        },
        splitLine:{  //决定是否显示坐标中网格
            show:true
        }
    }],

    2、xAxis.axisLabel.formatter string, Function

    [ default: null ]

    刻度标签的内容格式器,支持字符串模板和回调函数两种形式。

    // 使用字符串模板,模板变量为刻度默认标签 {value}
    formatter: '{value} kg'
    
    // 使用函数模板,函数参数分别为刻度数值(类目),刻度的索引
    formatter: function (value, index) {
        // 格式化成月/日,只在第一个刻度显示年份
        var date = new Date(value);
        var texts = [(date.getMonth() + 1), date.getDate()];
        if (index === 0) {
            texts.unshift(date.getYear());
        }
        return texts.join('/');
    }
    axisLabel:{  
        show:true,
        formatter: function (value, index) {//value当前值,index当前索引
            return value.split(' ')[1];
        }
    }

    3、echarts 图例显示到右边

    legend: {
        data:['同龄普通孩子','已具备技能','已泛化技能','已掌握技能','学习中'],
        orient: 'vertical',  //垂直显示
        y: 'center',    //延Y轴居中
        x: 'right' //居右显示
     },

    4、折线图平滑曲线

    series : [
        {
            symbol:'none', //去掉折线图中的节点
            smooth: false  //true 为平滑曲线,false为直线
        }
    ]
  • 相关阅读:
    HZOJ 太阳神
    HZOJ Silhouette
    HZOJ Dash Speed
    HZOJ 巨神兵
    值得纪念的cspsAFO总结
    11月FLAG
    模板易错总结
    树 总结
    DP总结(优化等)
    代码低级错误总结
  • 原文地址:https://www.cnblogs.com/goloving/p/9110951.html
Copyright © 2011-2022 走看看