菜鸟初学Echarts

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

Ludviq

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

阅读量2.7w

点赞数 6

分类专栏： UI 文章标签： EC

本文链接：https://blog.csdn.net/Ludviq/article/details/79329810

版权

UI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一次使用Echatrts，看网上的教程都是直接下载Echarts官网的源代码，之后在网页中引用，之后如何如何；

但是我之前没有关注前端的内容，所以是什么都不懂，于是一直都在找到底应该怎么做；

下面这些就是我学习到的Echarts的使用方法：

【1】新建html，具体步骤如下：

（1）在电脑上新建一个txt文档；

（2）修改txt文档的内容（就是在这个txt的文档中写入基本的代码格式）

（代码格式如下： <html> <head> <title> </title> </head> <body> </body></html>）

（在<body>与</body>之间可以加入一些文本内容，作为你的网页的内容）

（3）修改这个新建文档的后缀名从txt到html；

（系统是win10的话，可以百度一下，看如何修改后缀名，有效链接如: https://jingyan.baidu.com/article/92255446a3a11d851648f48e.html）

（4)点击修改后缀名后的新文件，

( 需要选择打开方式，最好直接选择Google Chrome，因为常用这个浏览器可以在网页右上方的点点中的工具中，打开开发者模式，直接对与新建的html文件进行修改；不过直接用win10自带的浏览器也可以打开这个html，看到新建的网页效果，显示出刚刚添加的文本内容)

【2】应用ECharts

（1）在官网上下载ECharts的源代码，并找到下载后保持这个文件的文件夹；

（2）将新建的html文件移动到这个含有ECharts的源代码的文件夹中；

（3）修改html文件的内容，改为网上的例子中的内容；示例如下：

<!DOCTYPE html>
<html>
<head>
       <meta charset="utf-8">
       
       <script src="echarts.js"></script>

       <title>
       ECharts de Hello World
       </title>
</head>

        //指定图表的配置项和数据
        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>

(参考链接1：https://jingyan.baidu.com/article/acf728fd6c09baf8e510a3a9.html

2：https://www.cnblogs.com/bricyang/p/6733671.html)

【注意：】

（1）很有可能文件最后的编码显示是不支持中文的，我暂时是直接用英文来替换达到目的；

（2）请注意使用英文的符号；

（3）可以用Google Chrome的“...”的“更多工具”的“开发者工具”调试；

（4)修改内容后，保存文件；

（5）点击文件，以某个浏览器打开后，可以看到如下效果的网页内容：

Ludviq

关注

6
点赞
踩
30

收藏

觉得还不错? 一键收藏
1
评论
菜鸟初学Echarts

第一次使用Echatrts，看网上的教程都是直接下载Echarts官网的源代码，之后在网页中引用，之后如何如何；但是我之前没有关注前端的内容，所以是什么都不懂，于是一直都在找到底应该怎么做；下面这些就是我学习到的Echarts的使用方法：【1】新建html，具体步骤如下：（1）在电脑上新建一个txt文档；（2）修改txt文档的内容（就是在这个txt的文档中写入基本的代码格式）（代码格式...
复制链接

扫一扫