使用echart，使饼图并排显示，使图例组件并排显示

在第一次使用echart时，可以去echrt官网查看自己需要的类型。如果是一个新手的话，去官方文档还是很有用的，会知道大致的概念。
我需要完成的是，把三个饼图排列在一行。

我之前是使用的是flex布局，发现对我来说不是很好操作。在用的时候，使用就是的简单的浮动，我们需要对引入echart的div上设置固定的宽和高。
在react中引入echart的代码:

class S extends React.Component{
constructor() {
    super();
    this.echartbox1 = React.createRef();
    this.echartInit1 = null;
    }
  componentDidMount() {
    this.echartInit1 = echarts.init(this.echartbox1.current);
    //eo1()里面放的也就时option，echart中的一些配置
    this.echartInit1.setOption(this.eo1());
  }
  render(){
  return (
  <div style={{height: 168, width: 91, float: "left",}}>
       <span style={{
                    display: "block",
                    height: 18,
                    fontSize: 13,
                    lineheight: 18,
                    color: "#333",
                    width: 78,
                    marginLeft: 9,
                  }}
                >
                  {"饼图上的标题描述"}
           </span>
           //这个就是放echart图的位置，设置的宽度一定要足够，不然的话，图例信息会显示不全（也就是对图上信息的描述）
        <div style={{ height: 150, width: "100%",paddingBottom:25 }}
                  ref={this.echartbox1}
                ></div>
          </div>
          )
  }
  //eo1()中的代码
  eo1=()=>{
  let options = {
  //这个放的是全局的颜色
      color: ["#1676fe", "#FAB20C "],
      // 提示信息,字符串模板，模板变量有{a}、{b}、{c}、{d}分别表示系列名，数据名，数据值，百分比
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
        confine: true, //将此限制打开后tooltip将不再溢出
      },
      // 图例组件
      legend: [
        {
          bottom: 0,
          //是个数组，放的就是图例组件的内容
          data: [{
        	name: "图例1",
        	icon: "circle",
      		},
      		{
        	name: "图例2",
        	icon: "circle",
      		}],
          orient: "vertical", // 垂直排列
          x: "center",
          itemWidth: 10, // 图例图形宽度
          itemHeight: 10, // 图例图形高度
     // itemGap: 10,   // 各个item之间的间隔，单位px，默认为10，
    // padding: [0,0,0,0],// 图例内边距，单位px，默认各方向内边距为5，
         //图例显示所显示的内容中的规则
          formatter: function (name) {
            var total = 0;
            var target;
            for (var i = 0, l = sdata.length; i < l; i++) {
              total += sdata[i].value;
              if (sdata[i].name === name) {
                target = sdata[i].value;
              }
            }
            var arr = [
              "{a|" +
              name +
              "(}{b|" +
              ((target / total) * 100).toFixed(0) +
              "%)}",
            ];
            return arr.join("\n");
          },
          textStyle: {
            rich: {
              a: {
                fontSize: 12,
                align: "left",
                padding: [0, 0, 0, 0],
                color: "#676B77",
              },
              b: {
                fontSize: 12,
                align: "right",
                padding: [0, 0, 0, 0],
                lineHeight: 16,
                color: "#676B77",
              },
            },
          },
        },
      ],
      // 系列名称
      series: [
        {
          name: "这个显示的内容",
          type: "pie",
          // 内外两个圆环的位置
          radius: ["50%", "70%"],
          // 第一个值水平位置，第二个值调整垂直位置
          // center: ["35%", "50%"],
          bottom: "50",
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          data: [{
        		value: 60,
        		name: "图例1",
        		itemStyle: {
         		 normoal: { color: "#1676FE" },
        		},
     		},{
        		value: 40,
        		name: "图例2",
        		itemStyle: {
         		 normoal: { color: "#FAB20C" },
        		},
     		}],
        },
      ],
    };
    return options;
  }
}

这个代码并不完整，只是写了一个饼图，如果要写3个话，重复代码就可以实现。根据自己的需要进行调整。
注意：

• 如果遇到图例组件不显示的话，需要注意legend中data的name放的内容需要和series中data的name保持一致。
• 如果图例组件显示不全的话，需要看看自己设置的width是否合适，也可以对legend中的参数进行相应的调整。
• 饼图图形显示不全的话，需要调整series中// 第一个值水平位置，第二个值调整垂直位置 // center: ["35%", "50%"],就是对饼图的位置进行调整。
• 如果想要把图例分为两行显示，可以把图例legend写成一个数组，放两个对象，在对象中设置orient: "horizontal", // 水平排列然后根据需要调整位置bottom、left、top、right。