BizCharts 双柱图 加折线统计图

双柱图，需要对数据进行处理

image.png

要是想竖着的，就把 <Coord transpose scale={[1, -1]} /> 删掉就行，

这个是双柱图的数据，折线图的数据也很简单，按照每个横坐标加一个字段对应值就好了
比如说
{
label:"Tusday",
series1:1800,
series2:1200,
series3_line:4000
}

随便加个属性叫series3_line，那么按照数据上的每个横坐标上都加个，即周一至周五都要加

然后加个

const scale = {
     series3_line: {
        min: 0,
        type: 'linear',
      },
     series2: {
        min: 0,
      },
    series1: {
        min: 0,
      },
    };

针对每一个字段，都设置个min：0，这样子 纵坐标就是从0开始的，这个scale ，加到最外面的Chart组件上就行

现在双柱图有了，再加个折线图

 <Geom
            type="path"
            position="label*series3_line"
            size={2}
            color="#fff" //影响tooltip上的marker颜色
            style={{
              stroke: '#fff',
              lineWidth: 1,
            }}
    />

这里我选择type=path，因为type=line的话，有时候好像数据不太好的时候，就变成虚线了，

加了个折线图，
但是Legend（图例）上并没有我们折线图，
怎么加都加不上去

只能手动加了
找了一位大佬的方案
https://www.cnblogs.com/hill-foryou/p/10571386.html

image.png

custom一定要加上，这样子才允许items自定义，
自定义了后，又有问题了，点击图例，对应的图表没反应

那么又得给Legend 手动加上onClick事件，这里我参照着大佬的代码写

image.png

图上series_line3 打错了，应该是 series3_line，反正对应的就是那个数据

onClick={ev => {
              const item = ev.item;
              const value = item.value;
              const checked = ev.checked;
              const geoms = this.chartIns.getAllGeoms();
              console.log('geoms', geoms);
              for (let i = 0; i < geoms.length; i++) {
                const geom = geoms[i];
                if (geom.getYScale().field === value && value === 'series3_line') {
                  if (checked) {
                    geom.show();
                  } else {
                    geom.hide();
                  }
                } else if (
                  geom.getYScale().field === 'value' &&
                  value !== 'series3_line'
                ) {
                  geom.getShapes().map(shape => {
                    if (shape._cfg.origin._origin.type == value) {
                      shape._cfg.visible = !shape._cfg.visible;
                    }
                    shape.get('canvas').draw();
                    return shape;
                  });
                }
  
                // const g_shapes = geom.get('labelContainer');
                // debugger;   
                // let labels = g_shapes._cfg.labelsGroup._cfg.children;
                // labels.map(label => {
                //   if (checked) {
                //     if (label._id.includes(value)) {
                //       label._cfg.visible = true;
                //     }
                //   } else {
                //     if (label._id.includes(value)) {
                //       label._cfg.visible = false;
                //     }
                //   }
                // });
              }
            }}