ECharts​怎么实现柱状图

这篇文章主要讲解了“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怎么实现柱状图这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！