柱形图和折线图在一个坐标轴ECharts

奇葩问题天天有 今天要做一个柱形图和折线图在一个坐标轴上
先上个参考的地址
大佬地址
唔 为什么别人有了还要再写呢 1是以后好找 ；2是研究过的才是自己的
先上个图片

然后上代码

这个也是扒过来的 尴尬上图地址
html

<!--引入在尾部-->
<th:block th:include="include :: echarts-js"/>

 <div class="ibox float-e-margins col-sm-12">
                <div class="ibox-content ">
                    <div class="echarts " style="height: 550px;" id="echarts-line-chart"></div>
                </div>
            </div>

script

function save(param) {
        var selectZhu = {
            type: "post",
            url: "/reports/echartData",
            data: param,
            success: function (r) {
                var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
                var lineoption = {
                    title: {
                        text: "访问数据统计",
                        textStyle: {
                            color: "#000",
                            fontSize: 26
                        },
                    },
                    tooltip: {
                        trigger: "axis",
                    },
                    grid: {
                        top: "25%",
                        right: "45",
                        bottom: "20",
                        left: "30"
                    },
                    legend: {
                        data: r.dataY,
                        top: "0%",
                        textStyle: {
                            color: "black" //图例文字
                        }
                    },
                    xAxis: [
                        {
                            type: "category",
                            data: r.dataX,
                            axisLine: {lineStyle: {color: "#939495"}},
                            axisLabel: {
                                textStyle: {color: "#939495", fontSize: "14"}
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: "value",
                            name: "访问数",
                            splitLine: {
                                show: false
                            },
                            axisLabel: {
                                show: true,
                                fontSize: 14,
                                color: "#939495"
                            },
                            axisLine: {
                                min: 0,
                                max: 10,
                                lineStyle: {color: "#939495"}
                            } //左线色
                        },
                        {
                            type: "value",
                            name: "",
                            show: true,
                            axisLabel: {
                                show: true,
                                fontSize: 14,
                                formatter: r.dataX,
                                color: "#939495"
                            },
                            axisLine: {lineStyle: {color: "#939495"}}, //右线色
                            splitLine: {
                                show: false,
                                lineStyle: {color: "#939495"}
                            } //x轴线
                        }
                    ],
                    series: [
                        {
                            name: '访问次数',
                            type: 'bar',
                            data: “x轴数据”,
                            itemStyle: {normal: {color: '#4ad2ff'}},
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '访问次数'}
                                ]
                            }
                        }, {
                            name: '访问次数',
                            type: 'line',
                            data: “y轴数据”,
                            itemStyle: {normal: {color: 'orange'}},
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '访问次数'}
                                ]
                            }
                        }
                    ]
                };

                lineChart.setOption(lineoption);
                window.onresize = lineChart.resize;
            }
        }
        $.ajax(selectZhu)
    }

要想直接进入就出现

    $(function () {
        save(null);
    })

后台返回的数据是两个list 一个是x轴一个是y轴

css

    .ibox h3 {
        float: left;
        color: #000;
        font-size: 24px;
    }

    .ibtn h3 {
        color: #000;
        font-size: 24px;
        border-bottom: 1px solid #e7eaec;
        padding-bottom: 10px;
    }

    .ibox button {
        float: right;
        width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #744dfe;
        border: 0;
        background: #ede8fe;
        outline: none;
        border-radius: 5px;
        font-size: 16px;
    }

    .top div {
        width: 24%;
        float: left;
        margin: 30px 1% 0 0;
        padding: 40px 50px;
        border-radius: 10px;
        color: #ffffff;
        font-size: 24px;
    }

    .top div span {
        font-size: 40px;
        display: block;
        margin-top: 20px;
        padding-left: 10px;
    }

    .top div:nth-child(4) {
        margin-right: 0;
    }

    .ibox {
        float: left;
        box-shadow: 5px 5px 15px #eeeeee;
        border-radius: 10px;
        background: #ffffff;
        padding: 30px;
        margin-top: 10px;
        height: 725px;
    }

    .ibox-content {
        height: 500px;
    }


    .ibtn button img {
        height: 130px;
    }

    .ibtn button span {
        padding: 0 10px;
    }

    .ibtn button {
        width: 40%;
        margin: 30px 1% 10px 4%;
        height: 120px;
        line-height: 120px;
        border: 0;
        background: #f9f9f9;
        color: #000000;
        font-size: 24px;
        border-radius: 10px;
    }

    .ibtn button:nth-child(1) {
        margin-left: 7%;
    }

又是努力的一天
加油！！！