iview table header cell tooltip; iview表格 表头、单元格文字提示 ；iview 表格 悬浮提示

一、批量悬浮提示

二、提示数据举例

三、核心方法：

        //单元格提示
        function renderCell(h, params) {
            //console.log('h', h)
            //console.log('params', params)
            var tipsContent = getTips(params.column.key, params.row[params.column.key])
            //console.log('tipsContent', tipsContent)
            var values = formatTwoDecimalPlaces(params.row[params.column.key])

            return h('tooltip',
              {
                  props: {
                      placement: 'top'
                  }
              },
              [
                values,//原始数据
                h('div',
                  {
                      slot: 'content',
                      style: { whiteSpace: 'normal', wordBreak: 'break-all' }

                  },
                     tipsContent //提示语句
                 )
              ]
            )
        }
 
        //表头提示
        function renderHeader1(h, params) {
            //  console.log('h', h)
            //  console.log('params', params)
            return h('tooltip',
              {
                  props: {
                      transfer: true,
                      placement: 'bottom-end'//下右
                  }
              },
              [
                //h('span', '优势度'),
                h('span', params.column.title),
                h('div',
                  {
                      'class': {
                          'custom-tooltip-content': true
                      },
                      slot: 'content'

                  },
                  [
                    h('p', '物种所占优势程度，由物种密度和采样点出现的频次计算所得。')

                  ]
                )
              ]
            )
        }

//简单使用举例
                                 {
                                   title: '优势度',
                                   key: 'DominanceDegree1',
                                   minWidth: 60,
                                   align: "center",
                                   render: renderCell
                                   renderHeader: renderHeader1,
                               },

                                            

　　

renderHeader1方法 加以改造也可以成为批量标题提示方法。

四、完整代码

@{
    ViewBag.Title = "";
    Layout = "~/Views/Shared/_LayoutNotFooter.cshtml";
}

<style type="text/css">
   .table-header-titleThree {
      color: #333;
      font-style: normal;
      font-weight: bolder;
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
        "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
      font-size: 20px;
      text-align: center;
      vertical-align: auto;
      line-height: 1.5;
       auto;
      height: auto;
      margin-bottom: 0px;
    }

    /*custom-tooltip 宽度*/
    .ivu-tooltip-inner {
        max- 600px;
    }
    .custom-tooltip-content {
        white-space: normal;
         500px;
    }
    .custom-tooltip-content p {
        text-indent: 2em;
        font-size: 14px;
        text-align: justify;
    }

    /*调整table cell间隔和行高*/
    .ivu-table-cell {
        padding-left: 1px;
        padding-right: 1px;
    }
    .ivu-table-small td {
        height: 36px;
    }

    /*echarts 数据视图 单位样式*/
    .echart-table-uint{
      font-size: 12px;
      color: #515a6e;
      float: right;
      line-height: 23px; 
      padding: 4px 0px;
    }
    /*echarts 数据视图 表格样式*/
    .echart-table{
       100%;
      text-align: center;
      border: 1px solid #dddddd;
      border-collapse: collapse;
      border-spacing: 0;
      font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
      font-size: 12px;
      color: #515a6e;
    }
    .echart-table tr td{
      padding: 4px 0;
      border: 1px solid #dddddd;
      line-height: 23px;
    }
    .echart-table  tr:nth-child(odd)  td{
      background-color: #FAFAFA;
    }


</style>




<script type="text/x-template" id="viewTemplate">

    <div style="margin:20px 10px 10px 10px">
        <Row>
            <i-Col span="24">
                <i-form ref="queryForm" label-position="left" label-width="70px" inline size="small">

                     <form-item label>
                        <i-select v-model="listQuery.sampleBatch"
                                  filterable
                                  placeholder="请选择批次"
                                  style="150px;">
                            <i-option v-for="item in sampleBatchArr"
                                      v-bind:key="item.value"
                                      v-bind:label="item.text"
                                      v-bind:value="item.value" />
                        </i-select>
                    </form-item>
                    <form-item label="">
                        <i-select v-model="listQuery.riverOrReservoirID" clearable filterable placeholder="请选择水域名称" style="150px;">
                            <i-option v-for="item in waterList"
                                      v-bind:key="item.id"
                                      v-bind:label="item.name"
                                      v-bind:value="item.id" />
                        </i-select>
                    </form-item>
                </i-form>
            </i-Col>

        </Row>

        <Row>
            <i-Col span="24">
                <header>
                    <div class="table-header-titleThree">
                        <span v-if="listQuery.riverOrReservoirID!=null">{{ getNameByID(listQuery.riverOrReservoirID,waterList)}}</span><span v-else>深圳市</span>水生态健康综合评价
                    </div>
                </header>
            </i-Col>
        </Row>

        <Row>
            <i-Col span="16">
                <div id="barID" style="100%;height:500px" />
            </i-Col>
            <i-Col span="8">
                <div id="pieID" style="100%;height:500px" />
            </i-Col>
        </Row>

        <br />
        <Row>
            <i-Col span="24">
                <header>
                    <div class="table-header-titleThree">
                        <span v-if="listQuery.riverOrReservoirID!=null">{{ getNameByID(listQuery.riverOrReservoirID,waterList)}}</span><span v-else>深圳市</span>水生态健康评价分项指标表
                    </div>
                </header>
            </i-Col>
        </Row>
        <br />
        <Row>
          
            <i-table v-bind:columns="tableColumns" v-bind:data="list" size="small" v-bind:loading="listLoading" v-bind:showPage="false" border></i-table>
        </Row>
        <br />
        <Row>
            <i-Col span="24">
                <header>
                    <div class="table-header-titleThree">
                        <span v-if="listQuery.riverOrReservoirID!=null">{{ getNameByID(listQuery.riverOrReservoirID,waterList)}}</span><span v-else>深圳市</span>水生态健康评价分项指标箱型图
                    </div>
                </header>
            </i-Col>
        </Row>
    
        <Row>
            <i-Col span="24">
                <div id="BoxplotID" style="100%;height:600px" />
             </i-Col>
        </Row>
        <br />


    </div>
   
</script>
    <div id="app">
    </div>
    <script type="text/javascript">
       var nameList = ['VelocityOrDepthCombinationCharacteristics', 'WaterQuantityConditions', 'BottomQuality', 'DegreeRiverBend', 'ChangeRiverBend', 'StabilityOfRiverOrLakeBank', 'HabitatComplexity', 'WidthOfRiparianBufferZone', 'HabitatTypeOfRiparianBufferZone', 'VegetationDiversityOfRiparianZone', 'RiparianZoneUseType', 'DissolvedOxygen', 'TotalNitrogen', 'NH3N', 'TP', 'AlgaShannonWiener', 'AlgaBergerParker', 'ZoobenthosShannonWeiner', 'EPT', 'OligochaetaPercent', 'BiologicalInvasion', 'InterferenceIntensityOfRiverBody']
       var chineseNameList = ['流速/水深结合特性', '水量状况', '底质', '河道弯曲程度', '河道改变程度', '河岸稳定性', '栖境复杂性', '河岸带缓冲区宽度', '河岸带缓冲区生境类型', '河岸带植被多样性', '河岸带土壤利用类型', '溶解氧（mg/L）', '总氮（mg/L）', 'NH3-N（mg/L）', 'TP（mg/L）', '藻类生物多样性指数', '藻类优势度指数', '大型底栖动物生物多样性指数', 'EPT分类单元数', '寡毛类比例', '生物入侵干扰', '河体干扰强度']
       var habitatScoreArr = [];
       function getTableColumns() {
           var arr = [];
           var obj0= {
                  title: '名称',
                  key: 'PointBatchIDLeftName',
                  minWidth: 70,
                  align: "center",
                  
           }
           arr.push(obj0);
           for (let j = 0; j < nameList.length; j++) {
               let obj1 ={
                   title: chineseNameList[j],
                   key: nameList[j],
                   minWidth: chineseNameList[j].length*17,
                   align: "center",
                   render: renderCell
                   //render: function (h, params) {
                   //    return formatTwoDecimalPlaces(params.row[nameList[j]]);
                   //},
                   
               }
               arr.push(obj1);
           }
           /*
           , 'RiverSum', 'RiverGrade'
           ,'综合评分','等级'
           */
           var obj2 = {
               title: '综合评分',
               key: 'RiverSum',
               minWidth: 70,
               align: "center",
               render: function (h, params) {
                   return formatTwoDecimalPlaces(params.row.RiverSum);
               },
           }
           var obj3 = {
               title: '等级',
               key: 'RiverGrade',
               minWidth: 60,
               align: "center",
           }
           arr.push(obj2);
           arr.push(obj3);
           //console.log('arr', arr)
           return arr;
           
       }
        var vm = new Vue({
            template: "#viewTemplate",
            el: '#app',
            data: function () {
                return {
                    tableHeight2:500,
                    waterList: [],
                    okloading: false,
                    total: null,
                    locationTypeArr: [{ text: '河流', value: 0 }, { text: '水库', value: 1 }],
                    sampleBatchArr: [{ text: '2019年夏季', value: 1 }],
                   
                    list: [],
                    tableKey: 0,
                    listLoading: true,
                    listQuery: {
                        sampleBatch: 1,
                        riverOrReservoirID: null,
                        filters: []
                    },
                    filters: [],
                    dictionaryArr: [],
                    riverArr: [],
                    reservoirArr: [],
               
                    chart: null,
                    chartBar: null,
                    chartPie: null,
                    chartindexBarID: null,
                    tableHeight: '500px',
                    riverName: null,
                    tableColumns: []

                }
            },

            watch: {

                'listQuery.algaDataType'(newVal, oldVal) {
                    // ////console.log('newtypeId',newVal)
                    this.listQuery.riverOrReservoirID = null
                    // this.listQuery.page = 1
                    this.getData()
                },
                'listQuery.sampleBatch'(newVal, oldVal) {
                    // ////console.log('newtypeId',newVal)
                    // this.listQuery.page = 1
                    this.getData()
                },
                'listQuery.riverOrReservoirID'(newVal, oldVal) {
                    // ////console.log('newtypeId',newVal)
                    // this.listQuery.page = 1
                    this.getData()
                }
            },
            created: function () {
                this.getHabitatScoreAllData();
                this.tableColumns = getTableColumns();
                this.getData();
                this.getWaterNameList();
              
            },
            mounted: function () {
                this.$nextTick(() => {
                    const that = this
                    // //console.log('that',that);
                    window.addEventListener('resize', function () {
                        const chart = that.chart
                        const chartBar = that.chartBar
                        const chartPie = that.chartPie
                        const chartindexBarID = that.chartindexBarID
                        // console.log('chartBar', chartBar)
                        if (chart) {
                            chart.resize()
                        }
                        if (chartBar) {
                            chartBar.resize()
                        }
                        if (chartPie) {
                            chartPie.resize()
                        }
                        if (chartindexBarID) {
                            chartindexBarID.resize()
                        }
                    })
                })

            },
            methods: {
                getNameByID(id, array) {
                    let name = null
                    for (let index = 0; index < array.length; index++) {
                        const element = array[index]
                        if (element.id == id) {
                            name = element.name
                        }
                    }
                 
                    return name
                },
                getWaterNameList: function () {
                    var that = this;
                    var url = '@Url.Action("WaterNameList", "Evaluate")';
                    
                    $.ajax({
                        url: url,
                        data: { algaDataType:this.listQuery.algaDataType, sampleBatch: this.listQuery.sampleBatch },
                        type: "get",
                        dataType: "json",
                        success: function (result) {
                             //console.log('WaterNameList', result)
                            if (result != null && result.success > 0) {
                                that.waterList = result.data;

                            }
                        }
                    })
                },
                getHabitatScoreAllData:function() {
                    var url = '@Url.Action("GetHabitatScoreAllData", "Evaluate")';
                    $.ajax({
                        url: url,
                       // data: { algaDataType: this.listQuery.algaDataType, sampleBatch: this.listQuery.sampleBatch },
                        type: "get",
                        dataType: "json",
                        success: function (result) {
                            console.log('GetHabitatScoreAllData', result)
                            if (result != null && result.success > 0) {
                                habitatScoreArr = result.data;

                            }
                        }
                    })

                },
                getData: function () {
                 
                    var that = this;
                    that.listLoading = true
                    //const filters = []
                    //for (const i in that.filters) {
                    //    if (that.filters[i].value && that.filters[i].value.length > 0) {
                    //        filters.push({ 'field': that.filters[i].row, 'op': that.filters[i].op, 'value': that.filters[i].value })
                    //    }
                    //}
                    //if (filters.length > 0) {
                    //    that.listQuery.filters = JSON.stringify(filters)
                    //} else {
                    //    that.listQuery.filters = null
                    //}
                    //console.log('that.listQuery', that.listQuery)
                    if (that.listQuery.riverOrReservoirID != null && that.listQuery.riverOrReservoirID != '') {
                        var url = '@Url.Action("GetAllData", "Evaluate")';      
                        $.ajax({
                            url: url,
                            data: that.listQuery,
                            type: "get",
                            dataType: "json",
                            success: function (result) {
                                console.log('GetAllData', result);
                                if (result != null && result.success > 0) {
                                    for (var i = 0; i < result.data.length; i++) {
                                        result.data[i].RiverGrade = translateRiverGrade(result.data[i].RiverSum);
                                    }
                                    //console.log("result.data", result.data);
                                       that.initBoxplot(result.data)
                                        that.initBar(result.data)
                                        that.initPie(result.data)
                                        that.list = result.data
                                   
                                        that.listLoading = false
                                        that.tableHeight = '400px'
                                }
                            },
                            error: function (result2) {
                                console.log("GetList error", result2);
                            }

                        })

                    }

                    // 柱状图 数据受 this.listQuery.riverOrReservoirID影响
                    if (that.listQuery.riverOrReservoirID == null || that.listQuery.riverOrReservoirID == '') {
                        var url2 = '@Url.Action("GetAllAverageData", "Evaluate")';      
                        $.ajax({
                            url: url2,
                            data: that.listQuery,
                            type: "get",
                            dataType: "json",
                            success: function (result) {
                                console.log('GetAllAverageData', result);
                               
                                if (result != null && result.success > 0) {
                                    for (var i = 0; i < result.data.length; i++) {
                                        result.data[i].RiverGrade = translateRiverGrade(result.data[i].RiverSum);
                                    }
                             
                                    that.initBoxplot(result.data)
                                    that.initBar(result.data)
                                    that.initPie(result.data)
                                    that.list = result.data
                                    //that.total = result.data
                                    that.listLoading = false
                                    that.tableHeight = '300px'
                                }
                            },
                            error: function (result2) {
                                console.log("GetAllAverageData error", result2);
                            }
                        })
                    }

                },
                initBar(dataPms) {
                    const dataTemp = dataPms
                   // console.log('initBar_dataPms', dataPms)
                    if (this.chartBar) {
                        this.chartBar.dispose()
                    }
                    const myChart = echarts.init(document.getElementById('barID'))
                    if (dataTemp) {
                        // var legendName=['重度干扰', '中度干扰', '轻度干扰', '轻微干扰', '无干扰']
                        var seriesData = []
                        var titlePart = ''
                        var nameSum = ''
                        var name = ''
                        var xName = 'PointBatchIDLeftName'
                            nameSum = 'RiverSum'
                            titlePart = '河流'

                            //if (this.listQuery.riverOrReservoirID == null || this.listQuery.riverOrReservoirID == '') {
                            //    xName = 'WaterName'
                            //} else {
                            //    xName='PointName'
                            //}
                        
                        var titleText = ''
                        // if (this.listQuery.riverOrReservoirID != null) {
                        //   titlePart = this.getRiverArrNameByID(this.listQuery.riverOrReservoirID)
                        // }
                        // titleText = titlePart + '生境综合评价'
                        // console.log('bar-seriesData',seriesData);
                        // 指定图表的配置项和数据
                        const option = {
                            title: {
                                left: 'center',
                                text: titleText
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            xAxis: {
                                data: dataTemp.map(function(item) {
                                    return item[xName]
                                }),
                                axisLabel: {
                                    interval: 0, // 坐标轴刻度标签的显示间隔.设置成 0 强制显示所有标签。设置为 1，隔一个标签显示一个标签。
                                    rotate: 45, // 倾斜度 -90 至 90 默认为0
                                    textStyle: {
                                        fontWeight: 'bold', // 加粗
                                        color: '#000000' // 黑色
                                    }
                                }
                            },
                            yAxis: {
                                splitLine: {
                                    show: false
                                }
                            },
                            toolbox: {
                                right: '20px',
                                // left: 'right',
                                feature: {
                                    dataView: {
                                        show: true,
                                        title: '数据视图',
                                        lang: ['<div class="table-header-title" >' + titleText + '</div>', '关闭'],
                                        readOnly: true, // 点击刷新按钮会导致第二列数据消失，此处设置只读是为了隐藏刷新按钮。
                                        optionToContent: function(opt) {
                                            // console.log('bar-opt', opt)
                                            return ToolboxDataView(opt)
                                        }
                                    },
                                    saveAsImage: { show: true }
                                }
                            },
                            // dataZoom: [{
                            //     startValue: '2014-06-01'
                            // }, {
                            //     type: 'inside'
                            // }],
                            visualMap: {
                                top: 30,
                                // type:'piecewise',
                                // splitNumber:6,
                                // calculable:true,
                                orient: 'horizontal', // 方向：水平
                                left: 'center',
                                // itemWidth:10,
                                // itemHeight:5,
                                /* https://www.echartsjs.com/zh/option.html#visualMap-piecewise.pieces
                                  lt（小于，little than），gt（大于，greater than），lte（小于等于 lettle than or equals），gte（大于等于，greater than or equals）来表达边界：
                    
                                */
                                pieces: [
                                //    {
                                //    gte: 0,
                                //    lt: 60,
                                //    label: '重度干扰',
                                //    color: '#7e0023'
                                //},
                                 {
                                    gt: 0,
                                    lte: 40,
                                    label: '极差',
                                    color: '#cc0033'
                                },
                                {
                                    gt: 40,
                                    lte: 60,
                                    label: '差',
                                    color: '#ff9933'
                                }, {
                                    gt: 60,
                                    lte: 80,
                                    label: '亚健康',
                                    color: '#ffde33'
                                }, {
                                    gt: 80,
                                    lte: 100,
                                    label: '健康',
                                    color: '#096'
                                }],
                                outOfRange: {
                                    color: '#999'
                                }
                            },
                            series: {
                                name: '得分',
                                type: 'bar',
                                data: dataTemp.map(function(item) {
                                    return formatTwoDecimalPlaces(item[nameSum]);
                                }),
                                markLine: {
                                    silent: true,
                                    data: [{
                                        yAxis: 40
                                    }, {
                                        yAxis: 60
                                    }, {
                                        yAxis: 80
                                    }, {
                                        yAxis: 100
                                    }]
                                }
                            }
                        }
                        // console.log('bar-option',option)
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option)
                        this.chartBar = myChart
                    } else {
                        myChart.clear()
                    }
                },
                initBoxplot(dataPms) {
                    //console.log('initBoxplot', dataPms)
                    const dataTemp = dataPms
                
                    if (this.chart) {
                        this.chart.dispose()
                    }
                    const myChart = echarts.init(document.getElementById('BoxplotID'))
                    if (dataTemp) {
        
                        // 动态批量创建局部变量
                        var objData = {}
                        for (let k = 0; k < nameList.length; k++) {
                            objData[nameList[k]] = []
                        }
                        for (let i = 0; i < dataTemp.length; i++) {
                            for (let j = 0; j < nameList.length; j++) {
                                objData[nameList[j]].push(dataTemp[i][nameList[j]])
                            }
                        }
                        // 对象赋值给数组
                        const dataAll = []
                        for (let k = 0; k < nameList.length; k++) {
                            dataAll.push(objData[nameList[k]])
                        }
                        // console.log('objData',objData)
                         //console.log('dataAll',dataAll)
                        // 指定图表的配置项和数据
                        var data = echarts.dataTool.prepareBoxplotData(dataAll)

                        var titlePart = ''
                        let nameSum = ''
                        let nameGrade = ''
                      
                            nameSum = 'RiverSum'
                            titlePart = ''
                            nameGrade = 'RiverGrade'
                     
                        var titleText = ''
                        // if (this.listQuery.riverOrReservoirID != null) {
                        //   titlePart = this.getRiverArrNameByID(this.listQuery.riverOrReservoirID)
                        // }

                        // titlePart + '生境评价分项指标箱型图'
                        // console.log('data',data)
                        var option = {
                            // title: [
                            //   {
                            //     text: titleText,
                            //     left: 'center'
                            //   }

                            // ],
                            toolbox: {
                                right: '20px',
                                // left: 'right',
                                feature: {
                                    // dataView: {
                                    //     show: true,
                                    //     title: '数据视图',
                                    //     lang:['<div class="table-header-title" >'+titleText+'</div>','关闭'],
                                    //     readOnly: true, //点击刷新按钮会导致第二列数据消失，此处设置只读是为了隐藏刷新按钮。
                                    //     optionToContent: function (opt) {
                                    //     //console.log('Boxplot-opt',opt)
                                    //         return  ToolboxDataView(opt);
                                    //     }
                                    // },
                                    saveAsImage: { show: true }
                                }
                            },
                            tooltip: {
                                trigger: 'item',
                                axisPointer: {
                                    type: 'shadow'
                                }
                            },
                            grid: {
                                backgroundColor: 'rgb(235, 235, 235)',
                                show: true,
                                left: '3%',
                                right: '4%',
                                containLabel: true,
                                bottom: '3%'
                            },
                            xAxis: {
                                type: 'category',
                                data: chineseNameList,
                                boundaryGap: true,
                                nameGap: 30,
                                splitArea: {
                                    show: false
                                },
                                splitLine: {
                                    show: false
                                },
                                axisLabel: {
                                    interval: 0, // 坐标轴刻度标签的显示间隔.设置成 0 强制显示所有标签。设置为 1，隔一个标签显示一个标签。
                                    rotate: 45, // 倾斜度 -90 至 90 默认为0
                                    textStyle: {
                                        fontWeight: 'bold', // 加粗
                                        color: '#000000' // 黑色
                                    }
                                }
                            },
                            yAxis: {
                                type: 'value',
                                name: ''
                                // splitArea: {
                                //     show: true
                                // }
                            },
                            series: [
                              {
                                  name: 'boxplot',
                                  type: 'boxplot',
                                  data: data.boxData,
                                  tooltip: {
                                      formatter: function(param) {
                                          // // [min,  Q1,  median (or Q2),  Q3,  max]
                                          return [
                                            '' + param.name + ': ',
                                            '上边界: ' + formatTwoDecimalPlaces(param.data[5]),
                                            '上四分位数: ' + formatTwoDecimalPlaces(param.data[4]),
                                            '中位数: ' + formatTwoDecimalPlaces(param.data[3]),
                                            '下四分位数: ' + formatTwoDecimalPlaces(param.data[2]),
                                            '下边界: ' + formatTwoDecimalPlaces(param.data[1])
                                          ].join('<br/>')
                                      }
                                  }
                              },
                              {
                                  name: '异常值',
                                  type: 'scatter',
                                  data: data.outliers
                              }
                            ]
                        }
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option)
                        this.chart = myChart
                    } else {
                        myChart.clear()
                    }
                },
                initPie(dataPms) {
                    const dataTemp = dataPms
                    if (this.chartPie) {
                        this.chartPie.dispose()
                    }
                    const myChart = echarts.init(document.getElementById('pieID'))
                    if (dataTemp) {
                        const topNum = 30
                        const nameList = []
                        const data1 = []
                        var seriesData = []
                        var titlePart = ''
                        let nameSum = 'RiverSum'
                        let nameGrade = 'RiverGrade'
                        var titleText = ''

                        const nameObj = { b: '极差', c: '差', d: '亚健康', e: '健康' }
                        var rowLast = {  b: 0, c: 0, d: 0, e: 0 }
                        var colorArr = [ '#cc0033', '#ff9933', '#ffde33', '#096']
                        for (var m = 0; m < dataTemp.length; m++) {
                            switch (dataTemp[m][nameGrade]) {
                                case '极差':
                                    rowLast.b++
                                    break
                                case '差':
                                    rowLast.c++
                                    break
                                case '亚健康':
                                    rowLast.d++
                                    break
                                case '健康':
                                    rowLast.e++
                                    break
                                default:
                                    break
                            }
                        }
                        // console.log('pie-rowLast', rowLast)
                        for (var c in rowLast) {
                            nameList.push(nameObj[c])
                            const objC = { value: rowLast[c], name: nameObj[c] }//, color:colorLast[c]
                            data1.push(objC)
                        }
                        // console.log('pie-data1', data1)
                        var option = {
                            color: colorArr,
                            title: {
                                text: titleText,
                                x: 'center'
                            },
                            toolbox: {
                                right: '20px',
                                // left: 'right',
                                feature: {
                                    // dataView: {
                                    //     show: true,
                                    //     title: '数据视图',
                                    //     lang:['<div class="table-header-title" >'+titleText+'</div>','关闭'],
                                    //     readOnly: true, //点击刷新按钮会导致第二列数据消失，此处设置只读是为了隐藏刷新按钮。
                                    //     optionToContent: function (opt) {
                                    //     //console.log('bar-opt',opt)
                                    //         return  ToolboxDataView(opt);
                                    //     }
                                    // },
                                    saveAsImage: { show: true }
                                }
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: function(data) {
                                    return (data.seriesName + '<br/>' + data.name + ' : ' + formatTwoDecimalPlaces(data.value) + '个' + ' (' + formatTwoDecimalPlaces(data.percent) + '%' + ')')//
                                }
                            },
                            legend: {
                                top: topNum,
                                // orient: 'vertical',
                                left: '5px',
                                data: nameList
                            },
                            series: [
                              {
                                  name: '类型占比',
                                  type: 'pie',
                                  radius: '55%',
                                  // center: ['65%', '30%'],
                                  center: ['50%', '60%'],
                                  data: data1,
                                  itemStyle: {
                                      emphasis: {
                                          shadowBlur: 10,
                                          shadowOffsetX: 0,
                                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                                      }
                                  },
                                  label: {
                                      normal: {
                                          show: false
                                      }
                                  }
                              }
                            ]
                        }
                        // console.log('pie-option',option)
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option)
                        this.chartPie = myChart
                    } else {
                        myChart.clear()
                    }
                }

            



            }
        });

        /************** vue外部方法**************************************/
        function getTips(name, value) {
           
            var data = habitatScoreArr;
            var value2 = '';
            var arr1 = [];
            for (let i = 0; i < data.length; i++) {
                if (data[i].Abridge == name) {
                    arr1.push(data[i]);
                    //if (value >= data[i].Score) {
                    //    value2 = data[i].EvaluateStandard
                    //}
                }
            }
            //console.log('arr1', arr1);
            for (let j = 0; j < arr1.length; j++) {
                if (j < arr1.length - 1) {
        
                    if (value == arr1[j].Score || value > arr1[j].Score) {
                        value2 = arr1[j].EvaluateStandard;
                        break; 
                    }
                    //data是从大到小排序的，当前值value>=大值是，就必须break跳出for循环，否则value也一定>=后面的小值；
                    //if (arr1[j].HabitatScoreType == 5) {
                    //    console.log('arr1', arr1)
                    //    if (value == arr1[j].Score  ) {
                    //     console.log(arr1[j].DValue, arr1[j].Score, value, value2)
                    //    }
                    //    if (value > arr1[j].Score) {
                    //        console.log(111,arr1[j].DValue, arr1[j].Score, value, value2)
                    //    }
                    //}
                    /*
                        河道改变程度 1.5 1.5 渠道化出现较少，通常在桥墩周围处出现渠道化，对水生生物影响小
                        111 "河道改变程度" 1 1.5 "渠道化比较广泛，在两岸有筑堤或桥梁支柱出现，对水生生物有影响
                    */

                } else if (arr1.length - 1 == j && value2 == '') {
                    value2 = arr1[j].EvaluateStandard;
                }
            }
            //console.log(arr1[j].DValue, arr1[j].Score, value, value2)
            return value2
        }

        function renderCell(h, params) {
            //console.log('h', h)
            //console.log('params', params)
            var tipsContent = getTips(params.column.key, params.row[params.column.key])
            //console.log('tipsContent', tipsContent)
            var values = formatTwoDecimalPlaces(params.row[params.column.key])

            return h('tooltip',
              {
                  props: {
                      placement: 'top'
                  }
              },
              [
                values,
                h('div',
                  {
                      slot: 'content',
                      style: { whiteSpace: 'normal', wordBreak: 'break-all' }

                  },
                     tipsContent
                 )
              ]
            )
        }
 

        function renderHeader1(h, params) {
            //  console.log('h', h)
            //  console.log('params', params)
            return h('tooltip',
              {
                  props: {
                      transfer: true,
                      placement: 'bottom-end'//下右
                  }
              },
              [
                //h('span', '优势度'),
                h('span', params.column.title),
                h('div',
                  {
                      'class': {
                          'custom-tooltip-content': true
                      },
                      slot: 'content'

                  },
                  [
                    h('p', '物种所占优势程度，由物种密度和采样点出现的频次计算所得。')

                  ]
                )
              ]
            )
        }
        function ToolboxDataView(opt) {
            var unit = ''
            if (opt.yAxis[0].name != undefined && opt.yAxis[0].name != null && opt.yAxis[0].name != '') {
                unit = '<div class="echart-table-uint">  ' + opt.yAxis[0].name + ' </div>'
            }
            var axisData = opt.xAxis[0].data // 坐标数据
            var series = opt.series // 折线图数据
            var tdHeads = '<td  >名称</td>' // 表头第一列
            var tdBodys = '' // 表数据
            // 组装表头
            for (var i = 0; i < series.length; i++) {
                tdHeads += '<td >' + series[i].name + '</td>'
            }
            var table = '<table   class="echart-table" ><tbody><tr>' + tdHeads + ' </tr>'
            // 组装表数据
            // 行数
            for (var i = 0; i < axisData.length; i++) {
                // 列数
                for (var j = 0; j < series.length; j++) {
                    var temp = series[j].data[i]

                    if (temp != null && temp != undefined) {
                        tdBodys += '<td>' + formatTwoDecimalPlaces(temp) + '</td>'
                    } else {
                        tdBodys += '<td></td>'
                    }
                }
                table += '<tr><td >' + axisData[i] + '</td>' + tdBodys + '</tr>'
                tdBodys = ''
            }
            table += '</tbody></table>'
            return unit + table
        }

        function TooltipFormatter(data) {
            var seriesNames = []
            var formateStrings = []
            var formateString = ''
            if (data.length > 0) {
                formateStrings.push(data[0].axisValue)
                for (var i in data) {
                    var item = data[i]
                    seriesNames.push(item.seriesName)
                    if (item.value != undefined) {
                        formateStrings.push(item.marker + item.seriesName + ': ' +  formatTwoDecimalPlaces(item.value))
                    }
                }
                formateString = formateStrings.join('<br />')
                return formateString
            }
        }




        function translateRiverGrade(a) {
            
            var value = "";
            if (a <= 40) {
                value = "极差"
            }else if(a<=60){
                value = "差";
            }else if(a<=80){
                value = "亚健康";
            } else if (a <= 100) {
                value = "健康";
            }

            //console.log("a", a);
            //console.log("value", value);
            return value;
        }


    </script>

　　

转载来源：https://blog.csdn.net/qq_32678401/article/details/97802414

iview--table表格title提示和气泡提示

文本不换行，超出显示省略号，两种提示方式，title提示和气泡提示

气泡提示不足：当内容没超过一行，也会出现气泡提示。觉得不如Element-UI的table组件好用。

<Table border :columns="tableColumn" :data="tableData"></Table>
 
mounted() {
    this.initTableColumn('tableColumn')
},
methods: {
  initTableColumn(columnName) {
    //  提示一：title提示
    for (let i = 0; i < this[columnName].length; i++) {
      if (!this[columnName][i].render) {
        this.$set(this[columnName][i], 'ellipsis', true)
        this.$set(this[columnName][i], 'render', (h, params) => {
          return h('span', {attrs: {title: params.row[params.column.key]}}, params.row[params.column.key])
        })
      }
    }
    
    //  title提示
    for (let i = 0; i < this[columnName].length; i++) {
      if (!this[columnName][i].render) {
        this.$set(this[columnName][i], 'render', (h, params) => {
          return h('div', [
            h('span', {
              style: {
                display: 'inline-block',
                 '100%',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap'
              },
              domProps: {
                title: params.row[params.column.key]
              }
            }, params.row[params.column.key])
          ])
        })
      }
    }
 
    // 提示二：气泡提示
    for (let i = 0; i < this[columnName].length; i++) {
      if (!this[columnName][i].render) {
        this.$set(this[columnName][i], 'ellipsis', true)
        this.$set(this[columnName][i], 'render', (h, params) => {
          return h('Tooltip', {
            props: { placement: 'top' }
          }, [
            params.row[params.column.key],
            h('span', { slot: 'content', style: { whiteSpace: 'normal', wordBreak: 'break-all' } }, params.row[params.column.key])
          ])
        })
      }
    }
 
  }
}