Echarts 官网： https://echarts.apache.org/zh/index.html

先看效果

源代码

option = {
    // 设置标题（包含主标题和副标题） 
    title: {
      show: true, // 是否显示
      text: 'ECharts-折线图-基础面积图', // 主标题文本，支持使用\n换行
      link: 'https://www.51blog.xyz', // 主标题链接
      target: 'blank', // 主标题链接打开方式
      textStyle: { // 设置主标题样式
        color: 'grey'
      },
      subtext: '', // 副标题文本，其他设置同主标题
      left: 'center', // 设置标题居中显示
      top: 60, // 设置标题顶部空间
    },

    // 设置图表四周空间距离
    grid: {
      top: 260,
      bottom: 180,
    },

    // 提示框组件设置：https://echarts.apache.org/zh/option.html#tooltip
    tooltip: {
      trigger: 'item',
    },

    // x轴设置：https://echarts.apache.org/zh/option.html#xAxis
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      splitLine: {
          show: true, // 显示水平分割线
      },
    },

    // y轴设置：https://echarts.apache.org/zh/option.html#yAxis
    yAxis: {
      type: 'value',
    },

    // 图例组件设置：https://echarts.apache.org/zh/option.html#legend
    legend: {
      icon: 'circle',
      textStyle: {
          color: '#73767a',
      },
      right: 'center',
      top: 180,
      selectedMode: true, // 单条线图，关闭点击图例时控制系列的显示状态
    },

    series: [
      {
        name: '交易额', // !!!注意：如果不设置该值，则图例组件legend不显示
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',

        // 设置线条是否平滑显示
        smooth: true,

        // 以下设置线条样式
        // -- 详细用法说明：https://echarts.apache.org/zh/option.html#series-line.lineStyle
        lineStyle: {
            color: '#f2345e', // 线条颜色
            width: 2, // 线条粗细
            type: 'solid', // 线条类型
            opacity: 1, // 线条透明度
        },

        // 以下设置区域填充样式
        // -- 详细用法说明：https://echarts.apache.org/zh/option.html#series-line.areaStyle
        areaStyle: {
            color: '#f2345e', // 填充颜色
            opacity: 0.5, // 透明度
        },

        // 以下设置折线拐点标志

        // -- 标志的形状，可选值：
        //  -- 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
        //  -- 可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。
        // -- 详细用法说明：https://echarts.apache.org/zh/option.html#series-line.symbol
        symbol: 'pin',

        // -- 标志的大小
        symbolSize: 22,

        // -- 标志的旋转角度
        symbolRotate: -20,

        // -- 标志相对于原本位置的偏移
        symbolOffset: [0, '40%'],

        // -- 是否显示标志
        showSymbol: true,

        // -- 设置标志的样式
        itemStyle: {
            color: '#F00000', // 标志颜色
            borderColor: 'yellow', // 标志描边颜色
            borderWidth: 1, // 标志描边线条粗细
            borderType: 'dotted',  // 标志描边线条类型
            // 更多配置项，请查看官方文档：https://echarts.apache.org/zh/option.html#series-line.itemStyle
        },
      },
    ],
};

尾语

感谢阅读，以上便是本文所有内容，希望对您有所帮助！