example

<template>
  <div class="line">
    <div class="line1" ref="line1">
    </div>
  </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, ref, reactive } from 'vue';

let line1 = ref<any>(null)
let myChart = reactive<any>(null)
// 1. 实例化对象
// 2.指定配置
let option = {
  tooltip: {
    trigger: "axis",
  },
  legend: {
    top: "0%",
    data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
    textStyle: {
      color: "rgba(255,255,255,.5)",
      fontSize: "12",
    },
  },

  grid: {
    left: "10",
    top: "30",
    right: "10",
    bottom: "10",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      // x轴更换数据
      data: [
        "01",
        "02",
        "03",
        "04",
        "05",
        "06",
        "07",
        "08",
        "09",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23",
        "24",
        "25",
        "26",
        "26",
        "28",
        "29",
        "30",
      ],
      // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: 12,
        },
      },
      // x轴线的颜色为   rgba(255,255,255,.2)
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.2)",
        },
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      axisTick: { show: false },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        },
      },
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: 12,
        },
      },
      // 修改分割线的颜色
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        },
      },
    },
  ],
  series: [
    {
      name: "邮件营销",
      type: "line",
      smooth: true,
      // 单独修改当前线条的样式
      lineStyle: {
        color: "#0184d5",
        width: "2",
      },
      // 填充颜色设置
      areaStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "red", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "blue", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
        shadowColor: "rgba(0, 0, 0, 0.1)",
      },
      // 设置拐点
      symbol: "circle",
      // 拐点大小
      symbolSize: 8,
      // 开始不显示拐点， 鼠标经过显示
      showSymbol: false,
      // 设置拐点颜色以及边框
      itemStyle: {
        color: "#0184d5",
        borderColor: "rgba(221, 220, 107, .1)",
        borderWidth: 12,
      },
      data: [
        30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 30,
        60, 20, 40, 30, 40, 30, 40, 30, 40, 20, 60, 50, 40,
      ],
    },
    {
      name: "联盟广告",
      type: "line",
      smooth: true,
      lineStyle: {
        normal: {
          color: "#00d887",
          width: 2,
        },
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(0, 216, 135, 0.4)",
              },
              {
                offset: 0.8,
                color: "rgba(0, 216, 135, 0.1)",
              },
            ],
            false
          ),
          shadowColor: "rgba(0, 0, 0, 0.1)",
        },
      },
      // 设置拐点 小圆点
      symbol: "circle",
      // 拐点大小
      symbolSize: 5,
      // 设置拐点颜色以及边框
      itemStyle: {
        color: "#00d887",
        borderColor: "rgba(221, 220, 107, .1)",
        borderWidth: 12,
      },
      // 开始不显示拐点， 鼠标经过显示
      showSymbol: false,
      data: [
        130, 10, 20, 40, 30, 40, 80, 60, 20, 40, 90, 40, 20, 140, 30, 40, 130,
        20, 20, 40, 80, 70, 30, 40, 30, 120, 20, 99, 50, 20,
      ],
    },
  ],
};

onMounted(() => {
  myChart = echarts.init(line1.value);

  myChart.setOption(option);
})
  // 3. 把配置给实例对象
</script>
<style scoped lang="scss">
.line1 {
  width: 100%;
  height: 400px;
  background-image: url(../examples/images/bg.jpg);
  position: relative;

}
</style>