01-如何直接使用Echarts

2021-11-06 14:34:34 阅读：140 来源： 互联网

标签：01 标记 myChart echarts 设置直接 data Echarts

（1）引入Echarts的js文件

/
/
/
/
/
（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,标记,myChart,echarts,设置,直接,data,Echarts
来源： https://www.cnblogs.com/morehair/p/15516863.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

01-如何直接使用Echarts