ECharts入门

最新推荐文章于 2024-05-26 12:10:26 发布

TISIULS

最新推荐文章于 2024-05-26 12:10:26 发布

阅读量437

点赞数 1

分类专栏： echarts

本文链接：https://blog.csdn.net/u014596551/article/details/83269115

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

看了ECharts的官方文档，但是还是无法上手，对于前端完全不熟悉的，可以看这篇文章，傻瓜式开始建立一个图表

1，下载

进入Echarts官网，选择自定义构建Echarts

http://echarts.baidu.com/tutorial.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9E%84%E5%BB%BA%20ECharts

在选择在线自定义构建

选择好需要的图表，即可下载js文件

下载完成

下载完成后，将下载的文件扩展名改为.js

2.demo初始化

新建.txt文件，加入如下html代码

重命名该txt文件，并且修改扩展名为html

代码中<script src="echarts.min.js"></script> 为刚刚下载好的js库，将路径修改为上述js库的存放路径即可

<!DOCTYPE html>
<html>
<head>   
       <meta charset="utf-8">
       <!--include ECharts document-->
       <script src="echarts.min.js"></script>
      
       <title>
       ECharts de Hello World
       </title>
</head>
<body>
       <!--prepare a DOM with size for ECharts-->
       <div id="main" style="width: 600px;height: 400px;"></div>
       <div id="main2" style="width: 600px;height: 400px;"></div>
    <script type="text/javascript">
        //基于准备好的dom，初始化echarts实例
        var myChart=echarts.init(document.getElementById('main'));
        //指定图表的配置项和数据
        var option={
             title:{
                 text:'Echarts New Try'
             },
             tooltip:{},
             legend:{
                 data:['Sold Amount']
              },
              xAxis:{
                  data:["shirt","skirt","coat","pants","shoes"]
              },
              yAxis:{},
              series:[{
                  name:'Sold Number',
                  type:'bar',
                  data:[5,20,36,10,10]
              }]
          };
         
          //使用刚指定的配置项和数据显示图表
          myChart.setOption(option);
    </script>
   
</body>
</html>

本文将两个文件放在同一目录下

直接用浏览器打开该html即可看到结果

第一个echarts 的demo完成

TISIULS

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ECharts入门

看了ECharts的官方文档，但是还是无法上手，对于前端完全不熟悉的，可以看这篇文章，傻瓜式开始建立一个图表1，下载进入Echarts官网，选择自定义构建Echartshttp://echarts.baidu.com/tutorial.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9E%84%E5%BB%BA%20ECharts在选择在线自定义构建...
复制链接

扫一扫