首页 网络技术
  1. 正文

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​怎么实现柱状图
本文链接:https://www.qqooo.cn/post/6740.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!