Echarts折线图Line_echarts series-line name-优快云博客

本文链接：https://blog.youkuaiyun.com/EmptyPointer/article/details/108509558
本文详细介绍了如何使用ECharts库配置折线图，包括图表标题、提示框、图例、工具箱、网格布局、X轴、Y轴及系列数据的设置。通过示例展示了如何动态加载数据并更新图表，适用于前端开发人员学习和参考。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<script type="text/javascript">

// 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
        // 图表标题
        title: {
            text: '折线图Line'
        },
        // 提示框
        tooltip : {
            trigger: 'axis',          //// 触发类型，默认数据触发，见下图，可选为：'item' / 'axis'
            textStyle:{align:'left'}  //显示的数据居左
            
        /*  设置显示数据中标题居中，其它数据居左显示
            formatter : function(params) {
                var result = params[0].name;
                var results = params[1].name;
                result += '<p style="text-align: center;">'+params[0].name+'</p>';
                    params.forEach(function(item) {
                    results +='<div style="text-align: left;line-height:10px;padding-bottom:5px">'
                    results += '<br/>';
                    results += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>';
                    results += item.seriesName + "：";
                    results += isNaN(item.value) ? 0 : item.value;
                    results +='</div>'
                });
                return results;
            } 
        */
            
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        // 图例
        legend: {            //使上方标题(上古卷轴5 天际、正当防卫3、辐射4、GTA5、巫师3)x轴居中，y轴20
            x : 'center',   
            y : '20',
            data:['上古卷轴5 天际','正当防卫3','辐射4','GTA5','巫师3']
        },
        toolbox: {
            feature: {
                saveAsImage: {}        //保存为图片
            }
        },
        grid: {             //x轴、y轴的显示位置
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [            //x轴的数据和样式
            {
                type : 'category',
                name: 'x',          
                boundaryGap : false,
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        //系列中的数据内容数组通常为具体的数据项，通常来说数据用一个二维数组表示。如下，每一列被称为一个[维度]。
        series : [            
            {
                name:'上古卷轴5 天际',
                type:'line',
                stack: '总量',
                areaStyle: {},
                data:[100, 132, 101, 134, 90, 230, 216]
            },
            {
                name:'正当防卫3',
                type:'line',
                stack: '总量',
                areaStyle: {},
                data:[210, 182, 191, 234, 290, 330, 320]
            },
            {
                name:'辐射4',
                type:'line',
                stack: '总量',
                areaStyle: {},
                data:[150, 232, 201, 154, 190, 330, 410]
            },
            {
                name:'GTA5',
                type:'line',
                stack: '总量',
                areaStyle: {normal: {}},    //折线之间的颜色样式(如：GTA5与辐射4之间)
                data:[320, 452, 301, 374, 390, 350, 380]
            },
            {
                name:'巫师3',
                type:'line',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                areaStyle: {normal: {}},     //折线之间的颜色样式(如：巫师3与GTA5之间)
                data:[820, 932, 901, 934, 1290, 1030, 1320]
            }
        ]
    }; 

    
    $.ajax({
        type : "post",
        async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url :"请求的路径",    
        data : {},
        dataType : "json",       //返回数据形式为json
        success : function(result) {
            option.title.text='折线图Line';
            option.xAxis.data = result.xData;
            option.legend.data = result.legend;           
            option.yAxis={type: 'value'};
            option.series=result.series;
            myChart.hideLoading();     
            myChart.setOption(option); 
        },
        error : function(errorMsg) {
            //请求失败时执行该函数
            alert("折线图Line请求数据失败!");
        }
    })
    // 使用刚指定的配置项和数据显示折线图Line。
    myChart.setOption(option); 
     
</script>
具体折线图展示如下：