echarts中圖表適配
阿新 • • 發佈:2020-12-25
技術標籤:echarts
(function () {
// 1. 例項化物件
var myChart = echarts.init(document.querySelector(".bar .chart"));
// 2. 指定配置項和資料
var option = {
color: ["#2f89cf"],
tooltip: {
trigger: "axis",
axisPointer: {
// 座標軸指示器,座標軸觸發有效
type: "shadow", // 預設為直線,可選為:'line' | 'shadow'
},
},
grid: {
left: "0%",
right: "0%",
bottom: "1%",
top: "10px",
containLabel: true,
},
xAxis: [
{
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
axisTick: {
alignWithLabel: true,
},
axisLabel: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
},
},
],
yAxis: [
{
type: "value",
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.6)",
width: "1"
}
},
// color of yAxis
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.6)",
}
},
axisLabel: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
},
},
],
series: [
{
name: "直接訪問",
type: "bar",
// 修改柱子寬度
barWidth: "35%",
data: [10, 52, 200, 334, 390, 330, 220],
itemStyle: {
// 修改柱子圓角
barBorderRadius: 3
}
},
],
};
myChart.setOption(option);
})();
在配置了以上的圖表後,發現雖然放置圖表的容器使用的是響應式佈局,但圖表大小並沒有自適應,增加以下程式碼:
window.addEventListener("resize",function (){
myChart.resize();
});
此時拖動瀏覽器視窗,圖表已經可以適配了。