vue 使用创建二维数组响应数据渲染 echarts图标

客官°小女子只卖身不卖艺 2024-04-22 15:19 106阅读 0赞

> 目前我遇到的情况就是用动态的二维数组数据渲染echarts图标，我们从后端收到的接口一般是个一维数组，需要手动构建并且保证响应式。接下来我做了个案例

## 一、案例总逻辑 ##

> 1. 先创建一个vue项目
> 
> 2. 添加 echarts依赖
> 
> 3. 模拟数据请求，构建二维数组响应式数据，渲染图表

## 二、创建一个vite项目（也就是vue项目，但使用的是vite而不是webpack） ##

1.找到打开vite官网  
![3f4c0081b8014b4d84337222027f2e35.png][]

2. 运行创建命令

yarn create vite

![985e552a9e074fd3b81052649dc90e6d.png][]

3. 执行yarn install安装项目依赖，之后执行行yarn dev运行项目

![45d782e387bb43599b0b8f7b6100b282.png][]

##  ##

## 三、添加echarts依赖 ##

### 1. 搜索echarts官网   ![5a80ebdaad154caebb3f38f216f125d4.png][] ###

### 2. 添加依赖 ###

yarn add echarts

## 三、 模拟数据请求，构建二维数组响应式数据，渲染图表 ##

> 这里有两个问题值得注意  
> 1. 处理二维数组  
> 2. 异步请求数据：我目前的解决办法是，等数据请求完成再渲染图标。 当然也有第二种方式，就是向渲染空表，等待数据过来后，再执行一次 setOption

<script setup>
    import { ref, reactive, onMounted } from "vue";
    import * as echarts from 'echarts';
    let myChart;
    let data = reactive([]);
    onMounted(() => {
      //1. 初始化eharts的渲染节点
      const chartDom = document.getElementById("boxEcharts");
      myChart = echarts.init(chartDom);
      
      //2. 获取数据（模拟请求数据是异步的）
      setTimeout(()=>{
        /*
          目标数据格式
          [
            ["score", "amount", "product"],
            [89.3, 58212, "Matcha Latte"],
            [57.1, 78254, "Milk Tea"],
            [74.4, 41032, "Cheese Cocoa"],
            [50.1, 12755, "Cheese Brownie"],
            [89.7, 20145, "Matcha Cocoa"],
            [68.1, 79146, "Tea"],
            [19.6, 91852, "Orange Juice"],
            [10.6, 101852, "Lemon Juice"],
            [32.7, 20112, "Walnut Brownie"],
          ]
        */
        //请求回来的数据是一维对象数组
        let d1 = [
          {score: "score",amount: "amount",product: "product"},
          {score: 89.3,amount: 58212,product: "Matcha Latte"},
          {score: 57.1,amount: 78254,product: "Milk Tea"},
          {score: 74.4,amount: 41032,product: "Cheese Cocoa"}
        ];
        /*处理成二维数组*/
        let arr = [];      //定义一个数组，让它里面直接装数组
        d1.forEach(item=>{
          arr.push([item.score,item.amount,item.product]);
        });
        data.push(...arr); //将这个二维数组解构为 一维数组放进 定义好的响应数组中
        renderEcharts();
      },1500)
    });
    
    //3. 渲染图表
    const renderEcharts = () => {
      const option = {
        dataset: {
          source: data,
        },
        grid: { containLabel: true },
        xAxis: { name: "amount" },
        yAxis: { type: "category" },
        visualMap: {
          orient: "horizontal",
          left: "center",
          min: 10,
          max: 100,
          text: ["High Score", "Low Score"],
          // Map the score column to color
          dimension: 0,
          inRange: {
            color: ["#65B581", "#FFCE34", "#FD665F"],
          },
        },
        series: [
          {
            type: "bar",
            encode: {
              // Map the "amount" column to X axis.
              x: "amount",
              // Map the "product" column to Y axis
              y: "product",
            },
          },
        ],
      };
      option && myChart.setOption(option,true);
    };
    </script>
    
    <template>
      <div id="boxEcharts"></div>
    </template>
    
    <style scoped>
    #boxEcharts{
      width: 40vw;
      height: 40vh;
    }
    </style>

[3f4c0081b8014b4d84337222027f2e35.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/78228f5d07c94c61ba71ccd1cea8509b.png
[985e552a9e074fd3b81052649dc90e6d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/51f95c2d58a54b5fad42c160c44fdad3.png
[45d782e387bb43599b0b8f7b6100b282.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/000228425ee5487397d95c67726ccf1b.png
[5a80ebdaad154caebb3f38f216f125d4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/123788f7ba7d4ca188c32164e6462eca.png

发表评论取消回复

表情：

评论列表（有 0 条评论，106人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 使用创建二维数组响应数据渲染 echarts图标

目前我遇到的情况就是用动态的二维数组数据渲染echarts图标，我们从后端收到的接口一般是个一维数组，需要手动构建并且保证响应式。接下来我做了个案例。

客官°小女子只卖身不卖艺/ 2024年04月22日 15:19/ 0 赞/ 107 阅读

相关 Vue.js框架--绑定数据，对象，数组渲染数据（二）

HBuilder DEI 导入项目 ->文件|导入 ![70][] ![70 1][] 显示: ![70 2][] 介绍App.vue根文件有三个文件组合在一起（

秒速五厘米/ 2024年02月18日 23:18/ 0 赞/ 123 阅读

相关 java——基础数据类型——数组—— 一维数组、二维数组

一、一维数组数组作为对象，允许使用new关键字进行内存分配。在使用数组之前，必须首先定义数组变量所属的类型。 1、先声明，再用new运算符进行内存分配声明一维数组有以

不念不忘少年蓝@/ 2023年10月03日 17:00/ 0 赞/ 130 阅读

相关 vue2+echarts：使用后台传输的json数据去动态渲染echarts图表

1.源码 1.说明只提供子组件代码，totalData 是从父组件传输过来的数据，其数据格式如下: ![a87d9943fa6c4828a49e

忘是亡心i/ 2023年09月27日 10:39/ 0 赞/ 95 阅读

相关使用指针操作二维数组；输出二维数组

问题描述用数组指针操作二维数组，并将二维数组输出程序代码程序1 include <stdio.h> / csdn学院--2016级

r囧r小猫/ 2022年06月06日 03:17/ 0 赞/ 371 阅读

相关 Java--创建一个二维数组

这里写四种创建数组的方式： 1， float f[][] = new float[6][6]; 2, float []f[] = new float[6

短命女/ 2022年05月27日 09:56/ 0 赞/ 504 阅读

相关 python创建二维数组

Python中想要创建一个二维数组： aList = \[\[0\] \ cols for i inrange(rows)\] 如果在Python中想

左手的ㄟ右手/ 2022年05月26日 10:29/ 0 赞/ 331 阅读

相关使用二维数组处理数据

二维数组初体验为一个二维数组的元素赋值，显示矩阵，求出最大元素，并显示次矩阵的转置矩阵。代码： include<stdio.h> include<

约定不等于承诺〃/ 2022年04月22日 11:40/ 0 赞/ 228 阅读

相关 echarts图标使用（一）

var data = []; // Parametric curve // for (var t = 0; t < 25; t += 0.001) {

矫情吗；*/ 2021年11月26日 11:46/ 0 赞/ 448 阅读

相关 vue 将二维数组转化为一维数组

需求 `数组嵌套数据，导致循环不方便，想着将二维数组合并成一维数据，方便数据的操作` 具体实现 `利用reduce方法` `reduce：不改变原数组，返回一个

素颜马尾好姑娘i/ 2021年09月01日 11:59/ 0 赞/ 664 阅读