Echarts 折线图实现多条折线

妖狐艹你老母 2022-12-25 00:51 282阅读 0赞

官方例子：[Examples - Apache ECharts (incubating)][Examples - Apache ECharts _incubating]

官方文档：[Documentation - Apache ECharts(incubating)][Documentation - Apache ECharts_incubating]

必须要的属性：xAxis、yAxis、series

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTUzMzkz_size_16_color_FFFFFF_t_70][]

实现步骤：

# 1.定义容器，存放图表 #

样式：

# 2.数据结构 数组形式 #

let Xdata=[1,2,3,4,5]
    let Ydata=[1,2,3,4,5]

# 3.option配置 #

option = {
        legend:{
            data: ["本周", "上周"],
            textStyle: {fontSize: 16}
        },
        xAxis: {
            type: 'category',
            data: ["2020-11-16", "2020-11-17", "2020-11-18", "2020-11-19", "2020-11-20", "2020-11-21", "2020-11-22"]
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [3293.5,3945.6,3760.9,996.6,3481.6,4514.9,3223.5],
                name: "本周",
                smooth: true,
                type: "line"
            },
            {
                data: [1553.9,1180.8,2583.9,2488.5,1890,1881.3,3258.5],
                name: "上周",
                smooth: true,
                type: "line"
                
            }
            ]
    };

遇到什么问题，可留言，看到会尽快回复。

[Examples - Apache ECharts _incubating]: https://echarts.apache.org/examples/zh/editor.html?c=line-simple
[Documentation - Apache ECharts_incubating]: https://echarts.apache.org/zh/option.html#series-line.type
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTUzMzkz_size_16_color_FFFFFF_t_70]: /images/20221120/e762a72197bb4b4396170c1d781f377f.png