xjsaas-ui/src/views/big-screen/disease-components/disease-trends.vue

<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-18 10:16:30
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-10-18 11:32:35
 * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-trends.vue
 * @Description: 病害巡检-病害趋势
-->
<template>
  <div class="content" ref="trendsChart"></div>
</template>
  
  <script>
import * as echarts from "echarts";
export default {
  name: "DiseaseTrends",
  data() {
    return {};
  },
  created() {
    this.geteEhartList();
  },
  methods: {
    /* 获取折线图数据 */
    geteEhartList() {
      this.$nextTick(() => {
        this.drawChart();
      });
    },
    /* 绘制折线图 */
    drawChart() {
      const chart = echarts.init(this.$refs.trendsChart);
      chart.setOption({
        //你的代码
        title: {
          text: "",
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
        legend: {
          top: "top",
          icon: "roundRect",
          itemWidth: 15,
          itemHeight: 10,
          textStyle: {
            color: "#808C9F",
          },
        },
        grid: {
          top: "15%",
          left: 0,
          right: "10%",
          bottom: "10%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
          backgroundColor: "rgba(9, 24, 48, 0.5)",
          borderColor: "rgba(75, 253, 238, 0.4)",
          textStyle: {
            fontSize: 12,
            color: "#808C9F",
          },
          confine:true,
        },
        xAxis: {
          type: "category",
          data: ["8:00", "9:00", "10:00", "11:00", "12:00", "13:00"],
          axisLine: {
            lineStyle: {
              color: "rgba(60,132,163,0.4)", // x轴线颜色
            },
          },
          axisTick: {
            show: false, // 是否显示x轴的刻度
          },
          axisLabel: {
            interval: 0,
            color: "#808C9F",
            fontSize: 12,
          },
          boundaryGap: false, // true折线图以x轴刻度为中心点  false折线图折线从头开始
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "#808C9F",
            fontSize: 12,
            formatter: function (value) {
              return value + "";
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "rgba(60,132,163,0.2)",
            },
          },
        },
        series: [
          {
            name: "龟裂",
            type: "line",
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#FFC100",
                },
                {
                  offset: 1,
                  color: "rgba(98,74,0,0)",
                },
              ]),
            },
            lineStyle: {
              width: 1,
              color: "#FFC100",
            },
            // 设置节点样式
            showSymbol: false,
            symbol: "circle", // 可以选择 circle, diamond, pin 等
            symbolSize: 10, // 节点大小
            itemStyle: {
              color: "#FFC100", // 节点颜色
            },
            data: [15, 29, 32, 5, 14, 42],
          },
          {
            name: "车辙",
            type: "line",
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#08B4A6",
                },
                {
                  offset: 1,
                  color: "rgba(8,180,166,0)",
                },
              ]),
            },
            lineStyle: {
              width: 1,
              color: "#08B4A6",
            },
            // 设置节点样式
            showSymbol: false,
            symbol: "circle", // 可以选择 circle, diamond, pin 等
            symbolSize: 10, // 节点大小
            itemStyle: {
              color: "#08B4A6",
            },
            data: [30, 35, 32, 35, 18, 72],
          },
          {
            name: "坑槽",
            type: "line",
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#146fd7",
                },
                {
                  offset: 1,
                  color: "rgba(20, 111, 215,0)",
                },
              ]),
            },
            lineStyle: {
              width: 1,
              color: "#146fd7",
            },
            // 设置节点样式
            showSymbol: false,
            symbol: "circle", // 可以选择 circle, diamond, pin 等
            symbolSize: 10, // 节点大小
            itemStyle: {
              color: "#146fd7",
            },
            data: [20, 25, 12, 25, 8, 62],
          },
          {
            name: "横向裂缝",
            type: "line",
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#994EFF",
                },
                {
                  offset: 1,
                  color: "rgba(153,78,255,0)",
                },
              ]),
            },
            lineStyle: {
              width: 1,
              color: "#994EFF",
            },
            // 设置节点样式
            showSymbol: false,
            symbol: "circle", // 可以选择 circle, diamond, pin 等
            symbolSize: 10, // 节点大小
            itemStyle: {
              color: "#994EFF",
            },
            data: [40, 45, 32, 45, 38, 82],
          },
        ],
      });
      window.addEventListener("resize", () => {
        chart.resize();
      });
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>