模拟数据绘制多条折线图


[
    {
        area:"A区",
        total:[
            {
                [1,20]
            },
            {
                [2,30]
            },
            {
                [3,50]
            },
        ]
    },
    {
        area:"B区",
        total:[
            {
                [1,50]
            },
            {
                [2,70]
            },
            {
                [3,80]
            },
        ]
    }
]

如何使用上述模拟数据，用Echarts绘制多条折线图，X轴为1,2,3月，Y轴为对应的数据

img


<template>
  <div>
    <!-- 折线图 -->
    <div id="chartmainbar" style="width: 600px; height: 250px"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [
        {
          area: "A区",
          total: [
            [1, 20],
            [2, 30],
            [3, 50]
          ]
        },
        {
          area: "B区",
          total: [
            [1, 50],
            [2, 70],
            [3, 80]
          ]
        }
      ]
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.draw();
    });
  },
  methods: {
    draw: function () {
      let chartmainbar = this.$echarts.init(
        document.getElementById("chartmainbar")
      );

      let formattedData = this.data.map(item => ({
        area: item.area,
        total: item.total.map(entry => [this.mapMonth(entry[0]), entry[1]])
      }));

      // 配置项
      var option = {
        title: {
          text: "多条折线图示例"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: formattedData.map(item => item.area)
        },
        xAxis: {
          type: "category",
          data: ["1月", "2月", "3月"]
        },
        yAxis: {
          type: "value"
        },
        series: formattedData.map(item => ({
          name: item.area,
          type: "line",
          data: item.total
        }))
      };

      // 绘制图表
      chartmainbar.setOption(option);
    },
    mapMonth: function (value) {
      // 将数字映射到对应的月份
      return value + "月";
    }
  }
};
</script>

【以下回答由 GPT 生成】

解决方案：

要使用Echarts绘制多条折线图，首先需要引入Echarts库，然后创建一个包含柱状图的div容器，并设置好样式。

下面是使用上述模拟数据绘制多条折线图的代码示例：

首先，在html文件中引入Echarts的脚本文件，并在body中添加一个用于显示图表的div容器，代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>多条折线图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>

    <script>
        // 模拟数据
        var data = [
            {
                area: "A区",
                total: [
                    [1, 20],
                    [2, 30],
                    [3, 50]
                ]
            },
            {
                area: "B区",
                total: [
                    [1, 50],
                    [2, 70],
                    [3, 80]
                ]
            }
        ];

        // 创建echarts实例
        var chart = echarts.init(document.getElementById('chart'));

        // 设置配置项
        var option = {
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月']
            },
            yAxis: {
                type: 'value'
            },
            series: []
        };

        // 根据模拟数据动态生成折线图数据
        for (var i = 0; i < data.length; i++) {
            var seriesData = {
                name: data[i].area,
                type: 'line',
                data: data[i].total
            };
            option.series.push(seriesData);
        }

        // 使用配置项进行绘图
        chart.setOption(option);
    </script>
</body>
</html>

这段代码中，我们首先创建了一个包含id为"chart"的div容器，用于显示图表。然后使用模拟数据创建了一个Echarts实例，然后设置x轴和y轴的类型和数据，创建一个空的series数组，然后根据模拟数据动态生成折线图数据，最后使用配置项进行绘图。

以上代码在浏览器中运行后，会在页面上显示一个多条折线图，其中x轴为1月、2月、3月，y轴为对应的数据。其中A区和B区分别表示两条折线图的名称。



【相关推荐】



如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^