Echarts图标自适应问题(已解决)
生活随笔
收集整理的這篇文章主要介紹了
Echarts图标自适应问题(已解决)
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="js/echarts.common.min.js"></script>
</head>
<body><!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">var worldMapContainer = document.getElementById('main');//用于使chart自適應(yīng)高度和寬度,通過(guò)窗體高寬計(jì)算容器高寬
var resizeWorldMapContainer = function () {worldMapContainer.style.width = window.innerWidth+'px';worldMapContainer.style.height = window.innerHeight+'px';
};
//設(shè)置容器高寬
resizeWorldMapContainer();
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(worldMapContainer);// 指定圖表的配置項(xiàng)和數(shù)據(jù)var option = {title: {text: 'ECharts 入門(mén)示例'},tooltip: {},legend: {data:['銷(xiāo)量']},xAxis: {data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]},yAxis: {},series: [{name: '銷(xiāo)量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);//用于使chart自適應(yīng)高度和寬度
window.onresize = function () {//重置容器高寬
resizeWorldMapContainer();myChart.resize();};</script>
</body>
</html>
?呵呵 終于解決了這個(gè)問(wèn)題,官方都沒(méi)有寫(xiě)明白。。
轉(zhuǎn)載于:https://www.cnblogs.com/ZaraNet/p/9571069.html
總結(jié)
以上是生活随笔為你收集整理的Echarts图标自适应问题(已解决)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 源码梳理——Jedis中的集合Jedis
- 下一篇： .net core 微服务之API网关