8、vue_map使用

map的使用

// 测试数据集list
const list = [
  { id: 1, name: "张三", sex: "男", age: 20 },
  { id: 2, name: "李四", sex: "女", age: 30 },
  { id: 3, name: "王五", sex: "男", age: 40 },
];
// 1、获取数据集的一个字段组成新数组
let res1 = list.map((item) => item.name);
console.log(res1);
// 输出：
// ['张三', '李四', '王五']

// 2、重名数据集的某个字段组成新的数组
let res2 = list.map((item) => ({ newname: item.name }));
console.log(res2);
// 输出：
// [{newname: '张三'},{newname: '李四'},{newname: '王五'}]

// 3、重名数据集的多个字段组成新的数组
let res3 = list.map((item) => ({ newname: item.name, newid: item.id }));
console.log(res3);
// 输出：
// [{newname: '张三', newid: 1},{newname: '李四', newid: 2},{newname: '王五', newid: 3}]

// 4、拼接数据集的多个字段组成新的数组
let res4 = list.map((item) => ({ newname: item.name + item.id }));
console.log(res4);
// 输出：
// [{newname: '张三1'},{newname: '李四2'},{newname: '王五3'}]

 

echarts自定义tooltip显示
使用echarts展示图形的时候，鼠标滑倒图像上，想展示除了系列名，数据名，数据值以外的数据，这时需要使用tooltip的fommater方式进行配置，另外对数据格式也有一定的要求。

series: [
  {
    name: "销售额",
    type: "bar",
    data: [{ value: "30" }, { value: "50" }],
  },
];
// 修改data的内容，把data改为由value和date组成的json串，这样不会影响图形的展示。
series: [
  {
    name: "销售额",
    type: "bar",
    data: [
      { date: "Monday", value: "30" },
      { date: "Tuesday", value: "50" },
    ],
  },
];

 

    tooltip: {
      // 鼠标悬浮提示框显示 X和Y 轴数据
      trigger: "axis",
      formatter(params) {
        var res =
          params[0].name +
          "<br/>" + "日期：" + params[0].data.data +
          "<br/>" + "金额：" + params[0].data.value;
        return res;
      },
      backgroundColor: "rgba(32, 33, 36,.7)",
      borderColor: "rgba(32, 33, 36,0.20)",
      borderWidth: 1,
      textStyle: {
        // 文字提示样式
        color: "#fff",
        fontSize: "12",
      },
      axisPointer: {
        // 坐标轴虚线
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },

vue 保留小数点后两位以及转化为百分比

// 1、将小数转化为百分比（保留四位小数，四舍五入）
export function ChangeDecimalToPercentage(data) {
  var data1 = (data*100).toFixed(4)+"%"
  return data1
};
// 保留小数点后两位四舍五入
export function NumFilter (value) {
  // 截取当前数据到小数点后两位
  let realVal = parseFloat(value).toFixed(2)
  return realVal
};
// 3、留两位小数不四舍五入
export function numFilter (value) {
  // 截取当前数据到小数点后三位
  let tempVal = parseFloat(value).toFixed(3)
  let realVal = tempVal.substring(0, tempVal.length - 1)
  return realVal
};