标签：F2 const color text AntV chart tooltip tooltipEl

一、面积图

const chart = new F2.Chart({
    id,
    pixelRatio: window.devicePixelRatio,
    padding: 0
  })
  chart.source(data, {
    time: {
      type: 'timeCat',
      tickCount: 3,
      range: [0, 1]
    },
    tem: {
      tickCount: 5,
      min: 0
    }
  })
  chart.axis(false)
  chart.tooltip(false)
  chart.area()
    .position('time*tem')
    .color('l(90) 0:#86CDF3 1:#C1EDFC') // 面积区域背景色渐变
    .style({ fillOpacity: 1 })  // 背景色透明度
    .shape('smooth')
  chart.line()
    .position('time*tem')
    .color('#5592F0')
    .shape('smooth')
  chart.render()

二、折线图

const chart = new F2.Chart({
      id: 'myChart',
      pixelRatio: window.devicePixelRatio, // 指定分辨率
      plugins: Tooltip,
      // padding: ['auto', 60, 'auto', 50],
      width: window.innerWidth,
    });

    chart.source(this.state.data, {
      date: {
        type: 'timeCat',
        tickCount: 5,
        mask: 'MM-DD',
        range: [0, 1],
      },
      value: {
        tickCount: 4,
      },
    });

    // 设置x Y轴
    const lineCfg = {
      lineWidth: 1,
      stroke: this.color.axisLine,
      top: true, // 展示在最上层
    };
    chart.axis('date', {
      label: (text, index, total) => { // 轴线文字标签
        const textCfg = {
          fill: this.color.font,
        };
        // textCfg.text = dateFormat(Number(text), 'MM-dd');
        textCfg.textAlign = 'center';
        if (index === 0) {
          textCfg.textAlign = 'left';
        } else if (index > 0 && index === total - 1) {
          textCfg.textAlign = 'end';
        }
        return textCfg;
      },
      grid: () => {
        return {
          stroke: this.color.axisLine,
          lineDash: [0],
        };
      },
      tickLine: null, // 刻度标识线
      line: lineCfg, // x轴线配置
      labelOffset: 10, // 坐标轴文本距离轴线的距离
    });
    chart.axis('value', {
      label: (text) => {
        let val = `${Number(text).toFixed(1)}%`;
        if (text === '0') {
          val = text;
        }
        return {
          text: val,
          fill: this.color.font,
        };
      },
      line: lineCfg,
      grid: (text) => {
        if (text === '0') { // 栅格线着重显示
          return {
            stroke: this.color.axisLine,
            lineDash: [4],
          };
        }
        return null;
      },
    });

    // chart.guide().text({
    //   position: [0, 70],
    //   content: '倍数',
    //   offsetX: -20,
    //   top: true,
    // });
    // chart.guide().text({
    //   position: [14, -10],
    //   content: '(时间)',
    //   top: true,
    //   offsetX: 10
    // });

    // 图例
    chart.legend('name', {
      position: 'bottom',
      align: 'center',
      marker: 'square',
      offsetY: -10, // 图例上偏移距离
      itemWidth: 110,
      nameStyle: {
        fill: this.color.font,
      },
      itemFormatter(val) {
        if (val === 'signalData') {
          return '新股智能盈策略';
        }
        return '恒生指数'; // val 为每个图例项的文本值
      },
      clickable: false,
    });

    // tooltip
    chart.tooltip({
      showCrosshairs: true, // 是否显示辅助线，点图、路径图、线图、面积图默认展示
      crosshairsStyle: {
        stroke: 'rgba(0, 0, 0, 0.5)',
        lineWidth: 1,
        lineDash: [2], // 虚线
      }, // 配置辅助线的样式
      background: {
        radius: 2,
        fill: '#ccc',
        padding: [6, 10],
      }, // tooltip 内容框的背景样式
      snap: true,
      showItemMarker: false, // 是否展示每条记录项前面的 marker
      custom: true, // 是否自定义 tooltip 提示框
      onHide() {
        const tooltipEl = document.getElementsByClassName('f2-tooltip')[0];
        if (tooltipEl) {
          tooltipEl.style.display = 'none';
        }
      }, // tooltip 隐藏时的回调函数
      onChange(ev) {
        const tooltipEl = document.getElementsByClassName('f2-tooltip')[0];
        // const currentData = _.minBy(ev.items, item => item.y);
        if (tooltipEl) {
          tooltipEl.innerHTML = `<p><span>新股智能盈策略：</span><span>${ev.items[0].value}${ev.items[0].value === '0' ? '' : '%'}</span></p><p><span>恒生指数：</span><span>${ev.items[1].value}${ev.items[1].value === '0' ? '' : '%'}</span></p><p><span>日期：</span><span>${dateFormat(Number(ev.items[0].origin.date), 'yyyy-MM-dd')}</span></p>`;
          tooltipEl.style.display = 'block';
          // tooltipEl.style.left = `${(_this.canvasWrap.offsetLeft + currentData.x) - (tooltipEl.offsetWidth / 2)}px`;
          // tooltipEl.style.top = `${(_this.canvasWrap.offsetTop + currentData.y) - tooltipEl.offsetHeight - 15}px`;
        }
      }, // tooltip 内容发生改变时的回调函数
      crosshairsType: 'xy', // 辅助线的种类
    });

    chart.line().position('date*value').color('name', ['#4B95D6', '#fc724c']).shape('smooth')
      .style({ lineWidth: 1 });
    chart.render();

标签：F2,const,color,text,AntV,chart,tooltip,tooltipEl
来源： https://www.cnblogs.com/SPHmomo/p/12937158.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。