lineChart的markLine与markArea案例

lineChart的markLine与markArea案例

图形案例

先看看以下图形里有没有你想要的案例，如果有，它也就在以下的代码里

code 案例

import React, { useRef, useEffect } from 'react';

import * as echarts from 'echarts';

const MyDemo = () => {
  const myChart = useRef<any>();

  useEffect(() => {
    renderECahrt();
  }, []);

  const renderECahrt = () => {
    let El = document.getElementById('MyDemo');

    if (!El) return;

    if (myChart.current) {
      myChart.current.dispose();
    }

    myChart.current = echarts.init(El);
    setChartOption();
  };

  const setChartOption = () => {
    // 指定图表的配置项和数据
    const option = {
      title: {
        text: '折线图堆叠',
      },
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['邮件营销',],
      },
      grid: {
        left: '3%',
        right: '60',
        bottom: '60',
        containLabel: true,
      },
      // 横向、竖向的放大缩小
      dataZoom: [{ type: 'inside' }, { startValue: 0 }, { type: 'slider', yAxisIndex: 0 }],
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      },
      yAxis: {
        type: 'value',
        
      },
      series: [
        {
          name: '邮件营销',
          type: 'line',
          stack: '总量',
          data: [120, 132, 101, 134, 90, 230, 210],
          markLine: {
            symbol: ['none', 'arrow'], // 线条的起点与终点 - [ start, end ]， 具体值可对应文档查看
            data: [
              {
                name: 'Y轴上的markLine', 
                yAxis: 60, // yAxis 的值可以是任意y轴值，

                // 文字属性, 默认显示 yAxis||xAxis 的值
                // 想自定义请用 formatter
                label: {
                  position: 'start', // 文字显示的位置 
                  color: 'red',
                  fontSize: 14,
                  // formatter: '自定义的label文字' 
                },

                // 线条的属性
                lineStyle: {
                  width: 2,
                  solid: 'soild',
                  color: 'red',
                },
              },
              {
                name: 'X轴上的markLine', 
                xAxis: "周四", // xAxis 的值可以是任意x轴值
                // xAxis: 2, // xAxis 的值可以是第N个x轴值
                label: {
                  position: 'end',
                  color: 'red',
                  fontSize: 14,
                },
                lineStyle: {
                  width: 2,
                  solid: 'soild',
                  color: 'red',
                },
              },
              [
                // 这个图一定是矩形 ：以x-x,y-y生成的矩形
                {
                  name: '图任意位置的markArea',
                  itemStyle: { color: 'rgba(200, 200, 200, 0.5)', opacity: 0.5 },
                  coord: [4, 200], // [x, y]
                },
                {
                  coord: [2, 100], // [x, y]
                },
              ],
            ],
          },
          markArea: {
            data: [
              // Y轴上的markArea
              [
                // 区间开始
                {
                  name: 'Y轴上的markArea',
                  yAxis: 63,
                  itemStyle: { color: 'rgba(200, 200, 200, 0.5)', opacity: 0.5 },
                  label: {
                    show: true,
                    fontSize: 14,
                    position: 'left',
                  },
                },
                // 区间结束
                {
                  yAxis: 100,
                },
              ],
              // x轴上的markArea
              [
                // 区间开始
                {
                  name: 'X轴上的markArea',
                  xAxis: 1,
                  // 区间的样式
                  itemStyle: { color: 'rgba(200, 200, 200, 0.5)', opacity: 0.5 },
                  // 区间文字
                  label: {
                    show: true,
                    fontSize: 14,
                    position: 'top',
                  },
                },
                // 区间结束
                {
                  xAxis: 2,
                },
              ],
            ],
          },
        },
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.current.setOption(option);
  };

  return (
    <>
      <h1 style={{ textAlign: 'center' }}>折线图</h1>
      <div id="MyDemo" style={{ width: '100%', height: '600px' }}></div>;
    </>
  );
};

export default MyDemo;