vue项目用echarts画折线区域图，并进行相关参数配置。

最新推荐文章于 2025-01-07 12:55:42 发布

原创

最新推荐文章于 2025-01-07 12:55:42 发布 · 194 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript

本文介绍了如何在Vue项目中利用Echarts库绘制折线图来展示河堤数据，同时结合区域图分别展示水流和河底的数据变化。通过配置Echarts参数，可以实现数据的可视化呈现。

要求

显示一条折线图表示河堤数据，两条区域图分别显示水流和河底数据。

效果

在这里插入图片描述

实现

 <div id="charts1"  class="ct1"></div>

//获取数据
getData() {
   
   
      getDataApi().then((res) => {
   
   
        if (res.status == 200) {
   
   
          let data = res.data.data;
          let arr = {
   
   
            x: [],
            y1: [],
            y2: [],
            y3: [],
          };
          data.forEach((item) => {
   
   
            arr.x.push(item.distance + "公里");
            arr.y1.push(item.leveeElevation);
            arr.y2.push(item.v0);
            arr.<