把后端返回的复杂数据转换为ECharts需求用的数据

最新推荐文章于 2023-04-19 17:18:15 发布
最新推荐文章于 2023-04-19 17:18:15 发布
阅读量844 收藏 2
点赞数 2
分类专栏： vue 文章标签： javascript html vue.js echarts 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guojiachengxu/article/details/119786868
版权

把后端返回的复杂数据转换为ECharts需求用的数据

数据:

0:{category: "来喜", ddate: "2021-08-09", price: 3000}
1: {category: "来喜", ddate: "2021-08-17", price: 5}
2: {category: "五洲", ddate: "2021-08-17", price: 5}
3: {category: "恒升", ddate: "2021-08-17", price: 5}
4: {category: "东源", ddate: "2021-08-17", price: 5}
5: {category: "腾远", ddate: "2021-08-17", price: 5}
6: {category: "鑫义", ddate: "2021-08-17", price: 5}
7: {category: "北海", ddate: "2021-08-17", price: 5}
8: {category: "东风镁业", ddate: "2021-08-17", price: 5}
9: {category: "泰和", ddate: "2021-08-17", price: 5}
10: {category: "江泰", ddate: "2021-08-17", price: 5}
11: {category: "祥荣", ddate: "2021-08-17", price: 5}
12: {category: "江泰总公司", ddate: "2021-08-17", price: 1}
13: {category: "同得利", ddate: "2021-08-17", price: 1}
14: {category: "鑫泰", ddate: "2021-08-17", price: 1}
15: {category: "君正", ddate: "2021-08-17", price: 1}
16: {category: "鄂绒", ddate: "2021-08-17", price: 1}

实现过程:

<template>
  <div class="pricePlatT_firstOilChart">
    <SubTtile :title="title"></SubTtile>
    <!-- 1#油价格折线图 -->
    <div id="pricePlatT_firstOilChart" :ref="id"></div>
  </div>
</template>

<script>
import {reqDlSupplyPriceCompare} from '@api/PricePlatT'
import * as echarts from "echarts";
import SubTtile from "../../../components/SubTitle/index";
export default {
  name: "",
  components: {
    SubTtile
  },
  props: {
    title: {
      type: String,
      default: ""
    },
    id: {
      type: String,
      default: `bar${new Date().getTime()}`
    }
  },
  data() {
    return {
      dateDate: [],
      // 恒升
      bData: [],
      // 祥荣
      jData: [],
      // 德润
      zData: [],
      // 鑫义
      xData: [],
      // 创源
      lData: [],
      // 东风镁业
      tData: [],
      // 泰和
      hData: [],
      // 天元
      yData: [],
      beginDate:[],
      endDate:[],


      itemData: {},
      category :[],
      ddate :[],
      price :[],
      seriesData:[]
    };
  },
  created(){
    this.beginDate = this.dayjs().subtract(14,'day').format('YYYY-MM-DD')
    this.endDate = this.dayjs().subtract(0,'day').format('YYYY-MM-DD')
  },
  mounted() {
    this.getDlSupplyPriceCompare()
  },
  methods: {
    async getDlSupplyPriceCompare(){
      let category=[]
      let ddate =[]
      let price =[]
      const res = await reqDlSupplyPriceCompare(this.beginDate,this.endDate)
      res.data.forEach(item => {
        category.push(item.category)
        ddate.push(item.ddate)
        price.push(parseFloat(item.price).toFixed(2))
      })
      // console.log(new Set(category), new Set(ddate), price, 'shuji')
      this.category=[...new Set(category)]
      this.ddate=[ ... new Set(ddate)]
      
        this.category.forEach(el => {
          this.itemData[el] = []
          res.data.forEach((item, f) => {
            if (el === item.category) {
              // ddate.forEach((j,i)=>{})
              let a =  this.ddate.indexOf(item.ddate)
              //  this.itemData[el][a] = parseFloat(item.price).toFixed(2)
              this.itemData[el][a]=item.price
              // this.itemData[el].push(item.price)
              
            }
          })
           
        })
        //  console.log(this.itemData, 'ppp')
   
       for(let i in this.itemData){
           this.seriesData.push(
          {
            type: "line",
            name: i,
            smooth: true, //是否平滑
            showAllSymbol: true,
            symbol: "circle",
            symbolSize: 2,
            // lineStyle: {
            //   normal: {
            //     color: "#33e5ba",
            //     shadowColor: "rgba(0, 0, 0, 0)",
            //     shadowBlur: 0,
            //     shadowOffsetY: 5,
            //     shadowOffsetX: 5
            //   }
            // },
            label: {
              show: false,
              position: "top",
              textStyle: {
                color: "#fff",
                fontSize: 14
              }
            },
            // itemStyle: {
            //   color: "",
            //   borderColor: "rgb(0,115,100)",
            //   borderWidth: 0,
            //   shadowColor: "rgba(0, 0, 0, 0)",
            //   shadowBlur: 0,
            //   shadowOffsetY: 0,
            //   shadowOffsetX: 0
            // },
            tooltip: {
              show: true
            },
            // data: this.bData
            data: this.itemData[i]

          },
        )
       }
    



     
      // res.data.forEach((item,i)=>{
        // let arr = []
        // arr[0] = item.ddate.substring(6)
        // const index = this.dateDate.indexOf(item.ddate.substring(6))
        // if(index < 0){
        //   this.dateDate.push(arr[0])
        // }
        // if(item.category === ''){
        //   let a = (this.dateDate).indexOf(item.ddate.substring(6))
        //   this.bData[a] = parseFloat(item.price).toFixed(2)
        // }
        // else if(item.category === '祥荣'){
        //   let b = (this.dateDate).indexOf(item.ddate.substring(6))
        //   this.jData[b] = parseFloat(item.price).toFixed(2)
        // }else if(item.category === '德润'){
        //   let c = (this.dateDate).indexOf(item.ddate.substring(6))
        //   this.zData[c] = parseFloat(item.price).toFixed(2)
        // }else if(item.category === '鑫义'){
        //   let d = (this.dateDate).indexOf(item.ddate.substring(6))
        //   this.xData[d] = parseFloat(item.price).toFixed(2)
        // }else if(item.category === '创源'){
        //   let e = (this.dateDate).indexOf(item.ddate.substring(6))
        //   this.lData[e] = parseFloat(item.price).toFixed(2)
        // }else if(item.category === '东风镁业'){
        //   let f = (this.dateDate).indexOf(item.ddate.substring(6))
        //   this.tData[f] = parseFloat(item.price).toFixed(2)
        // }else if(item.category === '泰和'){
        //   let g = (this.dateDate).indexOf(item.ddate.substring(6))
        //   this.hData[g] = parseFloat(item.price).toFixed(2)
        // }else{
        //   let h = (this.dateDate).indexOf(item.ddate.substring(6))
        //   this.yData[h] = parseFloat(item.price).toFixed(2)
        // }
      // })
    },
    firstOilChart() {
      let myChart = echarts.init(this.$refs[this.id]);
      let option = {
        legend: {
          left: 0,
          icon: "rect",
          itemWidth: 10,
          itemHeight: 10,
          padding: [10, 0],
          textStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        tooltip: {
          // 坐标轴触发
          trigger: "axis",
          backgroundColor: "rgba(48,142,213,0.7)",
          axisPointer: {
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0, 255, 233,0)"
                  },
                  {
                    offset: 0.5,
                    color: "rgba(255, 255, 255,1)"
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 255, 233,0)"
                  }
                ],
                global: false
              }
            }
          }
        },
        grid: {
          top: "14%",
          left: "0%",
          right: "0%",
          bottom: "0%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(17,100,157,0.3)"
              }
            },
            splitArea: {
              color: "#fff",
              lineStyle: {
                color: "white"
              }
            },
            axisLabel: {
              textStyle: {
                fontFamily: "Microsoft YaHei",
                color: "#fff"
              },
              align: "right"
            },
            // 是否显示分隔线
            splitLine: {
              show: false
            },
            //坐标轴两边留白策略
            boundaryGap: false,
            data: this.ddate
          }
        ],
        yAxis: {
          type: "value",
          axisLine: {
            //文字颜色
            show: false,
            lineStyle: {
              color: "rgba(17,100,157,0.3)"
            }
          },
          splitLine: {
            //线条颜色
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.1)"
            }
          },
          axisLabel: {
            formatter: value => {
              return value;
            },
            textStyle: {
              color: "#fff"
            }
          },
          min: function(value) {
            return value.min - 20;
          }
        },
        // 系列列表
        series:this.seriesData

        // series: [
        //   {
        //     type: "line",
        //     name: "恒升",
        //     smooth: true, //是否平滑
        //     showAllSymbol: true,
        //     symbol: "circle",
        //     symbolSize: 2,
        //     lineStyle: {
        //       normal: {
        //         color: "#33e5ba",
        //         shadowColor: "rgba(0, 0, 0, 0)",
        //         shadowBlur: 0,
        //         shadowOffsetY: 5,
        //         shadowOffsetX: 5
        //       }
        //     },
        //     label: {
        //       show: false,
        //       position: "top",
        //       textStyle: {
        //         color: "#fff",
        //         fontSize: 14
        //       }
        //     },
        //     itemStyle: {
        //       color: "#33e5ba",
        //       borderColor: "rgb(0,115,100)",
        //       borderWidth: 0,
        //       shadowColor: "rgba(0, 0, 0, 0)",
        //       shadowBlur: 0,
        //       shadowOffsetY: 0,
        //       shadowOffsetX: 0
        //     },
        //     tooltip: {
        //       show: true
        //     },
        //     data: this.bData
        //   },
        //   {
        //     type: "line",
        //     name: "祥荣",
        //     smooth: true, //是否平滑
        //     showAllSymbol: true,
        //     symbol: "circle",
        //     symbolSize: 2,
        //     lineStyle: {
        //       normal: {
        //         color: "#34d1fe",
        //         shadowColor: "rgba(0, 0, 0, 0)",
        //         shadowBlur: 0,
        //         shadowOffsetY: 5,
        //         shadowOffsetX: 5
        //       }
        //     },
        //     label: {
        //       show: false,
        //       position: "top",
        //       textStyle: {
        //         color: "#fff",
        //         fontSize: 14
        //       }
        //     },
        //     itemStyle: {
        //       color: "#34d1fe",
        //       borderColor: "rgb(0,115,100)",
        //       borderWidth: 0,
        //       shadowColor: "rgba(0, 0, 0, 0)",
        //       shadowBlur: 0,
        //       shadowOffsetY: 0,
        //       shadowOffsetX: 0
        //     },
        //     tooltip: {
        //       show: true
        //     },
        //     data: this.jData
        //   },
        //   {
        //     type: "line",
        //     name: "德润",
        //     smooth: true, //是否平滑
        //     showAllSymbol: true,
        //     symbol: "circle",
        //     symbolSize: 2,
        //     lineStyle: {
        //       normal: {
        //         color: "#eee632",
        //         shadowColor: "rgba(0, 0, 0, 0)",
        //         shadowBlur: 0,
        //         shadowOffsetY: 5,
        //         shadowOffsetX: 5
        //       }
        //     },
        //     label: {
        //       show: false,
        //       position: "top",
        //       textStyle: {
        //         color: "#fff",
        //         fontSize: 14
        //       }
        //     },
        //     itemStyle: {
        //       color: "#eee632",
        //       borderColor: "rgb(0,115,100)",
        //       borderWidth: 0,
        //       shadowColor: "rgba(0, 0, 0, 0)",
        //       shadowBlur: 0,
        //       shadowOffsetY: 0,
        //       shadowOffsetX: 0
        //     },
        //     tooltip: {
        //       show: true
        //     },
        //     data: this.zData
        //   },
        //   {
        //     type: "line",
        //     name: "鑫义",
        //     smooth: true, //是否平滑
        //     showAllSymbol: true,
        //     symbol: "circle",
        //     symbolSize: 2,
        //     lineStyle: {
        //       normal: {
        //         color: "#ff681e",
        //         shadowColor: "rgba(0, 0, 0, 0)",
        //         shadowBlur: 0,
        //         shadowOffsetY: 5,
        //         shadowOffsetX: 5
        //       }
        //     },
        //     label: {
        //       show: false,
        //       position: "top",
        //       textStyle: {
        //         color: "#fff",
        //         fontSize: 14
        //       }
        //     },
        //     itemStyle: {
        //       color: "#ff681e",
        //       borderColor: "rgb(0,115,100)",
        //       borderWidth: 0,
        //       shadowColor: "rgba(0, 0, 0, 0)",
        //       shadowBlur: 0,
        //       shadowOffsetY: 0,
        //       shadowOffsetX: 0
        //     },
        //     tooltip: {
        //       show: true
        //     },
        //     data: this.xData
        //   },
        //   {
        //     type: "line",
        //     name: "创源",
        //     smooth: true, //是否平滑
        //     showAllSymbol: true,
        //     symbol: "circle",
        //     symbolSize: 2,
        //     lineStyle: {
        //       normal: {
        //         color: "#ff3a52",
        //         shadowColor: "rgba(0, 0, 0, 0)",
        //         shadowBlur: 0,
        //         shadowOffsetY: 5,
        //         shadowOffsetX: 5
        //       }
        //     },
        //     label: {
        //       show: false,
        //       position: "top",
        //       textStyle: {
        //         color: "#fff",
        //         fontSize: 14
        //       }
        //     },
        //     itemStyle: {
        //       color: "#ff3a52",
        //       borderColor: "rgb(0,115,100)",
        //       borderWidth: 0,
        //       shadowColor: "rgba(0, 0, 0, 0)",
        //       shadowBlur: 0,
        //       shadowOffsetY: 0,
        //       shadowOffsetX: 0
        //     },
        //     tooltip: {
        //       show: true
        //     },
        //     data: this.lData
        //   },
        //   {
        //     type: "line",
        //     name: "东风镁业",
        //     smooth: true, //是否平滑
        //     showAllSymbol: true,
        //     symbol: "circle",
        //     symbolSize: 2,
        //     lineStyle: {
        //       normal: {
        //         color: "#385eff",
        //         shadowColor: "rgba(0, 0, 0, 0)",
        //         shadowBlur: 0,
        //         shadowOffsetY: 5,
        //         shadowOffsetX: 5
        //       }
        //     },
        //     label: {
        //       show: false,
        //       position: "top",
        //       textStyle: {
        //         color: "#fff",
        //         fontSize: 14
        //       }
        //     },
        //     itemStyle: {
        //       color: "#385eff",
        //       borderColor: "rgb(0,115,100)",
        //       borderWidth: 0,
        //       shadowColor: "rgba(0, 0, 0, 0)",
        //       shadowBlur: 0,
        //       shadowOffsetY: 0,
        //       shadowOffsetX: 0
        //     },
        //     tooltip: {
        //       show: true
        //     },
        //     data: this.tData
        //   },
        //   {
        //     type: "line",
        //     name: "泰和",
        //     smooth: true, //是否平滑
        //     showAllSymbol: true,
        //     symbol: "circle",
        //     symbolSize: 2,
        //     lineStyle: {
        //       normal: {
        //         color: "#0ef946",
        //         shadowColor: "rgba(0, 0, 0, 0)",
        //         shadowBlur: 0,
        //         shadowOffsetY: 5,
        //         shadowOffsetX: 5
        //       }
        //     },
        //     label: {
        //       show: false,
        //       position: "top",
        //       textStyle: {
        //         color: "#fff",
        //         fontSize: 14
        //       }
        //     },
        //     itemStyle: {
        //       color: "#0ef946",
        //       borderColor: "rgb(0,115,100)",
        //       borderWidth: 0,
        //       shadowColor: "rgba(0, 0, 0, 0)",
        //       shadowBlur: 0,
        //       shadowOffsetY: 0,
        //       shadowOffsetX: 0
        //     },
        //     tooltip: {
        //       show: true
        //     },
        //     data: this.hData
        //   },
        //   {
        //     type: "line",
        //     name: "天元",
        //     smooth: true, //是否平滑
        //     showAllSymbol: true,
        //     symbol: "circle",
        //     symbolSize: 2,
        //     lineStyle: {
        //       normal: {
        //         color: "#fff",
        //         shadowColor: "rgba(0, 0, 0, 0)",
        //         shadowBlur: 0,
        //         shadowOffsetY: 5,
        //         shadowOffsetX: 5
        //       }
        //     },
        //     label: {
        //       show: false,
        //       position: "top",
        //       textStyle: {
        //         color: "#fff",
        //         fontSize: 14
        //       }
        //     },
        //     itemStyle: {
        //       color: "#fff",
        //       borderColor: "rgb(0,115,100)",
        //       borderWidth: 0,
        //       shadowColor: "rgba(0, 0, 0, 0)",
        //       shadowBlur: 0,
        //       shadowOffsetY: 0,
        //       shadowOffsetX: 0
        //     },
        //     tooltip: {
        //       show: true
        //     },
        //     data: this.yData
        //   },
        // ]
      };
      myChart.setOption(option);
      // echarts自适应屏幕大小
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    }
  },
  watch:{
    // dateDate(){
    //   this.firstOilChart()
    // }
     ddate (){
      this.firstOilChart()
     }
  }
};
</script>

<style lang="less" scoped>
.pricePlatT_firstOilChart {
  width: 100%;
  height: calc(100% - 40px);
}
#pricePlatT_firstOilChart {
  width: 100%;
  height: 100%;
  margin-top: 26px;
}
</style>
一囗田月
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
后台json按条件分类，并实现echart柱状图
qq_32339477的博客
03-19 801
在最近的业务场景下需要将后台返回的json数据实现在echart柱状图上，看文档，横坐标如图： 然而后台返回的数据格式如图： 我们要按照日期为横坐标，每个颜色为纵坐标，最后按照每个种类的颜色生成数组；横坐标简单；就是数组去重，最后生成日期数组。然而颜色需要按照数组的每一项表示当天的次数；如图最后生成的颜色数组依次为： 直接上代码： red=[1,0,0,1,1],or=[0,0,1,0,0],...
echarts 对后端获取的值进行数据格式化处理
weixin_54902466的博客
04-18 3072
echarts是我们经常用到的数据可视化图形 但是后端反馈给我们的数据经常是数组包对象的集合类型 ， 我们常常需要进行一些数据格式化的算法取值操作 ， 这里我提供一种方法，希望对读者有所帮助！ // 后端返给我们的值 echarts:[ {id:1,createData:2020-1-4,num:20}, {id:2,createData:2020-2-6,num:120}, {id:3,createData:2020-4-10,num:80},
如果后端API一次返回10万条数据，前端应该如何处理？
web前端开发
06-14 3569
英文 | https://medium.com/frontend-canteen/if-the-backend-api-returns-100-000-records-at-one-time-how-should-we-handle-it-in-the-frontend-fab21218fe2最近，我的一位朋友在面试时被问到这个问题。这个问题其实是考察面试者对性能优化的理...
echarts代码格式化_echarts水球图格式化Format使用
weixin_40002009的博客
12-22 747
上周有一个需求，echarts的水球图要做展示，因为后台数据有可能值会返回'-' ，所以需要动态展示，首先返回值会有四个，分别表示本周/本月百分率以及本周/本月具体数值所以，产品提了一个需求当后端接口假如返回本周'-'那就展示本周具体数值，本月也是一样的道理因为对这种水球不太了解，所以当下想了一个方法，再写两个小球，当为-的时候用v-if/v-show来做显示隐藏～但是这种方法控制的太多了，所以有...
vue项目中如何实现将后台接口返回的数据映射成echarts饼形图
qsj0606的博客
04-21 2343
data的代码 假如从后台拿到的原始数据是list这种格式，我将原始的数据进行一系列的处理，拿到我想要的数据类型的数组title和result。 methods的代码 1、从list数组中分离处理后，拿到我想要的title数组和result数组； 2、将title和result赋值给画布中的option里边对应的data。 mounted中的代码 有时在使用echarts实现将相关数据生成想要的图形表时 1、会出现浏览器中看到dom结构已经有了，但是画布里边的图形没有渲染出来，可能的原因就是，你
调整后台传回来的数据使其满足echarts结构
Yana1225的博客
08-02 435
今天收到一个需求，是和echarts有关的，不过并不是调整echarts，而是传给echarts的数据要做调整。 // 从后端接收到的数据类似这样： [ {statename: 'a', value: 1}, {statename: 'b', value: 2}, {statename: 'c', value: 3} ]; // 需求的echarts图需要的数据是这样滴： [ {statename: 'a', value: 1}, {statename: 'b
SpringBoot+MongoDB+Echarts图表数据可视化
07-21
Echarts的优点在于其易于使用、配置灵活，可以轻松地将数据转换为美观且交互性强的图表。在前端，Echarts与SpringBoot通过Ajax进行通信，接收后端返回的数据，并将这些数据渲染成图表。 在实际操作中，项目会包含...
flask、echarts可视化小实例
09-29
# 将数据转换为 JSON 格式，以便 ECharts 使用 data_json = data.to_dict(orient='records') # 渲染模板并传递数据 return render_template('chart.html', data=data_json) ``` 在 `chart.html` 模板中，我们...
django+mysql+echarts实现数据可视化到前端
最新发布
05-31
在Django项目中，后端可以将MySQL数据转换成JSON格式，通过Ajax请求发送到前端，ECharts接收并渲染这些数据。 1. **数据加载**：ECharts提供`setOption`方法，接收JSON数据，生成相应的图表。 2. **交互功能**：...
echarts demo java
02-26
在这个名为“echarts demo java”的项目中，我们将探讨如何在 Java 后端生成数据并将其与 ECharts 前端组件结合，以实现动态数据加载和展示。 首先，我们要了解 ECharts 的基本概念。ECharts 支持多种图表类型，如...
Echarts 动态获取数据进行图表展示的Java示例.pdf
10-25
ECharts 是一个基于 JavaScript 的开源可视化库，常用于创建数据驱动的图表，广泛应用于互联网领域。...通过灵活的配置和丰富的图表类型，ECharts 可以满足各种复杂的可视化需求，使得数据的展示更加直观和生动。
ajax 替换echarts图表数据（ajax数据替换假数据）
qq_37299479的博客
03-31 688
$.ajax({ url:commonAjaxUrl, dataType:"json", type:"post", success:function(res){ console.log(res,"趋势图**********"); xzInf...
echarts 图表formatter格式化
weixin_46448867的博客
02-06 492
echarts 图表formatter格式化
java接口如何返回Tree树状结构数据
初夏0811的博客
06-20 5495
在实际的开发中，我们数据库表经常是会有层级关系的数据，比如一级二级三级菜单，通过parentId关联，而前端又需要后端一次性返回所有的数据及层级关系，即树状结构，后端如何吃查询并正确返回呢 ？......
对象数组改为echarts折线图所需格式
weixin_47918319的博客
12-17 639
对象数组改为echarts折线图所需格式 原数据格式 [ { 0: '43', time: '2021-12-09' }, { 0: '43', time: '2021-12-10' }, { 1: '52', time: '2021-12-10' }, { 2: '62', time: '2021-12-10' },
统计数据组合成echarts图表
weixin_50596156的博客
01-04 282
**在这里插入代码片**@TOC 统计数据按年组合成echart报表 记录一下，有些数据库没有专门创建日期表，但是有些需求是需要我们按照日期统计数据并制作报表，这就需要我们自己组装数据了，话不多说上干货。 传入数据类型JSONObject /** data1,data2,data3 需要组装的数据，可根据实际需求自行增删 s1,s2,s3 报表所需要的字段 */ public static JSONObject monthEachYearUtil(JSONObject data1,
echart 变化数据的处理，随后端数据变化而变化
qq_45823368的博客
04-19 343
【代码】echart 变化数据的处理，随后端数据变化而变化。
ECharts折线图实现（前端、后端、数据结构）
热门推荐
fuzhuangzhuang的博客
01-28 1万+
文章目录ECharts简介使用场景实现步骤1、引入Echarts并且绘制一个简单的图表（html）2、创建一个折线图（js）3、了解ECharts需要的数据结构4、后台将数据整合返回给ECharts ECharts简介 ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9 /10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRen
【vue+js+tree】树状结构怎么根据value展示label
栀妹儿的炼丹炉
03-18 2201
思路：扁平化树形结构=>再查找整个扁平树=>回传展示
java后端返回json给echarts
05-18
要将Java后端返回的数据转换为JSON格式，并传递给Echarts进行数据展示，可以使用以下步骤： 1. 在Java后端，使用json库将数据转换为JSON格式，例如使用Jackson库： ```java ObjectMapper objectMapper = new ObjectMapper(); String jsonStr = objectMapper.writeValueAsString(data); ``` 其中，data是需要转换为JSON格式的数据。 2. 在前端，使用Echarts的option配置项中的data属性，将JSON数据传递给Echarts进行展示，例如： ```javascript var option = { ... series: [{ data: JSON.parse(jsonStr), ... }] ... }; ``` 其中，jsonStr是Java后端返回的JSON字符串，使用JSON.parse方法将其转换为JavaScript对象，然后传递给Echarts的data属性即可。 需要注意的是，传递给Echarts的JSON数据格式要符合Echarts所需的数据格式，否则数据展示可能会出现问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值