Echarts散点图加x轴y轴标题

Echarts散点图加x轴y轴标题

<template>
  <div>
    <p class="trave_title">{{ title }}</p>
    <div :style="'width: 100%;' + 'height:' + height + ';'" :id="id"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";

export default {
  name: "sandian",
  props: {
    id: String,
    title: String,
    colorArr: Object,
    height: String,
    sdData:Object
  },
  data() {
    return {
      random: "",
      random1: "",
    };
  },
  created() {
    this.random = Math.random();
    this.random1 = Math.random();
    console.log(this.random, this.random1);
  },
  mounted() {
    this.initEchart(this.id);
  },
  methods: {
    initEchart(id) {
      var chartDom = document.getElementById(id);
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        backgroundColor: this.colorArr.bgColor,
        xAxis: {
          name: this.sdData.xName,
          nameLocation: "center",
          nameGap: 30,
          axisLine: {
            lineStyle: {
              color: this.colorArr.labelColor,
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: this.colorArr.labelColor,
            },
          },
          splitLine: {
            //分割线配置
            show: true,
            lineStyle: {
              color: this.colorArr.lineColor,
            },
          },
        },
        yAxis: {
          name: this.sdData.yName,
          nameLocation: "center",
          nameGap: 30,
          nameRotate: "90",
          axisLine: {
            lineStyle: {
              color: this.colorArr.labelColor,
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: this.colorArr.labelColor,
            },
          },
          splitLine: {
            //分割线配置
            show: true,
            lineStyle: {
              color: this.colorArr.lineColor,
            },
          },
        },
        // backgroundColor: "#fff",
        tooltip: {
          trigger: "item",
        },
        grid: {
          top: "10%",
          left: "7%",
          right: "8%",
          bottom: "10%",
          containLabel: true,
        },
        series: this.sdData.data
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

sdData数据信息

timeSdData: {
        xName: "A 时 间 比 (time/maxAllTime)",
        yName: "T 时 间 比 (time/maxThisTime)",
        data: [
          {
            symbolSize: 10,
            data: [
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
            ],
            type: "scatter",
          },
          {
            symbolSize: 10,
            data: [
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
              [Math.random(), Math.random()],
            ],
            type: "scatter",
          },
        ],
      },