1. echarts图形上展示的数据保留两位小数
toFixed(): 四舍五入
series: [
{
name: config.seriesName[0],
type: 'bar',
stack: 'total',
barWidth: 10,
emphasis: {
focus: 'series'
},
data: [
(data[0][config.fields[0]] / 10000).toFixed(2),
(data[1][config.fields[0]] / 10000).toFixed(2),
(data[2][config.fields[0]] / 10000).toFixed(2),]
},
{
name: config.seriesName[1],
type: 'bar',
stack: 'total',
barWidth: 10,
emphasis: {
focus: 'series'
},
data: [
(data[0][config.fields[2]] / 10000).toFixed(2),
(data[1][config.fields[2]] / 10000).toFixed(2),
Math.floor(data[2][config.fields[2]] / 100) / 100]
},
],
有的数字使用toFixed() 保留两位不成功,只能保留一位;
在tooltip(提示框组件)的formatter(提示框浮层内容格式器)配置:
tooltip: {
trigger: 'item',
formatter: function (datas) {
// console.log(datas,'datas')
let res = ''
let val = Number(datas.data).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')
res += val;
return res
}
},
2. echarts中的legend中某个数据字段 默认隐藏(或默认上次操作结果
在折线图函数中的:legend添加selected属性
function getXxOption(op) { //折线
return {
title: {
text: op.title
},
tooltip: {
trigger: 'axis'
},
legend: {
left: 300,
data: op.legendTitle,
selected: {} //新增属性
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: op.xData
},
yAxis: {
type: 'value',
scale: true
},
series: op.seriesVal,
}
}
在vue组件中:通过判断是否包含字符,对selected添加对应属性值
xxInit(params) {
console.log(params, "图表初始化");
if (this.xxChart) {
this.xxChart.clear();
}
this.$nextTick(function () {
let chartDom = document.getElementById(`xx`);
this.xxChart = Echarts5.init(chartDom);
let option = getXxOption(params);
//判断
var selected_item = {};
for (var k = 0; k < option.legend.data.length; k++) {
var key_name = option.legend.data[k];
if (key_name.indexOf("(上月)") != -1) {
selected_item[key_name] = false;
} else {
selected_item[key_name] = true;
}
}
option.legend.selected = selected_item;
console.log(option);
this.xxChart.setOption(option);
});
},
3. 封装vue项目中的table组件
<template>
<el-table
class="st-table"
:data="data" //显示的数据
height="500"
border //是否带有纵向边框
:header-cell-style="{padding:'3px 0',background:'rgb(245, 247, 250)','font-weight':400,color:'black','text-align':'center'}"
:cell-style="{'text-align':'center',padding:'7px 0px',}"
style="width: 100%">
//动态渲染表格中的数据
<el-table-column v-for="item,index in fields" :key="index"
show-overflow-tooltip //当内容过长被隐藏时显示 tooltip
:prop="item.prop"
:label="item.label"
:sortable="item.sortable"
:width="item.width">
</el-table-column>
</el-table>
</template>
<script>
export default {
name:'STTable',
props:['data','fields'],
data(){
return({
})
},
}
</script>
表头数据:tableFields.js
const onefields = [
{ prop: 'name', label: '姓名',width: 220, sortable: true },
{ prop: 'stuId', label: '学号',width: 220, sortable: true },
{ prop: 'grade', label: '班级',width: 220, sortable: true },
{ prop: 'major', label: '专业',width: 220, sortable: true },
{ prop: 'age', label: '年龄',width: 220, sortable: true },
{ prop: 'tel', label: '联系方式', width: 220,sortable: true },
]
export default {
onefields,
}
vue页面中的引入:
<template>
<st-table
:data="TableData"
:fields="tableFields.oneFields"
/>
</template>
<script>
import STTable from "./components/STTable.vue";
import tableFields from "./tableFields";
export default {
data() {
return {
TableData:{},
tableFields: {}
},
components: {
stTable: STTable,
},
}
</script>
封装多级表头的表格:
https://blog.csdn.net/liub37/article/details/82906141