Echarts的基本使用--一分钟快速上手

官网：https://echarts.apache.org/zh/index.html

 

1.  下载并引入echarts.js文件

2 .  准备一个具备大小的DOM容器

3.  初始化echarts实例对象

4.  指定配置项和数据(option)

5. 将配置项设置给echarts实例对象

记住这5步就行了

案例

 

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!--    1. 下载并引入echarts.js文件      -->
        <script src=" https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    </head>
    <style>
    
    </style>
    <body>
        <!-- 2 .  准备一个具备大小的DOM容器 -->
        <div class="box" style="height: 500px; width: 500px;background-color: aquamarine;">
            
        </div>
        <!--   3.  初始化echarts实例对象   -->
        <script type="text/javascript">
        var myChart = echarts.init(document.querySelector('.box'));
         // 指定图表的配置项和数据  4.  指定配置项和数据(option)
              var option = {
                title: {
                  text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                  data: ['销量']
                },
                xAxis: {
                  data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                yAxis: {},
                series: [
                  {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                  }
                ]
              };
              
              // 5. 将配置项设置给echarts实例对象
               myChart.setOption(option);
        </script>
    </body>
</html>

 

 

更多案例：https://www.makeapie.com/explore.html

 

posted @ 2021-10-22 00:08  漫漫长路</>  阅读(667)  评论(0)    收藏  举报