Echarts的二次封装思考心得。封装成果：折线柱状混合图、立体柱状折线混合图、markline标记线

1. 一般包装只会暴露一些常见的属性，如图表的颜色和数据；
2. 封装人员不会考虑包装所有情况，因为它毫无意义，比如图表上的文本大小。如果面具被考虑，最好不要包装，直接使用Echarts获得属性；
3. 但在使用过程中，除了对颜色数据的不同要求外，确实会根据实际情况和设计草案进行调整，如图表的具体位置、图例的位置、文本的风格等

以图表的位置为例Echarts中的属性为gird

let gridDefault: EChartOption.Grid = { 
          left: 88,  right: 196,  bottom: 50,  top: 110, }; 

const Component = ({ 
         gird}:{ 
         grid?: EChartOption.Grid;})=>{ 
          return () } 

使用时若没有传递grid使用默认值的参数，若有，则用传递的值替换。 但

简单的属性还可以，可以直接覆盖替换，比如gird的left、right等等Object的assign替换属性。

但Echarts属性往往是一些属性很深，使用时间传参如果没有写，如果没有写很深很全，使用Object.assign()会导致深度默认属性被毙掉

由于组件的二次开发，用户肯定不希望每个属性都传播，我只需要改变默认值，否则我会重写Echarts没区别了

针对这种情况，我发现了loadsh的一个merge方法，他不像assign一样，相同属性就替换掉，不会管你这个属性的值相同还是不相同，merge他会递归遍历对象的各级，相同的属性会被覆盖，不同的会合并

这样，在包装组件时，抛出的继承就是这样的Echarts组件的属性和默认属性一次merge。合并后全新的值即可。grid = merge(gridDefault, grid);

为了实现更高的组件自由度，抛出更多的继承Echarts代码中的属性merge默认值可以。这样，开发人员就不需要考虑组件需要什么属性，只需要考虑他们需要什么属性

说了这么多废话，开始贴代码。

使用

import React from "react"; import { 
         MultiBarAndLineCharts } from "组件路径的封装";  const Index: React.FC<{ 
        }> = () => { 
        
  let xAxisData = ["name1", "name2", "name3", "name4", "name5"];
  let barDataS = [
    [100, 200, 320.48, 200, -100],
    [50, -50, 50, -50, 100],
  ];
  let lineDataS = [[58, 81, 42, 98, 35]];
  let nameS = ["柱状图1", "柱状图2", "折线图1"];
  let yAxisNames = ["单位/亿元", ""];
  let color = ["rgb(254,163,61)", "rgb(17,145,222)", "rgb(54,68,192)"];
  let barNegativeNumberColor = ["rgb(254,163,61)", "rgb(196,76,78)"];
  return (
    <div
      style={ 
        { 
         width: "100%", height: "600px", background: "rgba(13,19,41)" }}
    >
      <MultiBarAndLineCharts
        xAxisData={ 
        xAxisData}
        barDataS={ 
        barDataS}
        lineDataS={ 
        lineDataS}
        nameS={ 
        nameS}
        color={ 
        color}
        barWidth={ 
        40}
        barNegativeNumberColor={ 
        barNegativeNumberColor}
        yAxisNames={ 
        yAxisNames}
      />
    </div>
  );
};
export default Index;

封装