科技感的树状图折线图叠加效果ECharts Gallery

20:11:45图表已生成
代码
    var xData = [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
    ];
    var yData_all = [
        2017,
        9021,
        4483,
        7410,
        4919,
        3361,
        2704,
        1065,
        4408,
        3157,
        3102,
        4097,
    ];
    var yData_online = [
        709,
        1917,
        2455,
        2610,
        1719,
        1433,
        844,
        565,
        456,
        981,
        654,
        941
    ];
    var yData_offline = [
        327,
        1776,
        507,
        1200,
        800,
        482,
        465,
        125,
        988,
        544,
        612,
        789
    ];


    var barMaxWidth =14;
    var normalColor = "#ffffff";
    var fontSize = 12;

    var option = {
        backgroundColor:'#000',
        tooltip: {
            trigger: 'axis',
            backgroundColor:'rgba(255,255,255,0)',  // 提示框背景颜色*/
            /* formatter: "{b} <br> {c}亿元({d}%)",*/
            formatter: function(params) {
                    var res = "";
                    res = "<div style='padding:10px 0 15px 0;font-size:13px;text-align: center;width: 120%;background: url(" + basePath + "/ui/bigScreen/images/echarts_01.png) no-repeat;background-size:100% 100%;color: #56FFE4'>" +
                        "变动总数:" + params[5].value +
                        "<br><span style='color: #ffffff;font-size: 10px;'>" + params[0].seriesName + "：" + params[0].value + "</span>"+
                        "<span style='color: #ffffff;font-size: 10px;margin-left: 15px'>" + params[1].seriesName + "：" + params[1].value + "</span>"+
                         "<br><span style='color: #ffffff;font-size: 10px;'>" + params[2].seriesName + "：" + params[2].value + "</span>"+
                        "<span style='color: #ffffff;font-size: 10px;margin-left: 15px'>" + params[3].seriesName + "：" + params[3].value + "</span>"+
                        "<br><span style='color: #ffffff;font-size: 10px;'>" + params[4].seriesName + "：" + params[4].value + "</span>"
                    return res;
                }
        },

        // "tooltip": {
        //     "trigger": "axis",
        //     "axisPointer": {
        //         "type": "shadow",
        //         textStyle: {
        //             color: "#fff"
        //         }
        //
        //     },
        //     confine: true,
        //     textStyle: {
        //         fontSize: fontSize,
        //     },
        //     extraCssText: "width:120px;height:120px",
        // },



        legend: {
            type: "scroll",
            right: "10%",
            top: "15%",
            textStyle: {
                color: "#ffffff",
                fontSize: 10,
            },
            // data: datas.legendData,
        },
        grid: [{
            left: "6%",
            bottom: "8%",
            top: "25%",
            right: "6%",
            containLabel: true,
        }, ],
        xAxis: {
            type: "category",
            axisLabel: {
                show: true,
                textStyle: {
                    color: normalColor, //更改坐标轴文字颜色
                    fontSize: fontSize, //更改坐标轴文字大小
                },
            },
            axisLine: {
                lineStyle: {
                    color: normalColor, //更改坐标轴颜色
                },
            },
            data: xData,
        },
        yAxis: [{
            type: "value",
            name: "",
            nameTextStyle: {
                color: normalColor,
            },
            position: "left",
            //设置坐标轴字体颜色和宽度
            axisLine: {
                show: false,
                lineStyle: {
                    color: normalColor,
                    width: 1,
                },
            },
            //设置网格线颜色
            splitLine: {
                show: false,
                lineStyle: {
                    color: ["#3D5CBB"],
                    width: 1,
                    type: "solid",
                },
            },
        }, ],
        "series": [
            {
            "name": "正厅级(正)",
            "type": "bar",
            "stack": "总量",
            "barMaxWidth": barMaxWidth,
            "barGap": "10%",
            "itemStyle": {
                "normal": {
                    "color": '#6046D1',
                    barBorderRadius:0,
                }
            },
            "data": yData_online,
             },

            {
                "name": "副厅级(副)",
                "type": "bar",
                "stack": "总量",
                "itemStyle": {
                    "normal": {
                        "color": '#4D89FF',
                        barBorderRadius:0,
                    }
                },
                "data": yData_offline
            },


            {
                "name": "正处级(正)",
                "type": "bar",
                "stack": "总量",
                "itemStyle": {
                    "normal": {
                        "color": '#2FC8BE',
                        barBorderRadius:0,
                    }
                },
                "data": yData_offline
            },


            {
                "name": "副处级(副)",
                "type": "bar",
                "stack": "总量",
                "itemStyle": {
                    "normal": {
                        "color": '#F6D84A',
                        barBorderRadius:0,
                    }
                },
                "data": yData_offline
            },

            {
                "name": "其他",
                "type": "bar",
                "stack": "总量",
                "itemStyle": {
                    "normal": {
                        "color": '#FFFFFF',
                        barBorderRadius:0,
                    }
                },
                "data": yData_offline
            },



            {
                "name": "总数",
                "type": "line",
                symbolSize: 10,
                symbol: 'circle',
                "itemStyle": {
                    "normal": {
                        "color": '#436EFD',
                        "barBorderRadius": 0,
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(19,24,140,0.8)'
                        },
                            {
                                offset: 1,
                                color: 'rgba(89,159,241,0)'
                            }
                        ], false),
                        shadowColor: 'rgba(0,202,149, 0.9)',
                        shadowBlur: 20
                    }
                },
                lineStyle: {
                    normal: {
                        width: 2,
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#39E8FF' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#39E8FF' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                },
                "data": yData_all
            },
        ]
    }
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
