提示

smooth 是否平滑曲线显示。
symbol 拐点样式，可设置自定义图片，自带:'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

example

<template>
  <div class="line">

    <div class="line1" ref="line1">
  
    </div>
    <div class="btns">
      <el-button type="text" size="mini" @click="changeYear('2021')">2021</el-button>
      <el-button type="text" size="mini" @click="changeYear('2022')">2022</el-button>
    </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)
var yearData = [
  {
    year: "2022", // 年份
    data: [
      // 两个数组是因为有两条线
      [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
    ]
  },
  {
    year: "2021", // 年份
    data: [
      // 两个数组是因为有两条线
      [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
      [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
    ]
  }
];
// 1. 实例化对象
// 2.指定配置
let option = {
  // 通过这个color修改两条线的颜色
  color: ["#00f2f1", "#ed3f35"],
  tooltip: {
    trigger: "axis"
  },
  legend: {
    // 如果series 对象有name 值，则 legend可以不用写data
    // 修改图例组件 文字颜色
    textStyle: {
      color: "#4c9bfd"
    },
    // 这个10% 必须加引号
    right: "10%"
  },
  grid: {
    top: "20%",
    left: "3%",
    right: "4%",
    bottom: "3%",
    show: true, // 显示边框
    borderColor: "#012f4a", // 边框颜色
    containLabel: true // 包含刻度文字在内
  },

  xAxis: {
    type: "category",
    boundaryGap: false,
    data: [
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月"
    ],
    axisTick: {
      show: false // 去除刻度线
    },
    axisLabel: {
      color: "#4c9bfd" // 文本颜色
    },
    axisLine: {
      show: false // 去除轴线
    }
  },
  yAxis: {
    type: "value",
    axisTick: {
      show: false // 去除刻度线
    },
    axisLabel: {
      color: "#4c9bfd" // 文本颜色
    },
    axisLine: {
      show: false // 去除轴线
    },
    splitLine: {
      lineStyle: {
        color: "#012f4a" // 分割线颜色
      }
    }
  },
  series: [
    {
      name: "新增粉丝",
      type: "line",
      // true 可以让我们的折线显示带有弧度
      smooth: true,
      data: yearData[0].data[0]
    },
    {
      name: "新增游客",
      type: "line",
      smooth: true,
      data: yearData[0].data[1]
    }
  ]
};
const changeYear = (year) => {
  let curYear = yearData.find(item => item.year == year) || []
  option.series[0].data = curYear?.data[0];
  option.series[1].data = curYear?.data[1];
  myChart.setOption(option);
};
onMounted(() => {
  myChart = echarts.init(line1.value);

  myChart.setOption(option);
})
  // 3. 把配置给实例对象
</script>
<style scoped lang="scss">
.line{
  position: relative;
  .btns{
    position: absolute;
    top: -5px;
    left: 30px;
    z-index: 3;
    cursor: pointer;
    color: red;
  }
}
.line1 {
  width: 100%;
  height: 400px;
  background-image: url(../examples/images/bg.jpg);
  position: relative;
  
}
</style>