博客

先上效果图：

代码：

import { useEffect, useState } from 'react';
import * as echarts from 'echarts';

export default function Line(props) {
  const xdatas = props.xdata || [];
  const ydatas = props.ydata || [];
  const idx = props.idx;
  useEffect(() => {
    const container = document.getElementById('lineContainer' + idx);
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(container);
    let option = {
      tooltip: {
        trigger: 'axis',
      },
      toolbox: {
        show: false,
        feature: {
          saveAsImage: {}, // 展示并提供下载报表图片按钮
        },
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        show: true,
        axisTick: { show: false }, // x轴刻度隐藏
        data: xdatas,
      },
      yAxis: {
        type: 'value',
        boundaryGap: [0, '30%'],
        show: true,
      },
      grid: { // 移动图表在画布中的位置
        left: '17%',
      },
      series: [
        {
          type: 'line',
          data: ydatas,
          smooth: 0.5,
          // symbol: 'none', // none 不展示数据点 默认为false展示
          lineStyle: {
            color: '#5470C6',
            width: 5,
          },
          itemStyle: {
            normal: {
              color: '#3d86f3',
              lineStyle: {
                color: '#3d86f3',
                width: 3,
              },
            },
          },
          markLine: {
            // 锁定最后一个元素展示纵向虚线
            symbol: ['none', 'none'],
            label: { show: false },
            data: [{ xAxis: ydatas.length - 1 }],
          },
          // markLine: {
          //   symbol: ['none', 'none'],
          //   // label: { show: false },
          //   data: [{ xAxis: ydatas[ydatas.length - 1], yAxis: 100 }, { xAxis: ydatas[ydatas.length - 1], yAxis: 100 }]
          // },
          markPoint: {
            // 标记的数据，可以是最大值最小值也可以是自定义的坐标
            // data: [
            //   {
            //     yAxis: ydatas, // y轴就是数据轴，那么标记数据的y轴坐标就是当前显示的数据，this.trenddata[1]是显示的所有数据，他是个数组，通过数组下标的形式获取最后一个数据即可
            //   },
            // ],
            data: [
              {
                yAxis: ydatas[ydatas.length - 1], // y轴就是数据轴，那么标记数据的y轴坐标就是当前显示的数据，this.trenddata[1]是显示的所有数据，他是个数组，通过数组下标的形式获取最后一个数据即可
                x: '90%',
                // x: '90%', // 标记数据的x轴的位置，由于是最后一个点，所以这个位置是固定的，用百分比表示该图标内最后一个点的位置即可
              },
            ],
            symbol: 'circle', // 标记图形
            symbolSize: 4, // 标记图形的大小
            // 标注点的样式
            itemStyle: {
              color: '#FF4747', // 标注点颜色
            },
          },

          areaStyle: {
            //区域填充样式
            normal: {
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgba(196, 215, 255, 1)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(246, 249, 255, 1)',
                  },
                ],
                false,
              ),
              // shadowColor: "rgba(109, 126, 0, 0.5)", //阴影颜色
              shadowBlur: () => {
                var windth = window.innerWidth;
                let fontSize = windth / 1920;
                return fontSize * 20;
              }, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            },
          },
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option, true);
  }, []);

  return (
    <div
      id={`lineContainer${idx}`}
      style={{ width: '100%', height: 200, marginTop: -50 }}
    ></div>
  );
}