vue实现table表格嵌入Echarts

18 篇文章 0 订阅
<template>
  <div>
    <el-table
        :data="tableData">
      <el-table-column
          prop="date"
          label="日期"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column prop="name">
        <template slot-scope="scope">
          <div style="height: 40px;width:100px" :ref="'echarts'+scope.row.id"></div>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: []
    }
  },
  mounted() {
   this.init()
  },
  methods: {
    init() {
      this.tableData = [
        {
          date: '2016-05-02',
          name: '王小虎',
          id: '1',
          num: [1, 2, 3, 4, 5]
        }, {
          id: '2',
          date: '2016-05-04',
          name: '王小虎',
          num: [1, 4, 7, 3, 5]
        }, {
          id: '3',
          date: '2016-05-01',
          name: '王小虎',
          num: [5, 2, 6, 9, 10]
        }, {
          id: '4',
          date: '2016-05-03',
          name: '王小虎',
          num: [2, 1, 2, 1, 8]
        }
      ];

      this.getEcharts()
    },
    getEcharts() {
      setTimeout(_ => {
        this.tableData.forEach(e => {
          let myChart = echarts.init(this.$refs['echarts' + e.id]);
          myChart.setOption({
            grid: {
              left: "0",
              top: "0",
              right: "0",
              bottom: "0",
              containLabel: true,
            },
            xAxis: {
              type: 'category',
              //不显示x轴线
              show: false,

            },
            yAxis: {
              type: 'value',
              show: false,
            },
            series: [{
              data: e.num,
              //单独修改当前线条的颜色
              lineStyle: {
                normal: {
                  color: "#f00",
                  width: 1,
                },
              },
              type: 'line',
              smooth: true,
              symbol: 'none',
            }]

          });
          window.addEventListener("resize", () => {
            myChart.resize();
          });
        })
      }, 1000)
    }
  }
}
</script>

效果:
在这里插入图片描述

  • 6
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
要在表格中嵌套echarts,你可以使用Vue3的Composition API,将表格echarts分别封装为组件,然后在一个父组件中将它们组合起来。以下是一个简单的示例: 1. 首先,在main.js中引入echarts: ```javascript import * as echarts from 'echarts'; import { createApp } from 'vue'; import App from './App.vue'; const app = createApp(App); app.config.globalProperties.$echarts = echarts; app.mount('#app'); ``` 2. 创建一个Table组件和一个Echarts组件,分别用来展示表格和图表: ```javascript // Table.vue <template> <table> <thead> <tr> <th v-for="header in headers">{{ header }}</th> </tr> </thead> <tbody> <tr v-for="(row, index) in rows" :key="index"> <td v-for="(cell, index) in row" :key="index">{{ cell }}</td> <td> <Echarts :data="chartData[index]" /> </td> </tr> </tbody> </table> </template> <script> import { ref } from 'vue'; import Echarts from './Echarts.vue'; export default { props: { headers: { type: Array, required: true, }, rows: { type: Array, required: true, }, chartData: { type: Array, required: true, }, }, components: { Echarts, }, }; </script> ``` ```javascript // Echarts.vue <template> <div ref="chart" style="width: 100%; height: 100%"></div> </template> <script> import { ref, onMounted, watch } from 'vue'; export default { props: { data: { type: Object, required: true, }, }, setup(props) { const chartRef = ref(null); onMounted(() => { const chart = props.$echarts.init(chartRef.value); chart.setOption(props.data); }); watch( () => props.data, () => { const chart = props.$echarts.getInstanceByDom(chartRef.value); chart.setOption(props.data); }, ); return { chartRef, }; }, }; </script> ``` 3. 最后,在父组件中引入TableEcharts组件,并将它们组合起来: ```javascript <template> <div> <Table :headers="headers" :rows="rows" :chartData="chartData" /> </div> </template> <script> import { reactive } from 'vue'; import Table from './Table.vue'; export default { components: { Table, }, setup() { const headers = ['Name', 'Age', 'Gender']; const rows = [ ['Alice', 25, 'Female'], ['Bob', 30, 'Male'], ['Charlie', 35, 'Male'], ]; const chartData = reactive([ { xAxis: { type: 'category', data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], }, yAxis: { type: 'value', }, series: [ { data: [120, 200, 150, 80, 70, 110, 130, 90, 170, 240, 150, 200], type: 'line', }, ], }, { xAxis: { type: 'category', data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], }, yAxis: { type: 'value', }, series: [ { data: [50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160], type: 'line', }, ], }, { xAxis: { type: 'category', data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], }, yAxis: { type: 'value', }, series: [ { data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120], type: 'line', }, ], }, ]); return { headers, rows, chartData, }; }, }; </script> ``` 这样,就可以在表格中嵌套echarts了。你可以根据实际需求进行修改和调整。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值