Skip to content

二、 折线图

1、普通折线图

js
const option = {
        title: {
            text: '顾客购买频率与销售关系',
            left: "center",
            top: "20px",
            textStyle: {
                color: "white"
            }
        },
        tooltip: {
            trigger: 'axis',
            formatter:(e)=>{
                return `平均购买次数:${e[0].name}次<br/>平均购买总价:${e[0].value.toFixed(2)}元`
            }
        },
        xAxis: {
            type: 'category',
            name: "平均购买次数",
            data: res.map(item => item.name),
            axisLine: {
                lineStyle: {
                    color: "#6BDCDE"	//改变坐标系x轴颜色
                }
            }
        },
        yAxis: {
            type: 'value',
            name: "平均购买总价",
            axisLine: {
                lineStyle: {
                    color: "#6BDCDE"		//改变坐标系y轴颜色
                }
            }
        },
        grid:{
            left: "70px",
            right:"100px"		//调整坐标系左右间隙
        },
        series: [
            {
                data: res.map(item => item.value),
                type: 'line',
                itemStyle: {
                    color: "#690CDA",  //修改线条颜色
                },
            }
        ]
    };