这篇文章主要讲解了“ECharts怎么实现柱状图”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“ECharts怎么实现柱状图”吧！
//1、引入JS文件
<script src="echarts.min.js"></script>
<!-- 2.准备一个具备大小的DOM容器 -->
<div class="box">
</div>
.box {
width: 400px;
height: 400px;
background-color: pink;
}
<script>
// 3.初始化echarts实例对象
var myChart = echarts.init(document.querySelector('.box'));
// 4.指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 5.使用刚指定的配置项和数据显示图表 设置给 实例对象。
myChart.setOption(option);
// 当我们浏览器缩放的时候，图表也等比例缩放
window.addEventListener("resize", function () {
// 让我们的图表调用 resize这个方法
myChart.resize();
});
</script>
面试题
一、DOM0级和DOM2级有什么区别
DOM0级中为某个dom元素绑定多个事件时，只有最后一个事件有效。onclick
DOM2级中可以为单个元素绑定多个事件，每个事件都可以被触发。addEventListener
二、textContent、innerText、innnerHTML、value的区别
textContent用来获取和设置文本内容，与innerText的差别是:textContent获取到的内容包
括了元素中的style标签和script标签的内容。
innerText只能获取和设置文本内容，不能获取和设置html代码
innerHTML可以获取和设置html代码
感谢各位的阅读，以上就是“ECharts怎么实现柱状图”的内容了，经过本文的学习后，相信大家对ECharts怎么实现柱状图这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
