使用echarts遇到的一些问题

效果图：

1.折线图某个拐点显示数据

在需要显示的拐点数据中添加label，show:true。

data: [{
    value: 1888,
}, {
    value: 20888,
}, {
    value: 20555,
}, {
    value: 20999,
    symbol: 'image://' + require('@/static/images/yuebao/yuebao_yuan.png'),
    symbolSize: 10,
    label: {
        normal: {
            show: true,
            fontSize: '10',
            color: '#fff',
            width: 50,
            height: 27,
            align: 'center',
            lineHeight: 25,
            backgroundColor: {
                image: `${require('@/static/images/yuebao/yuebao_zxbgc.png')}`
            },
            rich: {},
            position: [7, -25],
        }
    },
}],

2.给series下的label设置背景图

这里面有一个巨坑，给背景图加宽高不起作用，需要加rich:{}才行。

label: {
    normal: {
        show: true,
        fontSize: '10',
        color: '#fff',
        width: 50,
        height: 27,
        align: 'center',
        lineHeight: 25,
        backgroundColor: {
            image: `${require('@/static/images/yuebao/yuebao_zxbgc.png')}` 
        },
        rich: {},
        position: [7, -25],
    }
},

3.给折线图拐点添加自定义图片

隐藏其他默认的拐点在series下添加symbol:'none'。 

symbol: 'image://' + require('@/static/images/yuebao/yuebao_yuan.png'),
symbolSize: 10,

4.echarts铺满整个div

grid: {
    top: "0px",
    left: "0px",
    right: "0px",
    bottom: "0px",
},

可根据情况修改值。

5.让X轴的刻度线朝内，且刻度线居中

添加位置：xAxis>axisTick>inside: true。

inside: true,//朝里
alignWithLabel: true,//居中

6.边界处拐点、label显示不全

我自己的方案是相对加大div的高度，然后设置grid下面的top。

demo：

let myChart = Echarts.init(document.getElementById('myecharts'));
let option = {
    xAxis: {
        type: 'category',
        data: ['第一周', '第二周', '第三周', '第四周'],
        axisLabel: {
            inside: false,
            textStyle: {
                color: '#000',
                fontSize: '10',
                itemSize: ''
            }
        },
        axisLine: {
            lineStyle: {
                color: '#eaeaea',
            }
        },
        axisTick: {
            lineStyle: {
                color: '#88bdff',
                width: 3
            },
            alignWithLabel: true,
            inside: true,
        },
    },
    yAxis: {
        type: 'value',
        splitLine: {
            show: true,
            lineStyle: {
                color: ['#eaeaea'],
                width: 1,
                type: 'solid'
            }
        }
    },
    series: [{
        data: [{
            value: 1888,
        }, {
            value: 20888,
        }, {
            value: 20555,
        }, {
            value: 20999,
            symbol: 'image://' + require('@/static/images/yuebao/yuebao_yuan.png'),
            symbolSize: 10,
            label: {
                normal: {
                    show: true,
                    fontSize: '10',
                    color: '#fff',
                    width: 50,
                    height: 27,
                    align: 'center',
                    lineHeight: 25,
                    backgroundColor: {
                        image: `${require('@/static/images/yuebao/yuebao_zxbgc.png')}` // 这是vue写法，不是的按原来的写就行
                    },
                    rich: {},
                    position: [7, -25],
                }
            },
        }],
        symbol: "none",
        type: 'line',
        smooth: true,
        itemStyle: {
            normal: {
                lineStyle: {
                    color: "#74b5ff" //折线的颜色
                }
            }
        }
    }],
    grid: {
        top: "30px",
        left: "-2px",
        right: "0px",
        bottom: "20px",
    },
};
myChart.setOption(option);

这篇文章的配置说明很全面：

使用Echarts柱形图属性解读大全_JackieDYH的博客-CSDN博客_echarts柱状图属性大全