标签：function color true legend 图表 type var data Echarts

// 参考地址: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,
            },
        },
    }
}

标签：function,color,true,legend,图表,type,var,data,Echarts
来源： https://www.cnblogs.com/gxivwshjj/p/16648404.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。