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