Vue+Echarts 项目演练（下）收尾工作图表绘制

最新推荐文章于 2023-08-21 13:57:51 发布
最新推荐文章于 2023-08-21 13:57:51 发布
阅读量933 收藏 4
点赞数 3
分类专栏： 前端vue 文章标签： vue.js echarts javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dafsq/article/details/130345189
版权

设置销售总量图表

中心容器地图设置

产品库存统计图

产品类别图表 

项目可视化完结-整体展示 

设置销售总量图表

        在第一个容器中进行图表设置

<template>
    <div>
    <h2>A</h2>
    <div class="chart" id="oneChart">
    容纳后期的图表
    </div>
    </div>
    </template>
    
    <script>
    import { inject, onMounted } from "vue";
    import axios from "axios"; // 引入 axios

    export default {
    setup() {
        let $echarts = inject("echarts");
            
        let $http = axios.create({
        baseURL: "http://localhost:3000", // 设置默认 base url
        timeout: 5000, // 设置超时时间
        });

        //设置请求
        async function getState() {
        let chartData = await $http.get("/one/data"); // 调用 get 方法获取数据
        console.log(chartData);
        }

        onMounted(() => {
        //钩子函数
        //调用请求
        getState();

        let mc = $echarts.init(document.getElementById("oneChart")); //初始化图表

        mc.setOption({
            xAxis: {
            type: "value", //数值轴
            },
            yAxis: {
            type: "category", //类目轴
            },
            servies: [
            {
                type: "bar",
            },
            ],
        });
        });

        return {
        getState,
        };
    },
    };

    </script>
    
    <style scoped>
        h2{
        /* 48像素 */
        height: 0.6rem;
        color: #fff;
        line-height: 0.6rem;
        text-align: center;
        font-size: 0.25rem;
        }
        .chart{
        /* 高度360 */
        height: 4.5rem;
        background-color: gray;
        }
    </style>

         在控制台输出中查看请求的对象信息，我们可以看到需要的数据在charData中

        找到并在控制台输出

console.log(chartData.data.chartData1.chartData);

         在控制台中查看得到的对应数据

        处理与转换数据

        我们请求来的数据事一个数组对象 那么我们需要把x 轴的数据于 y 轴的数据取出来变成两个数组方便 echarts使用
        
        引入reactive： 

<template>
    <div>
    <h2>A</h2>
    <div class="chart" id="oneChart">
    容纳后期的图表
    </div>
    </div>
    </template>
    
    <script>
    import { inject, onMounted , reactive} from "vue";
    import axios from "axios"; // 引入 axios
    export default {
    setup() {
        let $echarts = inject("echarts");

        let $http = axios.create({ //设置基准路径
        baseURL: "http://localhost:3000", // 设置默认 base url
        timeout: 5000, // 设置超时时间
        });

        //创建数据
        let data = reactive({});
        let xdata = reactive([]);
        let ydata = reactive([]);

        //处理数据
        function setData(){
            xdata = data.data.chartData1.chartData.map(v => v.title)
            ydata = data.data.chartData1.chartData.map(v => v.num)
            console.log(xdata)
            console.log(ydata)
        }

        //设置请求
        async function getState() {
        data = await $http.get("/one/data"); // 调用 get 方法获取数据
        //console.log(chartData.data.chartData1.chartData);
        }

        onMounted(() => {
        //钩子函数
        //调用请求
        getState().then(() => { //当请求完成调用
            //调用处理数据
            setData();
        })
        

        let mc = $echarts.init(document.getElementById("oneChart")); //初始化图表

        mc.setOption({
            xAxis: {
            type: "value", //数值轴
            },
            yAxis: {
            type: "category", //类目轴
            },
            servies: [
            {
                type: "bar",
            },
            ],
        });
        });

        return {
        getState,data,xdata,ydata,setData
        };
    },
    };

    </script>
    
    <style scoped>
        h2{
        /* 48像素 */
        height: 0.6rem;
        color: #fff;
        line-height: 0.6rem;
        text-align: center;
        font-size: 0.25rem;
        }
        .chart{
        /* 高度360 */
        height: 4.5rem;
        background-color: gray;
        }
    </style>

        在控制台中查看输出的处理后的数据

         将数据往页面中图表插入

将初始化图表放到页面加载后初始化，图表类目信息因依赖请求数据则放在请求数据调用中

<template>
    <div>
      <h2>销售总量</h2>
      <div class="chart" id="oneChart">容纳后期的图表</div>
    </div>
  </template>
  
  <script>
  import { inject, onMounted, reactive } from "vue";
  import axios from "axios"; // 引入 axios
  export default {
    setup() {
      let $echarts = inject("echarts");
  
      let $http = axios.create({
        //设置基准路径
        baseURL: "http://localhost:3000", // 设置默认 base url
        timeout: 5000, // 设置超时时间
      });
  
      //创建数据
      let data = reactive({});
      let xdata = reactive([]);
      let ydata = reactive([]);
  
      //处理数据
      function setData() {
        xdata.value = data.data.chartData1.chartData.map((v) => v.title);
        ydata.value = data.data.chartData1.chartData.map((v) => v.num);
        console.log(xdata.value);
        console.log(ydata.value);
      }
  
      //设置请求
      async function getData() {
        try {
          data = await $http.get("/one/data"); // 调用 get 方法获取数据
          //console.log(chartData.data.chartData1.chartData);
  
          //调用处理数据
          setData();
        } catch (err) {
          // 处理请求错误
          console.error(err);
        }
      }
  
      onMounted(() => {
        let mc = $echarts.init(document.getElementById("oneChart")); //初始化图表
        //钩子函数
        //调用请求
        getData().then(() => {
          mc.setOption({
            xAxis: {
              type: "value", //数值轴
            },
            yAxis: {
              type: "category", //类目轴
              data: xdata.value,
            },
            series: [
              {
                type: "bar", //柱状图
                data: ydata.value,
                itemStyle:{
                    normal:{
                        barBorderRadius:[0,20,20,0] //设置柱形顶端为圆角
                    } 
                }
              },
            ],
          });
        });
      });
  
      return { getData, data, xdata, ydata };
    },
  };
  </script>
  
  <style scoped>
  h2 {
    /* 48像素 */
    height: 0.6rem;
    color: #fff;
    line-height: 0.6rem;
    text-align: center;
    font-size: 0.25rem;
  }
  .chart {
    /* 高度360 */
    height: 400px;
    width: 500px;
    background-color: white;
  }
  </style>

 ​​​        页面中查看第一个图表容器的效果

中心容器地图设置

 在public目录下新建map文件用于存放地图数据

数据0积分免费下载：https://download.csdn.net/download/dafsq/87723433?spm=1001.2014.3001.5501

         目录下创建中心容器组件文件

         因为文件在本项目之下所以直接在本地端口获取数据

         在主页面对该组件进行引用

<template>
  <div>
    <header>
      <h1>可视化项目</h1>
    </header>
    <!--大容器-->
    <section class="cot">
      <!-- 左容器 -->
      <section class="itemLeft">
        <ItemPage>
          <itmeA />
        </ItemPage>

        <ItemPage>
          <itmeB />
        </ItemPage>
      </section>
      <!-- 中容器 -->
      <section class="itemCenter">
        <mapPage/>
      </section>
      <!-- 右容器 -->
      <section class="itemRight">
        <ItemPage>
          <itmeC />
        </ItemPage>

        <ItemPage>
          <itmeD />
        </ItemPage>
      </section>
    </section>
  </div>
</template>

<script>
import ItemPage from "@/components/itemPage.vue";

import itmeA from "@/components/itmeA.vue";
import itmeB from "@/components/itmeB.vue";
import itmeC from "@/components/itmeC.vue";
import itmeD from "@/components/itmeD.vue";
import mapPage from "@/components/mapPage.vue";

import { inject } from "vue"; //引入inject接受数据
export default {
  setup() {
    //inject("名字")
    let $echarts = inject("echarts");
    console.log($echarts);
    let $http = inject("axios");
    console.log($http);
  },

  //调用组件
  components: {
    ItemPage,
    itmeA,
    itmeB,
    itmeC,
    itmeD,
    mapPage
  },
};
</script>

        对中间容器组件进行设置 

<template>
    <div class="map"></div>
</template>

<script>
//引用
import axios from 'axios'; 
import { onMounted , reactive } from 'vue';

export default {
    
    setup(){
        const mapData = reactive({}); // 将 mapData 定义为响应式对象
        
        async function getState(){
            const response = await axios.get('http://localhost:8080/map/china-cities.json'); // 获取响应结果
            mapData.data = response.data; // 将响应结果赋值给响应式对象的属性
        }

        onMounted(() =>{
            getState().then(() => {
                console.log(mapData) // 打印响应式数据
            })
        })

        // 返回响应式对象，以及获取请求数据的方法
        return{
            getState,mapData
        }
    }

}
</script>

<style>
.map{
    width: 100%;
    height: 100%;
}
</style>

 查看控制台输出的页面信息 并找到数据

        渲染地图 

<template>
    <div class="map" id="map"></div>
</template>

<script>
//引用
import axios from 'axios'; 
import { onMounted , reactive, inject } from 'vue';


export default {

    setup(){
        let $echarts = inject("echarts");

        const mapData = reactive({}); // 将 mapData 定义为响应式对象
        
        async function getState(){
            const response = await axios.get('http://localhost:8080/map/china-cities.json'); // 获取响应结果
            mapData.data = response.data; // 将响应结果赋值给响应式对象的属性
        }

        onMounted(() =>{
            getState().then(() => {
                //console.log(mapData.data.features) // 打印响应式数据

                //设置地图
                $echarts.registerMap("china",mapData.data)

            let mc = $echarts.init(document.getElementById("map")) //初始化
            mc.setOption({
                geo:{
                    map:"china"
                }
            })

            })
        })

        // 返回响应式对象，以及获取请求数据的方法
        return{
            getState,mapData
        }
    }

}
</script>

<style>
.map{
    width: 100%;
    height: 100%;
}
</style>

产品月销统计分析图

        在组件B下面中进行产品统计图设置

                在控制台中查看数据 并找到需要的数据


    <script setup>
     //引用模块
    import {inject,onMounted,reactive} from "vue";
    import axios from "axios"; // 引入 axios

    const $echarts = inject("echarts");
    const $http = axios.create(
      {
        baseURL: "http://localhost:3000", // 设置默认 base url
        timeout: 5000, // 设置超时时间
      }
    );

    //定义数据存储变量
    let data = reactive({})
    //获取数据
    async function getState(){
      data = await $http({url:"/two/data"})
      console.log(data)
      
    }

    </script>

         在获取数据的函数中得到需要的具体数据并将其返回

//获取数据
    async function getState(){
      data = await $http({url:"/two/data"})
      //console.log(data)
      return data.data.chartData3.chartData
      
    }

        完成绘图设置

<template>
  <div>
  <h2>周销售图</h2>
  <div class="chart" id="chart">
  容纳后期的图表
  </div>
  </div>
  </template>

  <script setup>
   //引用模块
  import {inject,onMounted,reactive} from "vue";
  import axios from "axios"; // 引入 axios

  const $echarts = inject("echarts");
  const $http = axios.create(
    {
      baseURL: "http://localhost:3000", // 设置默认 base url
      timeout: 5000, // 设置超时时间
    }
  );

  //定义数据存储变量
  let data = reactive({})
  //获取数据
  async function getState(){
    data = await $http({url:"/two/data"})
    //console.log(data)
    return data.data.chartData2.chartData
    
  }

  onMounted(() => {
    getState().then(() => {
      let mc = $echarts.init(document.getElementById("chart"))
      mc.setOption({
        legend:{

        },
        xAxis:{
          type:"category", //设置类目轴
          data:data.data.chartData2.chartData.day,
        },
        yAxis:{
          type:"value"
        },
        series:[
          {
            name:"服饰",
            type:"line",
            data:data.data.chartData2.chartData.num.Chemicals,
          },
          {
            name:"数码",
            type:"line",
            data:data.data.chartData2.chartData.num.Clothes,
          },
          {
            name:"家电",
            type:"line",
            data:data.data.chartData2.chartData.num.digit,
          },
          {
            name:"家居",
            type:"line",
            data:data.data.chartData2.chartData.num.Electrical,
          },
          {
            name:"日化",
            type:"line",
            data:data.data.chartData2.chartData.num.gear,
          }
        ]
    
      })
    })
  })

  </script>
  
  <style scoped>
  h2 {
    /* 48像素 */
    height: 0.6rem;
    color: #fff;
    line-height: 0.6rem;
    text-align: center;
    font-size: 0.25rem;
  }
  .chart {
    /* 高度360 */
    height: 400px;
    width: 500px;
    background-color: white;
  }
  </style>

        运行查看 

 产品库存统计图

        在组件C下面中进行产品库存统计图设置

         在控制台中查看数据 并找到需要的数据

    <script setup>
     //引用模块
    import {inject,onMounted,reactive} from "vue";
    import axios from "axios"; // 引入 axios

    const $echarts = inject("echarts");
    const $http = axios.create(
      {
        baseURL: "http://localhost:3000", // 设置默认 base url
        timeout: 5000, // 设置超时时间
      }
    );

    //定义数据存储变量
    let data = reactive({})
    //获取数据
    async function getState(){
      data = await $http({url:"/three/data"})
      console.log(data)
      //return data.data.chartData3.chartData
      
    }

    </script>

         在获取数据的函数中得到需要的具体数据并将其返回

    //获取数据
    async function getState(){
      data = await $http({url:"/three/data"})
      //console.log(data)
      return data.data.chartData3.chartData
      
    }

         完成绘图设置

<template>
    <div>
    <h2>产品库存统计图</h2>
    <div class="chart" id="chartO">
    容纳后期的图表
    </div>
    </div>
    </template>

    <script setup>
     //引用模块
    import {inject,onMounted,reactive} from "vue";
    import axios from "axios"; // 引入 axios

    const $echarts = inject("echarts");
    const $http = axios.create(
      {
        baseURL: "http://localhost:3000", // 设置默认 base url
        timeout: 5000, // 设置超时时间
      }
    );

    //定义数据存储变量
    let data = reactive({})
    //获取数据
    async function getState(){
      data = await $http({url:"/three/data"})
      //console.log(data)
      return data.data.chartData3.chartData
      
    }

    onMounted(() => {
      getState().then(() => {
        let mc = $echarts.init(document.getElementById("chartO"))
        mc.setOption({
          legend:{ //图例
                },
          series:[
            {
              type:"pie",
              data:data.data.chartData3.chartData,
              redius:[],//设置内外直径
              roseType:"area",//设置为兰丁格尔玫瑰图
              itemStyle:{
                borderRadius:10 //设置为圆角
              }
            },
          ]
        })
      })
    })

    </script>
    
    <style scoped>
    h2 {
      /* 48像素 */
      height: 0.6rem;
      color: #fff;
      line-height: 0.6rem;
      text-align: center;
      font-size: 0.25rem;
    }
    .chart {
      /* 高度360 */
      height: 400px;
      width: 500px;
      background-color: white;
    }
    </style>

        运行查看 

产品类别图表 

        在组件D下面中进行产品库存统计图设置

        在控制台中查看数据 并找到需要的数据

<template>
  <div>
  <h2>产品类别图表</h2>
  <div class="chart" id="chartD">
  容纳后期的图表
  </div>
  </div>
  </template>

  <script setup>
   //引用模块
  import {inject,onMounted,reactive} from "vue";
  import axios from "axios"; // 引入 axios

  const $echarts = inject("echarts");
  const $http = axios.create(
    {
      baseURL: "http://localhost:3000", // 设置默认 base url
      timeout: 5000, // 设置超时时间
    }
  );

  //定义数据存储变量
  let data = reactive({})
  //获取数据
  async function getState(){
    data = await $http({url:"/four/data"})
    //console.log(data)
    return data.data.chartData4.chartData
    
  }

  onMounted(() => {
    getState().then(() => {
      let mc = $echarts.init(document.getElementById("chartD"))
      mc.setOption({
        legend:{ //图例
              },
      })
    })
  })

  </script>

 完成绘图设置

<template>
  <div>
  <h2>产品类别图表</h2>
  <div class="chart" id="chartD">
  容纳后期的图表
  </div>
  </div>
  </template>

  <script setup>
   //引用模块
  import {inject,onMounted,reactive} from "vue";
  import axios from "axios"; // 引入 axios

  const $echarts = inject("echarts");
  const $http = axios.create(
    {
      baseURL: "http://localhost:3000", // 设置默认 base url
      timeout: 5000, // 设置超时时间
    }
  );

  //定义数据存储变量
  let data = reactive({})
  //获取数据
  async function getState(){
    data = await $http({url:"/four/data"})
    //console.log(data)
    return data.data.chartData4.chartData
    
  }

  onMounted(() => {
    getState().then(() => {
      let mc = $echarts.init(document.getElementById("chartD"))
      mc.setOption({
        legend:{ //图例
              },
        xAxis:{
          type:"category",//设为类目轴
          data:data.data.chartData4.chartData.day,
        },
        yAxis:{
          type:"value",
        },
        series:[
          {
            name:"服饰",
            type:"bar",
            data:data.data.chartData4.chartData.num.Clothes
          },
          {
            name:"数码",
            type:"bar",
            data:data.data.chartData4.chartData.num.digit
          },
          {
            name:"家电",
            type:"bar",
            data:data.data.chartData4.chartData.num.Electrical
          },
          {
            name:"家居",
            type:"bar",
            data:data.data.chartData4.chartData.num.gear
          },
          {
            name:"日化",
            type:"bar",
            data:data.data.chartData4.chartData.num.Chemicals
          }
        ]
      })
    })
  })

  </script>
    
    <style scoped>
    h2 {
      /* 48像素 */
      height: 0.6rem;
      color: #fff;
      line-height: 0.6rem;
      text-align: center;
      font-size: 0.25rem;
    }
    .chart {
      /* 高度360 */
      height: 400px;
      width: 500px;
      background-color: white;
    }
    </style>

         运行查看 

项目可视化完结-整体展示 

open_test01
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
echarts做企业关系图谱_知识图谱与GCN结合起来针对长尾样本做远程监督关系抽取（NAACL-2019）...
weixin_30682043的博客
12-27 257
Long-tail Relation Extraction via Knowledge Graph Embeddings and Graph Convolution Networkshttps://www.aclweb.org/anthology/N19-1306/​www.aclweb.org论文发表在NAACL-2019上这篇论文的遗憾就是没能要来源码啊～我觉得现阶段，大部分远程监督工作主要解...
Echarts --- 可视化练习（radar01）
懂得一千零一种,赋予你失败的方法！
11-13 476
Echarts — 可视化练习（radar01） 落画素描，入景山水。平仄韵达的诗意，畅悠了季节的孤漠，拾起淡漠唐风的音符，装在七弦琴上，拨弹着日月，校音着声律。花落流水春风绿，一捧桃花醉月光。一笺长长的心卷，任凭风吹过往，一夜风流记否几页故事，长鸣萧声书时光。昏沉的灯光，朦胧了善良的心灵，沉沦了一段暗黑的歌舞。迷离中，风干了人性，吹瘦了人心。 # -*- coding: utf-8 # @Time : 2020/11/11 16:43 # @Author : ZYX # @File
echarts入门练习——零基础小白首次尝试
weixin_44353999的博客
09-13 429
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>柱状.
echarts柱状图自定义图例，以及末端显示自己想要得到图片
热门推荐
weixin_43964779的博客
02-26 1万+
&lt;div id="main" style="width:2000px;height:1200px"&gt;&lt;/div&gt; 先来一个简简单单的 // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); var option = { xAxi...
vue3+Echarts-数据可视化项目实践
最新发布
qq_53541336的博客
08-21 1653
本次案例是使用vue3和Echarts图表进行实现的，整个书写代码过程相对来说还算比较简单，易于理解，项目开始之初肯定离不开框架的搭建，vue框架的搭建这里主要使用的是vue-cli来构建项目，不过小伙伴们也可以使用vite来构建，这个可能相对来说需要后期自己去书写里面的比如像路由这些。今天来讲解一下最近工作中学习到的一些新的知识点，也是自己第一次接触到的新内容，和小伙伴们一起分享学习下。(4)最后就是后端数据，需要另外新建文件夹，在里面书写各个图表的数据，这里将具体的数据文档放置。
Vue+Echarts 项目演练 中心地图容器json数据
04-24
Vue+Echarts 项目演练 中心地图容器json数据
vue+echarts实现动态绘制图表及异步加载数据的方法
10-17
vue写的后台管理，需要将表格数据绘制成图表（折线图，柱状图），图表数据都是通过接口请求回来的。这篇文章主要介绍了vue+echarts 动态绘制图表及异步加载数据的相关知识,需要的朋友可以参考下
Vue+Echarts监控大屏实例九：智慧园区监控模板实例
05-21
Vue+Echarts监控大屏实例九：智慧园区监控模板实例，包括源码，开发文档、素材等。 使用vue-echarts实现监控大屏搭建，开发，实现对于监控界面的相关开发资料，提供实例源码、开发过程视频及实现过程。 高德地图并...
monitor:vue + echarts 可视化拖拽图表项目
04-12
可拖拽大屏演示系统，目的是为了能够方便大屏系统的快捷生成，通过拖拽的方式完成图表的搭建。 不用关心设置图表的尺寸，拉伸图表即可控制大小。 能够保存图表在页面上的位置信息，大小信息，下次打开时可还原上次...
vue+echarts+element ui+django 前后端分离考勤系统源码.zip
05-08
vue+echarts+element ui+django 前后端分离考勤系统源码 vue+echarts+element ui+django 前后端分离考勤系统源码 vue+echarts+element ui+django 前后端分离考勤系统源码 vue+echarts+...
echarts.js销售收入图表实例
07-24
echarts.js销售收入图表实例是一款常用的销售统计图表实例代码。
Echarts学习笔记7（后台、地图展示、4个图表、打包、服务器购买、前后台上线）
weixin_60968779的博客
05-01 414
container
vue3中使用echarts初次渲染图表十分小的问题及解决方法
小绵杨
03-08 3024
项目场景：vue3中引入了echarts图表，在onMounted中初始化图表。vue3中使用echarts初次渲染图表十分小的问题及解决方法
极致呈现系列之：Vue3中使用Echarts图表初体验
九仞山的专栏
06-13 1319
介绍了如何在Vue3中使用Echarts图表库。探讨了如何安装和引用Echarts库、如何使用Echarts库创建基本图表、如何自定义图表、如何将数据传递给Echarts库以及如何处理Echarts库中的事件。
Vue中异步：Async和await的使用（echarts画图，DOM渲染的时候，还没有请求到数据）
zzzz121380的博客
11-03 2007
Vue中异步：Async和await的使用（echarts画图，DOM渲染的时候，还没有请求到数据） 首先看示例： async function test() { console.log(0) await console.log(111);//在第一个await表达式出现之前，异步函数内部的代码都是按照同步方式执行的 console.log(555) //倒数第二个输出 console.log(556665)//最后一个输出 } function test1(){
eCharts制作数据报表
dengwenwei121的专栏
11-20 251
折线堆积面积图: html页面代码: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt...
echarts 受理情况仪表盘
程序员小挽的博客
11-25 937
#效果图 #上代码 var myRate1 = 10000; option = { backgroundColor: '#031845', title: [ { x: '12%', bottom: 100, text: '应申报', textStyle: { fontWeight: 'normal', fontSiz
完成进度echarts
weixin_43285861的博客
03-22 260
option = { title: [ { text: "75%", x: "center", y: "center", textStyle: { fontSize: "24", color: "#0096FA", }, }, ], //backgroundColor: "#ccc", polar: { radius: ["42%", "70%"], center: [
通过echarts绘制双十一销量实时统计图表
cybozu的博客
11-05 3858
echarts是apache的一个孵化项目，这次我们利用它的api，来实现了kintone门户页面的双十一的销量实时统计的Dashboard。 我们先看下效果图。 折线图显示了双十一期间的产品销量走势，而饼图则显示了各渠道的产品销量的占比，同时他们都是实时变化的。 接下来我们就来看下它是怎么实现的。 公用的库 下面是我们要用到的库： echarts kintone .........
vue+echarts实现动态绘制图表
06-10
要实现动态绘制图表，可以使用Vue.js做前端框架，使用Echarts.js做图表库。下面是一个简单的实现过程： 1. 在Vue.js中安装Echarts.js。可以通过npm或者cdn的方式来安装。 2. 在Vue.js组件中引入Echarts.js，并初始...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

open_test01

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值