React函数式组件 + Echart 3.X : 常用图表设置

垂直柱状图

import React, { useState, useEffect } from 'react';
import ReactEcharts from '../../../components/ECharts/ReactEcharts.js';

const Line = (props) => {
  const { yAixsName, barColor, legendName, data, filterKey } = props;
  const [seriesData, setSeriesData] = useState([[], []]);   // 表格数据
  const [legend, setLegend] = useState(legendName[0]);      // 选中的legend

  useEffect(() => {
    ...

    // 初始化表格数据
    setTimeout(() => {
      setSeriesData([formatData1, formatData2]);
      setLegend(legendName[0]);
    }, 500);
  }, [props]);

  const option = {
    grid: {
      // left: 100,               // grid 组件离容器左侧的距离。
      bottom: 80                  // 同上，避免label文字块高度太高，显示不全
    },
    // tooltip: {
    //   trigger: 'axis'
    // },
    tooltip: {
      trigger: 'axis',
      // axisPointer: {
      //   type: 'shadow'
      // },
      formatter: `{b}<br/>${yAixsName}：{c0}`
    },
    legend: {
      data: legendName,             // 图例对应的series中的name字段
      selected: {                   // 防止点击legend动画数据异常
        [legendName[0]]: legend === legendName[0],
        [legendName[1]]: legend === legendName[1]
      },
      selectedMode: 'single',       // 单选模式
      right: 50,                    // 图例组件离容器上侧的距离
      itemHeight: 30,               // 图例高度
      itemWidth: 50,                // 图例宽度
      itemGap: 20,                  // 每个图例之间的距离
      textStyle: {
        color: 'white',             // 图例文字颜色
        fontSize: 18                // 图例文字大小
      }
    },
    xAxis: {
      type: 'category',
      data: legend === legendName[0] ? seriesData[0].map(item => item.key) : seriesData[1].map(item => item.key),
      axisLabel: {                                                    // 坐标轴刻度标签的相关设置
        color: '#fff',                                                // 坐标轴文字颜色
        fontSize: 14,                                                 // 坐标轴文字大小
        // margin: 8,                                                 // 文字与坐标轴的垂直距离
        interval: 0,                                                  // 隔多少个才显示label文字， 0强制显示全部
        // rotate: -25,                                               // label文字旋转，防止重叠
        formatter: (value = '', index) => {                           // label文字格式化，换行输出
          let ret = '';                                               // 拼接加\n返回的类目项
          const maxLength = 4;                                        // 每项显示文字个数
          const valLength = value.length;                             // X轴类目项的文字个数
          const rowN = Math.ceil(valLength / maxLength);              // 类目项需要换行的行数
          if (rowN > 1) {
            // 如果类目项的文字大于3,
            for (let i = 0; i < rowN; i++) {
              let temp = '';                                         // 每次截取的字符串
              const start = i * maxLength;                           // 开始截取的位置
              const end = start + maxLength;                         // 结束截取的位置
              temp = `${value.substring(start, end)}\n`;
              ret += temp;                                           // 拼接最终的字符串
            }
            return ret;
          } else {
            return value;
          }
        }
      }
      // min: -1,                                                    // 坐标轴刻度最小值  0-1-2 | 1（第一条柱子不显示） | -1（缩进-0-1-2）
      // max: 15,                                                    // 坐标轴刻度最大值 2 => 0-1-2 -> 分成三份， 可用来减少柱子间的距离
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: false                                                   // 取消网格线
      },
      name: yAixsName,                                                // 坐标轴名称
      nameTextStyle: {                                                // 坐标轴名称的文字样式。
        color: '#fff',                                                // 坐标轴名称的颜色
        fontSize: 18,                                                 // 坐标轴名称文字的字体大小
        fontWeight: 700                                               // 坐标轴名称文字字体的粗细
        // padding: [0, 0, 0, 80]                                     // 文字块的内边距，用来设置位置偏移
      },
      nameGap: 30,                                                    // 坐标轴名称与轴线之间的距离
      axisLabel: {                                                    // 坐标轴刻度标签的相关设置
        color: '#fff',                                                // 坐标轴文字颜色
        fontSize: 14                                                  // 坐标轴文字大小
      }
    },
    series: [
      {
        name: legendName[0],
        type: 'bar',
        barWidth: 40,
        data: seriesData[0].map((item) => item.value),
        itemStyle: {
          normal: {
            color: barColor[0]                                                // 柱子颜色
          }
        },
        emphasis: {
          focus: 'series'
        }
      },
      {
        name: legendName[1],
        type: 'bar',
        barWidth: 40,
        data: seriesData[1].map((item) => item.value),
        itemStyle: {
          normal: {
            color: barColor[1]                                                // 柱子颜色
          }
        }
      }
    ]
  };

  const legendselectchanged = (e) => {
    setLegend(e.name);
  };

  const onEvents = {
    'legendselectchanged': legendselectchanged
  };

  return (
    <ReactEcharts
      option={option}
      onEvents={onEvents}
    />
  )
};

export default Line;

水平柱状图

import React, { useEffect, useState } from 'react';
import ReactEcharts from '../../../components/ECharts/ReactEcharts.js';

const HorizontalLine = (props) => {
  const { yAixsName, barColor, legendName, data, filterKey } = props;
  const [legend, setLegend] = useState(legendName[0]);      // 选中的legend
  const [seriesData, setSeriesData] = useState([[], []]);   // 表格数据

  useEffect(() => {
    ...

    // 初始化表格数据
    setTimeout(() => {
      setSeriesData([formatData1, formatData2]);

      // 上面把数据分成了两种类型，如果只展示其中一种，传进来的 legendName['', name2] | legendName[name1, '']
      setLegend(legendName[0] || legendName[1]);
    }, 500);
  }, [props]);

  const option = {
    tooltip: {
      trigger: 'axis',
      // axisPointer: {
      //   type: 'shadow'
      // },
      formatter: `{b}<br/>${yAixsName}：{c0}`        // 隐藏最后一列背景列
    },
    legend: {
      data: legendName,                              // 图例对应的series中的name字段
      selected: {                                    // 防止点击legend动画数据异常
        [legendName[0]]: legend === legendName[0],
        [legendName[1]]: legend === legendName[1]
      },
      selectedMode: 'single',
      animation: false,
      right: 50,                    // 图例组件离容器上侧的距离
      itemHeight: 30,               // 图例高度
      itemWidth: 50,                // 图例宽度
      itemGap: 20,                  // 每个图例之间的距离
      textStyle: {
        color: 'white',             // 图例文字颜色
        fontSize: 18                // 图例文字大小
      }
    },
    grid: {
      left: 250                     // grid 组件离容器左侧的距离。
    },
    xAxis: {
      type: 'value',
      show: false                   // 隐藏X轴
      // splitLine: {
      //   show: false              // 取消网格线
      // },
      // axisTick: {                // 坐标轴刻度相关设置
      //   show: false,             // 是否显示坐标轴刻度
      // },
    },
    yAxis: {
      type: 'category',
      // inverse: true,             //倒叙
      data: legend === legendName[0] ? seriesData[0].map(item => item.key) : seriesData[1].map(item => item.key),
      name: yAixsName,                                                // 坐标轴名称
      nameTextStyle: {                                                // 坐标轴名称的文字样式。
        color: '#fff',                                                // 坐标轴名称的颜色
        fontSize: 18,                                                 // 坐标轴名称文字的字体大小
        fontWeight: 700,                                              // 坐标轴名称文字字体的粗细
        padding: [0, 0, 0, 80],                                       // 文字块的内边距，用来设置位置偏移
      },
      nameGap: 30,                                                    // 坐标轴名称与轴线之间的距离
      axisLabel: {                                                    // 坐标轴刻度标签的相关设置
        color: '#fff',                                                // 坐标轴文字颜色
        fontSize: 14,                                                 // 坐标轴文字大小
        interval: 0                                                   // 隔多少个才显示label文字， 0强制显示全部
        // formatter: (value = '', index) => {                        // label文字格式化，换行输出
        //   let ret = '';                                            // 拼接加\n返回的类目项
        //   const maxLength = 4;                                     // 每项显示文字个数
        //   const valLength = value.length;                          // X轴类目项的文字个数
        //   const rowN = Math.ceil(valLength / maxLength);           // 类目项需要换行的行数
        //   if (rowN > 1) {
        //     // 如果类目项的文字大于3,
        //     for (let i = 0; i < rowN; i++) {
        //       let temp = '';                                         // 每次截取的字符串
        //       const start = i * maxLength;                           // 开始截取的位置
        //       const end = start + maxLength;                         // 结束截取的位置
        //       temp = `${value.substring(start, end)}\n`;
        //       ret += temp;                                           // 凭借最终的字符串
        //     }
        //     return ret;
        //   } else {
        //     return value;
        //   }
        // },
      },
      splitLine: {
        show: false                                                  // 取消网格线
      },
      axisTick: {                                                    // 坐标轴刻度相关设置
        show: false                                                  // 是否显示坐标轴刻度
      },
      axisLine: {
        show: false                                                  // 是否显示坐标轴轴线
      }
      // max: 20,                                                    // 坐标轴刻度最大值 2 => 0-1-2 -> 分成三份， 可用来减少柱子间的距离
    },
    series: [
      {
        name: legendName[0],
        type: 'bar',
        barWidth: 15,                                                         // 柱子高度   width 和 Gap 不能同时设置，设置width后减小间距可以把容器宽度减小
        data: seriesData[0].map((item) => item.value),
        itemStyle: {
          normal: {
            color: barColor[0],                                                // 柱子颜色
            label: {                                                           // 图形上的文本标签
              show: true,
              position: 'right',
              fontSize: 18,
              color: '#fff'
            }
          }
        }
      },
      {
        name: legendName[1],
        type: 'bar',
        barWidth: 15,                                                         // 柱子高度
        data: seriesData[1].map((item) => item.value),
        itemStyle: {
          normal: {
            color: barColor[1],                                                // 柱子颜色
            label: {                                                           // 图形上的文本标签
              show: true,
              position: 'right',
              fontSize: 18,
              color: '#fff'
            }
          }
        }
      },
      {                                                                       // 设置背景阴影
        type: 'bar',
        barWidth: 15,                                                         // 柱子高度
        barGap: '-100%',
        data: legend === legendName[0] ? seriesData[0].map(() => 100) : seriesData[1].map(() => 100),
        itemStyle: {
          normal: {
            color: 'rgba(239, 239, 239, 0.1)'                                 // 柱子颜色
          }
        }
      }
    ]
  };

  const legendselectchanged = (e) => {
    setLegend(e.name);
  };

  const onEvents = {
    'legendselectchanged': legendselectchanged
  };

  return <ReactEcharts option={option} onEvents={onEvents} />;
};

export default HorizontalLine;

折线 / 面积图

import React, { useEffect, useState } from 'react';
import ReactEcharts from '../../../components/ECharts/ReactEcharts.js';

const Area = (props) => {
  const { yAixsName, lineColor, legendName, data, filterKey } = props;
  const [legend, setLegend] = useState(legendName[0]);      // 选中的legend
  const [seriesData, setSeriesData] = useState([[], []]);   // 表格数据

  const option = {
    // title: {               // 标题组件
    //   text: '扫描率',      // 主标题文本
    //   textStyle: {
    //     color: '#fff'     // 主标题文字颜色
    //   }
    // },
    tooltip: {
      trigger: 'axis',
      // axisPointer: {
      //   type: 'shadow'
      // },
      formatter: `{b}<br/>${yAixsName}：{c0}`
    },
    grid: {
      // left: 50                                   // grid 组件离容器左侧的距离。
    },
    color: [lineColor[0], lineColor[1]],            // 修改图例颜色
    legend: {
      data: legendName,                             // 图例对应的series中的name字段
      selected: {                                   // 防止点击legend动画数据异常
        [legendName[0]]: legend === legendName[0],
        [legendName[1]]: legend === legendName[1]
      },
      selectedMode: 'single',
      icon: 'roundRect',            // 显示图标类型
      right: 50,                    // 图例组件离容器上侧的距离
      itemHeight: 30,               // 图例高度
      itemWidth: 50,                // 图例宽度
      itemGap: 20,                  // 每个图例之间的距离
      textStyle: {
        color: 'white',             // 图例文字颜色
        fontSize: 18                // 图例文字大小
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,                                              // 坐标轴两边留白策略
      // name: '坐标轴名称',                                           // 坐标轴名称
      data: legend === legendName[0] ? seriesData[0].map(item => item.key) : seriesData[1].map(item => item.key),
      axisLabel: {                                                    // 坐标轴刻度标签的相关设置
        color: '#fff',                                                // 坐标轴文字颜色
        fontSize: 14,                                                 // 坐标轴文字大小
        // interval: 0,                                               // 隔多少个才显示label文字， 0强制显示全部
        // padding: [0, 0, 0, 40],                                    // 文字块的内边距
        formatter: (value = '', index) => {                           // label文字格式化，换行输出
          let ret = '';                                               // 拼接加\n返回的类目项
          const maxLength = 4;                                        // 每项显示文字个数
          const valLength = value.length;                             // X轴类目项的文字个数
          const rowN = Math.ceil(valLength / maxLength);              // 类目项需要换行的行数
          if (rowN > 1) {
            // 如果类目项的文字大于3,
            for (let i = 0; i < rowN; i++) {
              let temp = '';                                         // 每次截取的字符串
              const start = i * maxLength;                           // 开始截取的位置
              const end = start + maxLength;                         // 结束截取的位置
              temp = `${value.substring(start, end)}\n`;
              ret += temp;                                           // 凭借最终的字符串
            }
            return ret;
          } else {
            return value;
          }
        }
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: false                                                   // 取消网格线
      },
      name: yAixsName,                                                // 坐标轴名称
      nameTextStyle: {                                                // 坐标轴名称的文字样式。
        color: '#fff',                                                // 坐标轴名称的颜色
        fontSize: 18,                                                 // 坐标轴名称文字的字体大小
        fontWeight: 700,                                              // 坐标轴名称文字字体的粗细
      },
      nameGap: 30,                                                    // 坐标轴名称与轴线之间的距离
      axisLabel: {                                                    // 坐标轴刻度标签的相关设置
        color: '#fff',                                                // 坐标轴文字颜色
        fontSize: 14                                                  // 坐标轴文字大小
      }
    },
    dataZoom: [                                                       // 滑轮控制数据区域缩放
      {
        type: 'inside',
        start: 0,
        end: 50,
      }
    ],
    series: [
      {
        name: legendName[0],
        data: seriesData[0].map((item) => item.value),
        type: 'line',
        areaStyle: {                        // 区域填充样式
          normal: {                         // 开启面积图
            // color: {                     // 填充的颜色
            //   ype: 'linear',             // 线性渐变
            //   x: 0,
            //   y: 0,
            //   x2: 0,
            //   y2: 1,
            //   colorStops: [
            //     { offset: 0, color: colorStops[0] }, // 0% 处的颜色
            //     { offset: 1, color: colorStops[1] }  // 100% 处的颜色
            //   ],
            //   global: false // 缺省为 false
            // }
            color: lineColor[0]
          }
        },
        itemStyle: {
          normal: {
            lineStyle: {
              color: lineColor[0],           // 折线颜色
              width: 5                       // 折线宽度
            }
          }
        }
      },
      {
        name: legendName[1],
        data: seriesData[1].map((item) => item.value),
        type: 'line',
        areaStyle: {                        // 区域填充样式
          normal: {                         // 开启面积图
            // color: {                     // 填充的颜色
            //   ype: 'linear',             // 线性渐变
            //   x: 0,
            //   y: 0,
            //   x2: 0,
            //   y2: 1,
            //   colorStops: [
            //     { offset: 0, color: colorStops[0] }, // 0% 处的颜色
            //     { offset: 1, color: colorStops[1] }  // 100% 处的颜色
            //   ],
            //   global: false // 缺省为 false
            // }
            color: lineColor[1]
          }
        },
        itemStyle: {
          normal: {
            lineStyle: {
              color: lineColor[1],           // 折线颜色
              width: 5                       // 折线宽度
            }
          }
        }
      }
    ]
  };

  useEffect(() => {
    ...
    
    // 初始化表格数据
    setTimeout(() => {
      setSeriesData([formatData1, formatData2]);

      // 上面把数据分成了两种类型，如果只展示其中一种，传进来的 legendName['', name2] | legendName[name1, '']
      setLegend(legendName[0] || legendName[1]);
    }, 500);
  }, [props]);

  const legendselectchanged = (e) => {
    setLegend(e.name);
  };

  const onEvents = {
    'legendselectchanged': legendselectchanged
  };

  return <ReactEcharts option={option} onEvents={onEvents} />;
};

export default Area;