qp_onemap_ui/src/components/yxgl/EchartsDome.vue

<template>
  <div class="echartsDome">
    <div class="echartsDome_title">{{ title }}</div>
    <div class="echartsDome_chart" ref="chartContainer"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "EchartsDome",
  props: {
    title: {
      type: String,
      default: "图表标题",
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chartContainer);

      let option = {
        tooltip: {
          trigger: "axis", // 坐标轴触发提示
          axisPointer: { type: "shadow" },
        },
        legend: {
          data: ["tokyo", "london"],
          textStyle: { color: "#fff" }, // 图例文字颜色
        },
        xAxis: {
          type: "category",
          data: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
            "Oct",
            "Nov",
          ],
          axisLine: { lineStyle: { color: "#fff" } }, // 坐标轴颜色
          axisTick: { show: false }, // 隐藏刻度
          splitLine: { show: false }, // 隐藏分割线
        },
        yAxis: {
          type: "value",
          max: 30,
          axisLine: { lineStyle: { color: "#fff" } },
          splitLine: {
            lineStyle: {
              type: "dashed", // 虚线网格
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: "调用次数",
            type: "line",
            data: [7, 7, 15, 19, 21, 22, 25, 26, 23, 19, 12], // 模拟数据
            lineStyle: { color: "#42a5f5" }, // 蓝色线条
            itemStyle: { color: "#42a5f5" }, // 节点颜色
            symbol: "circle", // 节点形状
            symbolSize: 6, // 节点大小
          },
          {
            name: "平均响应时间",
            type: "line",
            data: [3, 3, 6, 12, 15, 17, 18, 17, 14, 10, 6], // 模拟数据
            lineStyle: { color: "#4caf50" }, // 绿色线条
            itemStyle: { color: "#4caf50" },
            symbol: "circle",
            symbolSize: 6,
          },
        ],
      };
      // 绘制图表
      this.chart.setOption(option);
    },
  },
};
</script>

<style scoped>
.echartsDome {
  width: 100%;
  height: 400px;
  /* background-color: #222;
  color: #fff; */
  padding: 20px;
  box-sizing: border-box;
}
.echartsDome_title {
  font-size: 16px;
  /* font-weight: bold; */
}
.echartsDome_chart {
  width: 100%;
  height: 360px;
}
</style>