01-如何直接使用Echarts

(1)引入Echarts的js文件
01-如何直接使用Echarts
01-如何直接使用Echarts
/
/
/
/
/
(2)编写代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Echarts</title>
    <script src="./js/echarts.min.js"></script>
</head>
<body>
    <!--准备一个容器div,放置图表-->
    <!--Echarts会根据容器的大小来显示图标的大小-->
    <div id="demo1" style="width: 600px;height: 400px"></div>

    <!--使用javascript绘制图标-->
    <script>
        //初始化绘制图标的echarts实例
        //参数是我们要绘制图标的位置
        var myChart = echarts.init(document.querySelector("#demo1"));//我们引入的echarts.min.js会帮我们创建一个echarts对象

        //指定图表的配置
        var option = {
            title:{//标题
                text:"echarts Demo1"
            },
            tooltip:{},//提示框
            legend:{//设置我们的标记
                data:['人数']
            },
            xAxis:{//水平轴
                data:['vue','react','angular','jquery'] //标记
            },
            yAxis:{},//垂直轴(我们没有写标记,意味着就会显示数字)
            series:[//设置我们的数据
                {
                    name:"人数",//注意与我们设置的标记一致
                    type:"bar",//设置类型为条形图
                    data:[2000,1500,500,2200],//设置我们的数据
                }
            ],
        }

        //给我们的myChart图标实例设置他的配置
        myChart.setOption(option);

    </script>
</body>
</html>

/
/
/
/
/
(3)显示效果
01-如何直接使用Echarts

上一篇:echarts 双y轴 实现


下一篇:echarts的toolbox五个小工具