DataDisplayPlatform_WebApp/src/components/LineChart.vue

<template>
  <div id="lineChartRef"></div>
</template>

<script>
import { ref, onMounted, computed, inject } from "vue";
import { mapState } from "vuex";
import exchangeUrl from "utils/exchangeUrl";

export default {
  setup() {
    let echarts = inject("ec");

    let lineChart = ref({});
    let option = ref({
      title: {
        text: "汇很多航运数字经济区块链认证",
        textStyle: {
          fontSize: "16",
          fontFamily: " PingFangSC-Semibold, PingFang SC",
          fontWeight: 600,
          color: " #F9FFFF",
        },
        top: "45",
        left: "40",
      },
      legend: {
        data: ["货种", "吨位"],
        bottom: "10px",
        icon: "path://M102.4 443.904h819.2v136.704H102.4z",
        textStyle: {
          fontSize: "12",
          fontFamily: "PingFangSC-Regular, PingFang SC",
          fontWeight: 400,
          color: " #9199A3",
        },
        itemGap: 50,
      },
      grid: {
        top: "110",
        left: "40",
        right: "40",
        bottom: "50",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: [
          "9-21 00:00",
          "9-21 00:00",
          "9-22 00:00",
          "9-23 00:00",
          "9-24 00:00",
          "9-25 00:00",
          "9-26 00:00",
        ],
      },
      yAxis: {
        type: "value",
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed", //默认实线，dashed虚线
          width: 10,
          color: "#000",
        },
      },
      series: [
        {
          name: "货种",
          data: [0.42, 0.35, 0.71, 0.67, 0.85, 0.52, 0.79],
          type: "line",
          symbolSize: 0,

          itemStyle: {
            lineStyle: {
              color: "#5B8FF9",
            },
          },
          areaStyle: {
            //右，下，左，上
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "#091e3b",
                },
                {
                  offset: 1,
                  color: "#1b293c",
                },
              ],
              false
            ),
          },
        },
        {
          name: "吨位",
          data: [0.32, 0.25, 0.51, 0.37, 0.65, 0.32, 0.69],
          type: "line",
          symbolSize: 0,
          itemStyle: {
            lineStyle: {
              color: "#5AD8A6",
            },
          },
          areaStyle: {
            //右，下，左，上
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "#203748",
                },
                {
                  offset: 1,
                  color: "#1b293c",
                },
              ],
              false
            ),
          },
        },
      ],
      backgroundColor: "rgba(0, 0, 0, 0)",
    });

    function init() {
      lineChart.value = echarts.init(document.getElementById("lineChartRef"));
      lineChart.value.setOption(option.value);
    }
    onMounted(() => {
      init();
    });
    return {
      init,
      exchangeUrl,
    };
  },
};
</script>
<style lang="scss" scoped>
#id {
  width: 100%;
  height: 100%;
}
</style>