Echarts 多图表共用legend

本文主要是介绍Echarts 多图表共用legend，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

// 参考地址:https://www.isqqw.com/echartsdetail?id=31404
//加载数据
function LoadDataX() {
    GetApiDataSync2("url"
        , 'POST'
        , {
             annual: 2022
        }
        , function (result) {
            if (result.Success) {
                setMap(result.data, "map1","line");//使用折线
            }
        }, true
    );
}

function LoadData() {
    GetApiDataSync2("url"
        , 'POST'
        , {
             annual:2022
            }
        , function (result) {
            if (result.Success) {
                setMap(result.data, "map2","bar");//柱状图
            }
        }, true
    );
}


function setMap(data,chartid,type) {
    var x_data = [];
    var legendData = [];
    var selected = {};
    var seriesData = [];
    avalon.each(data, function (index, el) {
        legendData.push(el.name);
        selected[el.name] = index < 2;
        var leftdata = [], rightdata = [];
        avalon.each(el.children, function (idx, item) {
            if (index === 0) {
                x_data.push(item.name);
            }
            leftdata.push(item.dfje);
            rightdata.push(item.corpnum);
        });
        seriesData.push({
            name: el.name,
            type: type,
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: leftdata
        });
        seriesData.push({
            name: el.name,
            type: type,
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: rightdata
        });

    });
    /*
    var dataAll = {
        "leftdata": { //leftdata
            "y_data": leftdata,
            "total": 8000
        },
        "rightdata": { //rightdata
            "y_data": rightdata,
            "total": 8000
        },
        "x_data": x_data 
    };
    */

    var markLineOpt = {
        animation: false,
        label: {
            normal: {
                //formatter: 'y = 0.5 * x + 3',
                textStyle: {
                    align: 'right'
                }
            }
        },
        lineStyle: {
            normal: {
                type: 'solid'
            }
        },
        tooltip: {
            //formatter: 'y = 0.5 * x + 3'
        },
        data: [
            [{
                coord: [0, 3],
                symbol: 'none'
            }, {
                coord: [20, 13],
                symbol: 'none'
            }]
        ]
    };


    var markxAxis = function (len) {
        var Axis = [];
        for (var i = 0; i < len; i++) {
            Axis.push(createxAxis(x_data,i));
        }
        return Axis;
    };
    var markyAxis = function (len) {
        var Axis = [];
        for (var i = 0; i < len; i++) {
            Axis.push(createyAxis(i));
        }
        return Axis;
    };

    option = {
        title: [{
            top: '0%',
            x: '25%',
            textStyle: {
                fontSize: 14,
                color:"#fff"
            },
            textAlign: 'center',
            text: '投入金额'
        }, {
            x: '75%',
            textStyle: {
                fontSize: 14,
                color: "#fff"
            },
            textAlign: 'center',
            top: '0%',
            text: '覆盖企业'
        }],
        grid: [{
            left: '3%',
            top: '20%',
            width: '45%',
            //height: '20%'
        },
        {
            left: '53%',
            top: '20%',
            width: '45%',
            //height: '20%'
        }
        ],
        legend: {
            data: legendData,
            selected: selected,
            top: '',
            left: 'center',
            textStyle: {
                color: '#fff',
                fontSize: 12,
            },
        },
        tooltip: {
            show: 'true',
            trigger: "axis",
            axisPointer: { type: "cross" },
        },
        xAxis: markxAxis(2),
        yAxis: markyAxis(2),
        series: seriesData
    };

    var chartDom = document.getElementById(chartid);
    if (chartDom) {
        var myChart = echarts.init(chartDom);
        option && myChart.setOption(option,true);
    }
}

function createxAxis(data, gridIndex) {
    return {
        data: data,
        gridIndex: gridIndex ,
        axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
                color: "#7B7F9C",
                // width: 1,
                //type: 'dashed',
            },
        },
        splitLine: {
            show: false,
            interval: 'auto',
            lineStyle: {
                color: ['#502297'],
                //type: 'dashed',
            },
        },
        axisTick: {
            show: false, //隐藏X轴刻度
            alignWithLabel: true,
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: '#FFFFFF', //X轴文字颜色
                fontSize: 12,
            },
            margin: 12,
            interval: 0,
            rotate: 30,
            /*
            formatter: function (value) {
                if (value.length > 3) {
                    return value.substring(0, 3);
                }
                return value;
            },
            */
        },
    }
}

function createyAxis(gridIndex) {
    return {
        type: 'value',
        gridIndex: gridIndex,
        name: '单位：万元',
        nameTextStyle: {
            color: "#00b09b",
            fontSize: 12,
        },
        splitLine: {
            show: true,
            interval: 'auto',
            lineStyle: {
                color: '#2D3A52'
            },
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: '#7b7f9c',
            },
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: '#FFFFFF',
                fontSize: 12,
            },
        },
    }
}

这篇关于Echarts 多图表共用legend的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！