矩阵图拖拽优化echarts 配置项内容和展示

      option = {
    "color": ["#31345B", "#3575FA", "#56D4CF"],
    "grid": {
        "left": "7%",
        "right": "3%",
        "top": "10%",
        "bottom": 70
    },
    "legend": {
        "bottom": 10,
        "itemGap": 120,
        "itemWidth": 20,
        "itemHeight": 10,
        "selectedMode": false,
        "textStyle": {
            "color": "#5D6377",
            "fontSize": 14
        },
        "data": ["Assiciation Index", "Recall Index", "Linkage Index"]
    },
    "dataZoom": [{
        "type": "slider"
    }],
    "xAxis": {
        "type": "category",
        "axisTick": {
            "show": false
        },
        "zlevel": 2,
        "axisLine": {
            "lineStyle": {
                "width": 2
            }
        },
        "data": [{
            "value": "舒肤佳",
            "textStyle": {
                "color": "#383B66",
                "fontSize": 14,
                "fontWeight": "bold"
            }
        }, {
            "value": "OLAY",
            "textStyle": {
                "color": "#383B66",
                "fontSize": 14,
                "fontWeight": "bold"
            }
        }, {
            "value": "美素佳儿",
            "textStyle": {
                "color": "#383B66",
                "fontSize": 14,
                "fontWeight": "bold"
            }
        }, {
            "value": "妈妈网",
            "textStyle": {
                "color": "#383B66",
                "fontSize": 14,
                "fontWeight": "bold"
            }
        }, {
            "value": "999感冒灵",
            "textStyle": {
                "color": "#383B66",
                "fontSize": 14,
                "fontWeight": "bold"
            }
        }, {
            "value": "贝贝健",
            "textStyle": {
                "color": "#383B66",
                "fontSize": 14,
                "fontWeight": "bold"
            }
        }, {
            "value": "CIBN",
            "textStyle": {
                "color": "#383B66",
                "fontSize": 14,
                "fontWeight": "bold"
            }
        }, {
            "value": "丁香妈妈",
            "textStyle": {
                "color": "#383B66",
                "fontSize": 14,
                "fontWeight": "bold"
            }
        }, {
            "value": "Dodie",
            "textStyle": {
                "color": "#383B66",
                "fontSize": 14,
                "fontWeight": "bold"
            }
        }, {
            "value": "多力",
            "textStyle": {
                "color": "#383B66",
                "fontSize": 14,
                "fontWeight": "bold"
            }
        }, {
            "value": "凯叔讲故事APP",
            "textStyle": {
                "color": "#383B66",
                "fontSize": 14,
                "fontWeight": "bold"
            }
        }, {
            "value": "美拍",
            "textStyle": {
                "color": "#383B66",
                "fontSize": 14,
                "fontWeight": "bold"
            }
        }, {
            "value": "墨迹天气",
            "textStyle": {
                "color": "#383B66",
                "fontSize": 14,
                "fontWeight": "bold"
            }
        }, {
            "value": "VIPKID",
            "textStyle": {
                "color": "#383B66",
                "fontSize": 14,
                "fontWeight": "bold"
            }
        }, {
            "value": "网易考拉海购",
            "textStyle": {
                "color": "#383B66",
                "fontSize": 14,
                "fontWeight": "bold"
            }
        }, {
            "value": "小儿氨酚黄那敏颗粒",
            "textStyle": {
                "color": "#383B66",
                "fontSize": 14,
                "fontWeight": "bold"
            }
        }]
    },
    "yAxis": {
        "type": "value"
    },
    "series": [{
        "name": "Assiciation Index",
        "type": "bar",
        // "barWidth": 22,
        "data": [9.725184142515738, 44.80832484310715, 19.138256903232215, 0, 1.9704976086168982, 5.873135824896795, 0, 0, 9.725184142515738, 18.210706611539365, 1.9704976086168982, 1.9704976086168982, 0.9868557132363893, 6.8408649439099065, 9.725184142515738, 0],
        "itemStyle": {
            "barBorderRadius": [5, 5, 0, 0]
        },
        "markLine": {
            "symbolSize": 0,
            "label": {
                "show": false
            },
            "lineStyle": {
                "width": 1,
                "type": "dashed"
            },
            "emphasis": {
                "lineStyle": {
                    "width": 1
                }
            },
            "data": [{
                "name": "Assiciation Index Benchmark",
                "yAxis": 320
            }]
        }
    }, {
        "name": "Recall Index",
        "type": "bar",
        // "barWidth": 16,
        "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        "itemStyle": {
            "barBorderRadius": [5, 5, 0, 0]
        },
        "markLine": {
            "symbolSize": 0,
            "label": {
                "show": false
            },
            "lineStyle": {
                "width": 1,
                "type": "dashed"
            },
            "emphasis": {
                "lineStyle": {
                    "width": 1
                }
            },
            "data": [{
                "name": "Recall Index Benchmark",
                "yAxis": 290
            }]
        }
    }, {
        "name": "Linkage Index",
        "type": "bar",
        // "barWidth": 16,
        "data": [48.62592071257869, 224.04162421553573, 95.69128451616108, 0, 9.85248804308449, 29.36567912448397, 0, 0, 48.62592071257869, 91.05353305769682, 9.85248804308449, 9.85248804308449, 4.934278566181947, 34.20432471954953, 48.62592071257869, 0],
        "itemStyle": {
            "barBorderRadius": [5, 5, 0, 0]
        },
        "markLine": {
            "symbolSize": 0,
            "label": {
                "show": false
            },
            "lineStyle": {
                "width": 1,
                "type": "dashed"
            },
            "emphasis": {
                "lineStyle": {
                    "width": 1
                }
            },
            "data": [{
                "name": "Linkage Index Benchmark",
                "yAxis": 230
            }]
        }
    }]
}