echarts画对数坐标坐标[-0.2, 0.6],Y轴不等刻度问题

使用markLine实现y轴刻度不等分

一:实现理论
对数不支持负数坐标,所以将[-1,1]映射到[0,1];
对应的映射函数: y = 1/2x+1/2
2) 则现实的区间为:[-0.2,0.6]
3) 画线:yAxis = for( i=min; i<=max; i= i+0.1){log10(i0.5+ 0.5)100;}
YLine = [ -0.2, -0.1, 0,1, …, 0.6]
yAxis = log10(YLine
0.5 + 0.5)100
name = YLine
100+’%’
4) 需要画的曲线:YLineE = log10(X/100
0.5 + 0.5)*100

注:
需要乘100的原因是,echarts自己会对小数点第三位四舍五入,所以乘100

二:代码实现如下

option = {
    xAxis: {
        type: 'category',
        data: ['1', '2', '3', '4', '5', '6', '7','8','9']
    },
    yAxis: {
        type: 'value',
        "axisTick":{       //y轴刻度线
          "show":false
        },
        "splitLine": {     //网格线
          "show": false
        },
        axisLabel: {
          show: false,//不显示坐标轴上的文字
    },
        min:-50,
        max:0
    },
    series: [
    {
        data: [-39.79, -34.68, -30.10, -25.96,-22.18,-18.71,-15.49,-12.49,-9.69],
        type: 'line',
        smooth: true,
        
        markLine: {
                symbol: ['none', 'none'],//去掉箭头
                itemStyle: {
                    normal: { lineStyle: { type: 'solid', color:'black'}
                    ,label: { show: true, position:'left',formatter:'{b}'} }
                },
                formatter: function (params) {
                },
                data: [{
                        name: '-20%',
                        yAxis: -39.79
                },
                {
                        name: '-10%',
                        yAxis: -34.68
                },
                {
                        name: '0%',
                        yAxis: -30.10
                },
                {
                        name: '10%',
                        yAxis: -25.96
                },
                {
                        name: '20%',
                        yAxis: -22.18
                },
                {
                        name: '30%',
                        yAxis: -18.71
                },
                {
                        name: '40%',
                        yAxis: -15.49
                },
                {
                        name: '50%',
                        yAxis: -12.49
                },
                {
                        name: '60%',
                        yAxis: -9.69
                },
                ]
        }}]
};

echarts画对数坐标坐标[-0.2, 0.6],Y轴不等刻度问题_第1张图片

你可能感兴趣的:(echarts)