vue+elementUI中Echarts的饼图和散点图的使用

最近的项目是考试管理系统的项目,里面使用到了Echarts,第一次使用,看文档看的脑阔疼,整理了一下代码,做了个小demo给大家瞄一哈.

以散点图为例 首先需要设置一个有固定宽高的div占位置

<template>
  <div class="user-room">
    <div id="scatterReport" style="width: 1000px;height: 400px;"></div>
  </div>
</template>

然后引入echarts并且模拟数据

import echarts from "echarts";
export default {
  name: "",
  data() {
    return {
      charts: "",
      scatterData: [[9, 24, "张三"], [18, 14, "李四"]],
      score: "120",
      time: "180"
    };
  },
}

接下来设置methods方法

methods: {
    drawScatter(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        title: {
          text: "时长对比",
          left: "left"
        },
        tooltip: {
          trigger: "item"     //需要hover时出现黑框必须填这个
        },
        xAxis: {
          type: "value",
          max: this.score,
          min: 0,
          name: "考试得分",
          splitLine: {
            lineStyle: {
              type: "dashed"
            }
          },
          maxInterval: this.score * 0.2,
          minInterval: 1,
          splitNumber: 4
        },
        yAxis: {
          type: "value",
          name: "考试用时(分钟)",
          max: this.time,
          splitLine: {
            lineStyle: {
              type: "dashed"          //设置Y轴的虚线
            }
          },
          maxInterval: this.time * 0.2,   //设置最大间隔
          minInterval: 1,                //设置最小间隔
          splitNumber: 4                //设置最多有多少个间隔
        },
        series: [
          {
            type: "scatter",      //表明这是散点图
            symbolSize: 10,      //控制散点的大小
            data: this.scatterData,   //连接数据
            color: "#47c2ac",    //控制散点的颜色
            tooltip: {
              formatter: params => {       
              //formatter:'{a} </br>{b} </br> {c}' 这个地方可以打印一下这个 ,当时我{c}一直是个数组 {c0}也拆不了 ,于是使用了下面的这个方法
                return `姓名 : ${params.value[2]} <br/> 
                        考试得分 : ${params.value[0]} <br/> 
                        考试用时 : ${params.value[1]}分钟`;
              }
            }
          }
        ]
      });
    }
  },

最后还需要在mounted中调用方法

mounted() {
    this.$nextTick(function() {
      this.drawScatter("scatterReport");
    });
  }

饼图有机会再发吧

如果有帮助的话就给爷点个赞吧