iview 表头table 悬浮提示tooltip ；iview 单元格悬浮提示 ；iview table header cell tooltip;
一、批量悬浮提示
二、提示数据举例
三、核心方法：
//单元格提示
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;
width: auto;
height: auto;
margin-bottom: 0px;
}
/*custom-tooltip 宽度*/
.ivu-tooltip-inner {
max-width: 600px;
}
.custom-tooltip-content {
white-space: normal;
width: 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{
width: 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="width: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="width: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="width:100%;height:500px" />
</i-Col>
<i-Col span="8">
<div id="pieID" style="width: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="width: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',
width: '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])
])
})
}
}
}
}
树立目标，保持活力，gogogo！
