111 lines
2.6 KiB
HTML
111 lines
2.6 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8" />
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|||
|
|
<script src="./echarts.min.js"></script>
|
|||
|
|
<title>Document</title>
|
|||
|
|
<style>
|
|||
|
|
* {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box {
|
|||
|
|
width: 800px;
|
|||
|
|
height: 100vh;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-rows: repeat(10, 10vh);
|
|||
|
|
/* 定义10行，每行10vh，尽管只用一行 */
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
/* 定义一个列，占满整个宽度 */
|
|||
|
|
}
|
|||
|
|
.echarts {
|
|||
|
|
grid-row: 1 / 6;
|
|||
|
|
grid-column: 1 / -1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.newecharts {
|
|||
|
|
grid-row: 1 / 4;
|
|||
|
|
grid-column: 1 / -1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#change {
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<div id="change">点我改变图形大小</div>
|
|||
|
|
<div class="box">
|
|||
|
|
<div id="echarts" class="echarts"></div>
|
|||
|
|
</div>
|
|||
|
|
<script>
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
var myChart = echarts.init(document.getElementById('echarts'))
|
|||
|
|
|
|||
|
|
// 指定图表的配置项和数据
|
|||
|
|
var option = {
|
|||
|
|
title: {
|
|||
|
|
text: 'ECharts 入门示例',
|
|||
|
|
},
|
|||
|
|
tooltip: {},
|
|||
|
|
legend: {
|
|||
|
|
data: ['销量'],
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
|
|||
|
|
},
|
|||
|
|
yAxis: {},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '销量',
|
|||
|
|
type: 'bar',
|
|||
|
|
data: [5, 20, 36, 10, 10, 20],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 使用刚指定的配置项和数据显示图表。
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
|
|||
|
|
|
|||
|
|
document.getElementById('change').addEventListener('click', function () {
|
|||
|
|
console.log("点击了");
|
|||
|
|
// 切换类名以改变图表大小
|
|||
|
|
var echartsDom = document.getElementById('echarts');
|
|||
|
|
echartsDom.classList.toggle('newecharts');
|
|||
|
|
echartsDom.classList.toggle('echarts');
|
|||
|
|
|
|||
|
|
// 让ECharts响应容器大小的变化
|
|||
|
|
myChart.resize();
|
|||
|
|
|
|||
|
|
// 如果需要，你可以在这里更新图表的数据或配置项
|
|||
|
|
// 例如：myChart.setOption(newOption);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 根据页面大小自动响应图表大小
|
|||
|
|
window.addEventListener('resize', function () {
|
|||
|
|
myChart.resize()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
|
|||
|
|
// let OneHeight = chartsInfo.value.offsetHeight * ( heightList.value.length * 0.1)
|
|||
|
|
// heightList.value.push(OneHeight)
|
|||
|
|
// // 第其它图的高度
|
|||
|
|
// let OtherHeight = chartsInfo.value.offsetHeight * 0.1
|
|||
|
|
// heightList.value.push(OtherHeight)
|
|||
|
|
for (let index = 1; index <= 2; index++) {
|
|||
|
|
console.log("index", index);
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|