Echarts实战案例代码(46)：带渐变背景颜色的倾斜角度的图表的CSS样式表解决方案

项目需求

UI设计师在大屏设计时，出现了倾斜角度的Echarts角度的图表。

解决思路

实际上，正常渲染图表，将图表所在的容器在CSS样式表进行rotateY(30deg)设置即可。

HTML代码

<div class="container">
    <div class="weather-side">
        <div class="weather-gradient" id="main">div>
    div>
div>

Echarts代码

    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value',
        },
        series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.8)'
            }
        }]
    };

    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });

CSS样式表

.container {
    border-radius: 25px;
    color: #ffffff;
    height: 400px;
}
.weather-side {
    position: relative;
    height: 100%;
    border-radius: 25px;
    background: url("../img/nb.jpg") no-repeat 50% 12%;
    width: 600px;
    -webkit-box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.2);
    transition: transform 600ms ease;
    transform: translateZ(0) scale(1.02) perspective(1000px) rotateY(30deg);
    float: left;
}

.weather-side:hover {
    -webkit-transform: scale(1.1) perspective(1500px) rotateY(10deg);
    transform: scale(1.1) perspective(1500px) rotateY(10deg);
}

.weather-gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: var(--gradient);
    border-radius: 25px;
    opacity: 1;
}

Done !