echarts常用配置笔记

x轴、y轴

xAxis: {
    axisTick: { 
        // 刻度线的显示隐藏
        show: false,
    },
    axisLabel: {
        textStyle: {
            // 修改轴线上的字体颜色
            color: '#757C7C'
        },
        // 轴线到轴字的距离
        margin: 19,
    },
    axisLine: {
        // 轴线的显示隐藏
        show: false,
        lineStyle: {
            // 修改轴线的颜色
            color: '#E7E7E7'
        }
    },
    splitLine: {
        // 网格线的显示隐藏
        show: true,
        // 网格线的颜色
        lineStyle: {
            color: '#EEEEEE'
        }
    },
    // y轴分段
    splitNumber: 4,
    // 坐标轴两边留白
    boundaryGap: false,
}

yAxis: {
    同上...
}

y轴固定0、20%、40%、60%、80%、100%  (y轴数据格式化)

yAxis: {
    max: 100,
    min: 0,
    interval:20
}

formatter: function(value, index){
    if(value) return `${value}%`
    return value
}

柱状图

series: [
    {
        type: 'bar',
        itemStyle: {
            // 柱状图的颜色
            color: '#6BAEB1',
            // 柱状图圆角
            barBorderRadius: [99, 99, 0, 0]
        },
        // 柱状图的宽度
        barWidth: '20'
    }
]

折线图

series: [
    {
        type: 'line',
        // 去掉折线图的拐点
        showSymbol: false,
        // 是否平滑曲线显示
        smooth: true,
        lineStyle: {
            // 折线的颜色
            color: '#84C0C1'
        },
        label: {
            // 是否显示标签
            show: true,
            // 标签位置
            position: 'top'
        },
        areaStyle: {
            //区域颜色，带透明度,带渐变
            // color: 'rgba(91,196,203,0.12)',
            color: {
                type: "linear-gradient",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    {
                        offset: 0,
                        color: "rgba(148,228,231,0.12)", // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: "rgba(91,196,203,0.12)", // 100% 处的颜色
                    }
                ]
            }
        }
    }
]

图例

legend: {
    // 图例类型
    icon: 'circle',
    // 图例大小
    itemWidth: 10,
    itemHeight: 10
}

// 图例颜色
color: ['#1F7CA9','#5FAEB0'],

tooltip

tooltip: {
    trigger: "axis",
    formatter: function (params) {
        var res = params[0].name;
        for (var i = 0; i < params.length; i++) {
            res +=
            "<br>" +
            params[i].marker +
            params[i].seriesName +
            "：" + params[i].data + '%'
        }
        return res;
    },
},