HB项目需求

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