v-charts中折线图和饼图取值问题

最新推荐文章于 2024-01-16 13:19:07 发布

城南君

最新推荐文章于 2024-01-16 13:19:07 发布

阅读量2.9k

点赞数

分类专栏： v-charts 文章标签： v-charts

本文链接：https://blog.csdn.net/qq_41114516/article/details/102522150

版权

本文介绍了在avue框架中结合v-charts进行图表展示的方法，特别是如何处理后台返回的真实数据来填充折线图和饼图。对于折线图，关键在于确保columns的参数与数据中对应的属性一致，如zDate, zFace, zOldChannel。而对于饼图，可以直接使用后台返回的数据进行填充。如有相关问题，欢迎留言讨论。" 133680268,17353688,费尔马小定理与欧拉定理的应用解析,"['算法', '数论', '数学']

摘要由CSDN通过智能技术生成

最近公司在用avue+v-charts，首先介绍一下avue和v-charts吧，

avue：基于vue和饿了么组件element进行封装的框架

v-chart：基于vue和echarts封装的图表工具

主要是v-charts问题，下面大概讲一下v-charts的取值问题，主要是后台返回数据填充到v-charts中去，并不是假数据

折线图：
我后台返回的数据下面截图中有，主要就是columns中的参数和下面方法中传递的数据的参数一致，这样才能进行填充。emmm，我也不太会讲，直接上代码吧，

chartData: {
          columns: ['zDate', 'zFace', 'zOldChannel'],
          rows: []
        },

        var t = this
        //折线1
        console.log(t.zDate)
        console.log(t.zFace)
        console.log(t.zOldChannel)
        const zDate1 = t.zDate
        const zFace1 = t.zFace
        const zOldChannel1 = t.zOldChannel
        const data = {
          zDate1, zFace1, zOldChannel1
        }
        const chartData = (data) => {
          let ans = []
          for (let i = 0; i < data.zDate1.len