echarts带table表格展示

 先看效果

 

 整体思路就是用graphic这个属性去画线 表格里的值用的定位写的 

option = {
  tooltip:{
    trigger:'axis',
    axisPointer:{
      type:'shadow'
    }
  },
  itemStyle:{
    borderRadius:10,
    borderColor:'#FFF',
    borderWidth:1
  },
  legend:[
      {
        left:10,
        bottom:5,
        itemWidth:12,
        origin:'vertical',
        textStyle:{
          color:'black',
          fontSize:14
        }
      }    
    ],
    grid:{
      top:0,
      left:'3%',
      right:'4%',
      bottom:'19%',
      containLabel:true
    },
    xAxis:{
      max:'100',
      type:'value',
      axisLabel:{
        formatter:'{value}'+'%'
      }
    },
    yAxis:{
      type:'category',
      data:datax,
    },
    series:[
      {
        name:'name',
        type:'bar',
        stack:'total',
        itemStyle:{
          color:'#7ec3fc',
        },
        label:{
          show:true,
          position:'right',
          formatter:function(val){
            return val.value+'%'
          }
        },
        tooltip:{
          valueFormatter:function(value){
            return value+'%'
          }
        },
        data:dataVal
      }
      
      ],
      graphic:[
        {
          type:'line', 
          bottom:60,//线条距离底部的距离
          right:0,//控制线路右边的距离
          style:{
            stroke:'rgb(100,112,121)',
          },
          shape:{
            x1:0,
            y1:0,
            x2:882,//线条长度
            y2:0
          }
        },
         {
          type:'line', 
          bottom:30,//线条距离底部的距离
          right:0,//控制线路右边的距离
          style:{
            stroke:'rgb(100,112,121)',
          },
          shape:{
            x1:0,
            y1:0,
            x2:990,//线条长度
            y2:0
          }
        },
          {
          type:'line', 
          bottom:30,//线条距离底部的距离
          right:0,//控制线路右边的距离
          style:{
            stroke:'rgb(100,112,121)',
          },
          shape:{
            x1:0,
            y1:0,
            x2:990,//线条长度
            y2:0
          }
        },
        {
          type:'line', 
          bottom:0,//线条距离底部的距离
          right:0,//控制线路右边的距离
          style:{
            stroke:'rgb(100,112,121)',
          },
          shape:{
            x1:0,
            y1:0,
            x2:990,//线条长度
            y2:0
          }
        },
         {
          type:'line', 
          bottom:0,//线条距离底部的距离
          right:0,//控制线路右边的距离
          style:{
            stroke:'rgb(100,112,121)',
          },
          shape:{
            x1:0,
            y1:0,
            x2:0,//线条长度
            y2:30
          }
        }, {
          type:'line', 
          bottom:0,//线条距离底部的距离
          right:109,//控制线路右边的距离
          style:{
            stroke:'rgb(100,112,121)',
          },
          shape:{
            x1:0,
            y1:0,
            x2:0,//线条长度
            y2:60
          },
          
        },
        {
          type:'line', 
          bottom:0,//线条距离底部的距离
          right:250,//控制线路右边的距离
          style:{
            stroke:'rgb(100,112,121)',
          },
          shape:{
            x1:0,
            y1:0,
            x2:0,//线条长度
            y2:60
          }
         }, {
          type:'line', 
          bottom:0,//线条距离底部的距离
          right:400,//控制线路右边的距离
          style:{
            stroke:'rgb(100,112,121)',
          },
          shape:{
            x1:0,
            y1:0,
            x2:0,//线条长度
            y2:60
          }
        }, {
          type:'line', 
          bottom:0,//线条距离底部的距离
          right:550,//控制线路右边的距离
          style:{
            stroke:'rgb(100,112,121)',
          },
          shape:{
            x1:0,
            y1:0,
            x2:0,//线条长度
            y2:60
          }
        }, {
          type:'line', 
          bottom:0,//线条距离底部的距离
          right:700,//控制线路右边的距离
          style:{
            stroke:'rgb(100,112,121)',
          },
          shape:{
            x1:0,
            y1:0,
            x2:0,//线条长度
            y2:60
          }
        }, {
          type:'line', 
          bottom:0,//线条距离底部的距离
          right:850,//控制线路右边的距离
          style:{
            stroke:'rgb(100,112,121)',
          },
          shape:{
            x1:0,
            y1:0,
            x2:0,//线条长度
            y2:60
          }
        }, {
          type:'line', 
          bottom:0,//线条距离底部的距离
          right:990,//控制线路右边的距离
          style:{
            stroke:'rgb(100,112,121)',
          },
          shape:{
            x1:0,
            y1:0,
            x2:0,//线条长度
            y2:60
          }
        },
        ]
};

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
在el-table表格中加入echarts,可以通过el-table-column的自定义模板来实现。首先,在页面中引入echarts的相关js文件,并在data中定义一个变量来存储echarts实例。然后,在el-table-column中设置自定义模板,通过具体的html代码来显示echarts图表。 具体实现步骤如下: 1. 在页面中引入echarts的相关js文件。 ```html <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> ``` 2. 在data中定义一个变量来存储echarts实例。 ```javascript data() { return { chartInstance: null } }, mounted() { // 在mounted生命周期钩子中初始化echarts实例 this.chartInstance = echarts.init(document.getElementById('chart-container')) }, ``` 3. 在el-table-column的自定义模板中加入echarts图表所需的HTML代码。 ```html <template> <div> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column label="图表"> <template slot-scope="scope"> <div id="chart-container" style="width: 300px; height: 200px;"></div> </template> </el-table-column> </el-table> </div> </template> ``` 4. 在方法中通过echarts的API来更新图表数据。 ```javascript methods: { updateChart() { // 假设tableData中有一列名为value,用于显示图表数据 const chartData = this.tableData.map(item => item.value) // 使用echarts的setOption方法来更新图表数据 this.chartInstance.setOption({ xAxis: { type: 'category', data: chartData }, yAxis: { type: 'value' }, series: [{ data: chartData, type: 'line' }] }) } }, ``` 这样,当el-table中的数据发生变化时,echarts图表也会相应地更新。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Z_Xshan

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值