暂无图片
暂无图片
暂无图片
暂无图片
暂无图片

echarts对每个柱状图标准线

原创 wpp 2023-05-20
323

�����������������������������������������

������������������������������������������������ echarts ������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������ echarts ��������������������������� baseline ��������������������������������������������������������������������������������������������������������� 0.1 ���������������������������

echarts.png

  • series ���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������Sale������������������baseLine���������������������������baseLine1������
  • ������z:1���Sale������z:2���baseLine/baseLine1������������������������������������������������Sale������������������baseLine1���������������
  • ������ getEchartsInstance ������������������������������������������������ legendselectchanged ������������������������������������������ setOption ��������������������������������������� legend ������������������������������������������ baseLine ������������������������������������������������������������������������������������������������������������
import React, { useRef, useEffect, useState } from "react";
import * as echarts from "echarts";
import ReactECharts from "echarts-for-react";
function BarChartBaseLine() {
  const chartRef = useRef(null);
  const [echartsOptions, setEchartsOptions] = useState({});
  useEffect(() => {
    getInfo();
    // ������ getEchartsInstance ���������������������������
    const chart = chartRef.current.getEchartsInstance();
    // ������������������ legendselectchanged ���������
    // ��������������������������������� setOption ��������������������������������������� legend ���������������������������������
    chart.on("legendselectchanged", handleLegendSelectChanged);
    return () => {
      if (chart) {
        chart.off("legendselectchanged", handleLegendSelectChanged);
      }
    };
  }, []);
  const handleLegendSelectChanged = (params) => {
    const chart = chartRef.current.getEchartsInstance();
    if (params.name === "baseLine") {
      if (!params.selected.baseLine) {
        chart.setOption({
          legend: {
            selected: {
              baseLine1: false,
            },
          },
        });
      } else {
        chart.setOption({
          legend: {
            selected: {
              baseLine1: true,
            },
          },
        });
      }
    }
  };
  const getInfo = () => {
    initEcharts();
  };
  const initEcharts = () => {
    let dataList = [
      {
        value: Math.floor(Math.random() * 90 + 10),
        name: "Mon",
        base: Math.floor(Math.random() * 80 + 10),
      },
      {
        value: Math.floor(Math.random() * 90 + 10),
        name: "Tue",
        base: Math.floor(Math.random() * 80 + 10),
      },
      {
        value: Math.floor(Math.random() * 90 + 10),
        name: "Web",
        base: Math.floor(Math.random() * 80 + 10),
      },
      {
        value: Math.floor(Math.random() * 90 + 10),
        name: "Thu",
        base: Math.floor(Math.random() * 80 + 10),
      },
      {
        value: Math.floor(Math.random() * 90 + 10),
        name: "Fri",
        base: Math.floor(Math.random() * 80 + 10),
      },
      {
        value: Math.floor(Math.random() * 90 + 10),
        name: "Sat",
        base: Math.floor(Math.random() * 80 + 10),
      },
      {
        value: Math.floor(Math.random() * 90 + 10),
        name: "Sun",
        base: Math.floor(Math.random() * 80 + 10),
      },
    ];
    let option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          axis: "y",
          Z: 10,
        },
        formatter: function (params) {
          var relVal = '<span style="color:#333">' + params[0].name + "</span>";
          params.forEach((item) => {
            // ���������baseLine1 tooltip
            if (item.seriesName !== "baseLine1") {
              relVal +=
                '<br/><span style="color:#999">' +
                item.seriesName +
                ': </span><span style="color:#333">' +
                item.value +
                "</span>";
            }
          });
          return relVal;
        },
        backgroundColor: "#fff",
        padding: [5, 10],
      },
      legend: {
        data: [
          {
            name: "Sale",
            icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAvCAIAAAD7B9ruAAAACXBIWXMAAB2HAAAdhwGP5fFlAAAAEXRFWHRTb2Z0d2FyZQBTbmlwYXN0ZV0Xzt0AAAGeSURBVGiB7Zohb4NAGEA/mrXNsqQJommWjJmmas0EZmSpRsAPQCGxVcXPtwqLRPEDQKArmEEsTFWyZMkqkEvbJczeAc3EuCM97slPwHsJXEj4hKIooEv02hagDQ+ucjiQ12iGw8/fqlf149MJogiiCLZbyDLY7xsREuDMefEiNHL98c1YGkmL+4U6VdWp2u/1axxqDq0sg80GHKcRCexmhINRlk/L1fNKGkmleeWRTlOwbRK1lHFeHTuy06+0NK8Euy74PiUpwvjvvpu4pSEeHATgefSMyOO9ecEuQCd4cBhCnlM1Ikz+nYe7EJ0gwccjxDFtI/LEH1gUElwUkCS0dciTfGJRSPBwSNulDfinJevwYNbhwazDg1mHB7MOD2YdHsw6PJh1eDDr8GDW4cGs0+Xgy/nx/R+QYEEAWW7PhBTyLRaFBA8GoCi0dcij3GFR+DusaSCKVHUII16L2kxDJ3iwroNpUjUijPlo6jMdnVROacsCw6BnRBLjwbBkqzSsbPHM57Bew2Ry6Wse55Za6rZ4oGtrS0zT5S+tbvALPvJySV+miIUAAAAASUVORK5CYII=",
          },
          {
            name: "baseLine",
            icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGIAAAA5CAIAAABCjmltAAAACXBIWXMAAB2HAAAdhwGP5fFlAAAAEXRFWHRTb2Z0d2FyZQBTbmlwYXN0ZV0Xzt0AAACaSURBVHic7drBCcAwDACxpHT/lZ0Rer8SkCYwh3/2npnFl+fvAe4gUyJTIlMiUyJTIlMiUyJTIlMiUyJTIlMiUyJTIlMiUyJTIlMiUyJTIlMiUyJTIlOy3XwL25TIlMiUyJS8y+NOYJsSmRKZEpkSmRKZEpkSmRKZEpkSmRKZEpkSmRKZEpkSmRKZEpkSmRKZEpkSmRKZEpmSA40hBm2PYOIHAAAAAElFTkSuQmCC",
            itemStyle: {
              color: "red",
            },
          },
        ],
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        type: "value",
        boundaryGap: [0, 0.01],
      },
      yAxis: [
        {
          type: "category",
          data: dataList.map((item) => item.name),
        },
        {
          type: "category",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisPointer: {
            type: "none",
          },
          splitArea: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          data: dataList.map((item) => item.name),
        },
      ],
      series: [
        {
          name: "Sale",
          type: "bar",
          // z ���������������������������������
          z: 1,
          data: dataList.map((item) => {
            let cor = "blue";
            if (item.value < item.base) {
              cor = "red";
            } else if (item.value > item.base) {
              cor = "green";
            } else {
              cor = "blue";
            }
            return {
              ...item,
              itemStyle: {
                normal: {
                  color: cor,
                },
              },
            };
          }),
          barWidth: 20,
        },
        // ������������������������������������
        {
          name: "baseLine",
          stack: "baseLineGroup" /*���������������������������������������bar���������������*/,
          type: "bar",
          // z ���������������������������������,������ name: "Sale"���������baseline���������
          z: 2,
          yAxisIndex: 1,
          barWidth: 30,
          itemStyle: {
            normal: {
              color: "transparent" /*������bar������������������������������*/,
            },
          },
          data: dataList.map((item) => item.base),
        },
        {
          /*������bar������������������*/
          name: "baseLine1",
          stack: "baseLineGroup" /*���������������������������������������bar���������������*/,
          type: "bar",
          // z ���������������������������������,������ name: "Sale"���������baseline���������
          z: 2,
          yAxisIndex: 1,
          barWidth: 30,
          itemStyle: {
            normal: {
              borderColor: "red",
              borderWidth: 1,
              borderType: "dotted",
              color: "red",
            },
          },
          data: Array(dataList.length).fill(0.1),
        },
      ],
    };
    setEchartsOptions(option);
  };

  return (
    <> <ReactECharts ref={chartRef} option={echartsOptions} style={{ height: "400px", width: "100%" }} echarts={echarts} /> </>
  );
}
export default BarChartBaseLine;

「喜欢这篇文章,您的关注和赞赏是给作者最好的鼓励」
关注作者
【版权声明】本文为墨天轮用户原创内容,转载时必须标注文章的来源(墨天轮),文章链接,文章作者等基本信息,否则作者和墨天轮有权追究责任。如果您发现墨天轮中有涉嫌抄袭或者侵权的内容,欢迎发送邮件至:contact@modb.pro进行举报,并提供相关证据,一经查实,墨天轮将立刻删除相关内容。

评论