Vue使用Echarts 制作数据分析表

前面的相关步骤参考我之前发过的文章。↓↓↓

vue使用Echarts相关图表的方法以及参数说明*

案例2：数据分析表图

<template>
	<echarts :options="option" :auto-resize="true">echarts>
template>

<script>
export default {
      
  name:'cdp-epy-attendanceRate-map',
  data() {
      
    return {
      
      option: {
      }
    };
  },
  created() {
      
    this.getEpyData();
  },
  methods: {
      
    getEpyData() {
      
      this.option = {
      
        tooltip: {
      
          trigger: "axis",
          padding: [5, 45, 5, 20],
          backgroundColor: "rgba(255,255,255,0.8)",
          extraCssText:
            "box-shadow: 0px 0px 8px 0px rgba(150,178,191,0.5);line-height:30px; white-space:pre-wrap",
          textStyle: {
      
            color: "#313131",
            fontFamily: "PingFangSC, PingFangSC-Regular",
            fontSize: 12,
          },
          // formatter: `{a}  {c}%`
          // 上下两种写法的效果是相等的。自行参考。顶部链接中，有相关解释
          formatter: res => {
       
            let {
       marker, seriesName, value } = res[0];
            return marker + " " +seriesName + "  " + value +"%" +  "\n";
          }
        },
        legend: {
      
          icon: "circle",
          itemHeight: 8,
          itemWidth: 8,
          right: "4%",
          top:'10%',
          textStyle: {
      
            color: "#485465"
          }
        },
        grid: {
        // X轴 Y轴 的相关参数
          left: "7px", 
          right: "20px",
          top:'60px',
          bottom: '5px',
          containLabel: true  // 是否显示坐标轴上的标签
        },
        xAxis: {
        // x轴
          type: "category",  //  'value' 数值轴，适用于连续数据。 'category' 类目轴，适用于离散的类目数据。 'time' 时间轴，适用于连续的时序数据。 'log' 对数轴。适用于对数数据。
          boundaryGap: false, // 个人理解: 坐标轴标签 与 坐标点 是否对齐。
          data: ["周一", "周二", "周三", "周四", "周五", "周六"], // x轴数据
          axisLabel: {
        // x轴 文字的样式
            color: "#C9CFD4",
            fontSize: 10,
          },
          axisLine: {
       // x轴线 的样式 
            lineStyle: {
      
              color: "#eee",
            }
          },
          splitLine: {
       // x轴 对应网格线的样式
            show: true,
            lineStyle: {
      
              color: "#eee",
              width: 1,
            }
          }
        },
        yAxis: {
       // y轴
          type: "value",  // 'value' 数值轴，适用于连续数据。== 曲线
          axisLabel: {
      
            formatter: "{value}%", // 自定义
            color: "#C9CFD4",
            fontSize: 10,
          },
          axisLine: {
       // 同上
            lineStyle: {
      
              color: "#eee",
              width: 1
            }
          },
          splitLine: {
       // 同上
            lineStyle: {
      
              color: "#eee",
              width: 1,
            }
          }
        },
        series: [
          {
      
            symbol: "circle", // 标记的类
            symbolSize: 8,  // 标记大小
            smooth: true, // 是否平滑曲线显示
            name: "收益率", 
            type: "line",
            itemStyle: {
        // 坐标轴上 白色包裹黄色的小球球 就是这个
              color: "#FFD395",
              borderColor: "#fff", 
              borderWidth: 4,
              shadowColor: "rgba(255, 233, 177, .5)",
              shadowBlur: 0
            },
            lineStyle: {
       // 黄线的阴影样式处理
              width: 4,
              shadowBlur: 6,
              shadowColor: "rgba(255,233,177,0.8)",
              shadowOffsetX: 0,
              shadowOffsetY: 4
            },
            data: [10, 12, 1, 14, 39, 20] // 数据源
          }
        ]
      };
    }
  }
};
script>

更新一个数据分析图 后续还有更多图示案例。欢迎评论区指出

Mar.8 | 女神节 ---- 祝愿所有的女孩子，健康幸福，青春永驻~~~