el-table使用插槽 Echarts图表渲染问题

最新推荐文章于 2024-09-02 10:51:14 发布

Paul-George

最新推荐文章于 2024-09-02 10:51:14 发布

阅读量806

点赞数 1

CC 4.0 BY-SA版权

文章标签： echarts vue.js

本文链接：https://blog.youkuaiyun.com/luohang_1/article/details/129302709

文章讲述了在Vue2项目中使用原生Echarts遇到的问题，即所有详情按钮渲染的图表相同且可能出现渲染失败的情况。作者推荐使用vue-echarts组件，并提供了安装和引入方法，以及示例代码展示如何在表格中结合使用日期选择器和图表，通过操作详情按钮动态展示图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果使用原生echarts 会导致所有详情按钮渲染的图表是一样的而且会出现渲染不出来的情况

这里我推荐换一个组件vue-echarts

vue2下使用vue-echarts还需要安装@vue/composition-api。

npm install vue-echarts --save

npm install --save @vue/composition-api

页面上就直接引入

import VChart from 'vue-echarts'

components: {

VChart,

<el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{ background: '#21242c', 'text-align': 'center', height: '20px' }"
          :cell-class-name="cellClassFn"
        >
          <el-table-column prop="Name" label="名称"></el-table-column>
          <el-table-column prop="Status" label="状态"> </el-table-column>
          <el-table-column prop="Value" label="数值"> </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-popover placement="right" width="360" trigger="click">
                <span style="color:#00ffff;">趋势图: </span>
                <el-date-picker
                  v-model="RealTimePicker"
                  type="datetimerange"
                  :picker-options="pickerOptions"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="timestamp"
                  @change="SelectRealTimePicker"
                  :default-time="['00:00:00', '23:59:59']"
                >
                </el-date-picker>
                <div style="width:325px; height:160px;">
                  <v-chart autoresize :option="chartOption3" />
                </div>
                <button slot="reference" class="detailed" @click="OperateDetailed(scope.row)">
                  详情
                </button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>

chartOption3 就是图表的一些配置跟原生echarts都是一样的然后就ok了