vue echarts 多个图表后台数据填充到页面，并自适应

J橘子

已于 2022-06-23 10:28:57 修改

阅读量832

点赞数

文章标签： echarts javascript vue.js

于 2022-06-20 10:26:42 首次发布

本文链接：https://blog.csdn.net/rose_LHJ/article/details/125293416

版权

本文介绍如何在Vue项目中使用Echarts，动态从后台填充多个图表数据。首先，通过循环遍历后台数据并区分图表类型。接着，根据数据类型调用相应方法生成趋势图和单点图，将数据推送到图表数组中。同时，利用Echarts的resize方法实现图表的自适应屏幕大小，确保在窗口调整时图表能正确显示。

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

<el-tab-pane v-for="(statret, index) in STATFIGURELIST" :key="index" v-bind:label="statret.name" v-bind:name="statret.name">
    <div v-if="statret.data.whichshow == 'single'">
       <!--     单点图    -->
       <div style="padding-right: 4%; padding-left: 4%">
         <div v-for=" (item, itemindex) in statret.data.items" :key="itemindex" style="width:100%; height: 400px"> <!-- 循环遍历环形图所需数据  -->
           <p style="color: white;text-align: center;line-height: 16px;opacity: 1; font-size: 20px;font-weight: bold;">
             {
  { item + statret.data.funcs[0] }} <!--   项目名称  -->
           </p>
           <div v-bind:id="'single' + item + statret.data.funcs[0]" v-bind:style="'height: 360px; width: ' + (fulWidth - 300) * 0.54 + 'px'">
             {
  { item + statret.data.funcs[0] }}
           </div>
         </div>
       </div>
     </div>
     <div v-else-if="statret.data.whichshow == 'trends'">
       <!--     趋势图    -->
       <div style="padding-right: 4%; padding-left: 4%">
         <div v-for=" (item, itemindex) in statret.data.items" :key="itemindex"
              style="width:100%; height: 400px">
           <p
             style="color: white;text-align: center;line-height: 16px;opacity: 1; font-size: 20px;font-weight: bold;">
             {
  { item }}
           </p>
           <div v-bind:id="'trends' + item" v-bind:style="'height: 360px; width: ' + (fulWidth - 300) * 0.54 + 'px'"></div>
         </div>
       </div>
     </div>
     <div v-else-if="statret.data.whichshow == 'both'">
       <!--     单点图    -->
       <div style="float: left; width: 30%; padding-left: 1%">
         <div v-for=" (item, itemindex) in statret.data.items" :key="itemindex"  style="width:100%; height: 400px">
           <p style