项目需求
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 !
