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怎么實現柱狀圖這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！