element+Echarts绘图记录

2022-06-29 11:05:09 阅读：242 来源： 互联网

标签：opt 绘图 show series Echarts let table element echarts

1.数据视图表格样式自定义：

toolbox: {
  feature: {
      dataView: {
        show: true, 
        readOnly: false,
        optionToContent(opt)  {
          let axisData = opt.xAxis[0].data; //坐标数据
          let series = opt.series; //折线图数据
          let tdHeads = `<td>${headTitle}</td>`; //表头
          let tdBodys = ''; //数据
          series.forEach((item) =>  {
              //组装表头
              tdHeads += `<td>${item.name}</td>`;
          });
          let table = `<table class="echarts-table"><tbody><tr>${tdHeads} </tr>`;
          for (let i = 0, l = axisData.length; i < l; i++) {
              for (let j = 0; j < series.length; j++) {
                  //组装表数据
                  tdBodys += `<td>${series[j].data[i]}</td>`;
              }
              table += `<tr><td>${axisData[i]}</td>${tdBodys}</tr>`;
              tdBodys = '';
          }
          table += '</tbody></table>';
          return table;
        },
        // 用于刷新后回显undefined处理
        contentToOption(HTMLDomElement, opt){
            return opt;
        },
      },
      magicType: {show: true, type: ['line', 'bar']},
      restore: {show: true},
      saveAsImage: {show: true}
  }
},

CSS

/* echarts数据表格样式 */
.echarts-table{
    width: 100%;
    border-collapse: collapse;
}

.echarts-table tr:first-child{
    font-weight: bold;
    color: #909399 !important;
    background-color: #fff !important;
}

.echarts-table tr:hover{
    background-color: #F5F7FA;
}

.echarts-table tr{
    color: #606266;
    border-bottom: 1px solid #EBEEF5;
}
.echarts-table tr td{
    padding: 12px 0;
    min-width: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: center;
}

标签：opt,绘图,show,series,Echarts,let,table,element,echarts
来源： https://www.cnblogs.com/gteman/p/16422497.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

element+Echarts绘图记录