菜鸟初学Echarts

第一次使用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）点击文件，以某个浏览器打开后，可以看到如下效果的网页内容：

菜鸟初学Echarts相关推荐

菜鸟初学JQuery
生活不菜,菜鸟不菜.大家好,我是互联网小菜鸟,又和大家见面了.近期,看了一下JQuery,感觉挺简单,然后和大家一起聊聊JQuery,顺便帮助那些菜鸟们JQuery入门.下面我们就开始. 首先我们先认 ...
菜鸟初学freenas
菜鸟玩Freenas服务器 1. 搭设freenas服务器的目的与意义为xx搭建一个公共的文档.软件.数据访问平台,更加便捷的为xx员工提供文件共享,数据共享服务,从而提高部门工作效率. 2. fr ...
linux 内存大页,Linux大页内存管理等---菜鸟初学
1. 查看linux的内存情况: free -m 2. 查看是否开启大页的方法: cat /proc/meminfo |grep -i HugePage AnonHugePages: 276480 k ...
京东开普勒php接口,IOS菜鸟初学第十五篇：接入京东开普勒sdk，呼起京东app打开任意京东的链接-Go语言中文社区...
我之前写了一篇关于接入京东联盟sdk的文章,但是最近,由于这个原因,如下图导致需要重新集成京东的sdk,但是由于某种原因,因为android和ios端不统一,android接入的是京东开普勒的SDK ...
python selenium 点击报错v_python菜鸟初学selenium+chromedrive，简单点击出错，请指教...
源码:fromseleniumimportwebdriverimporttimeqinghuancun=webdriver.Chrome()#输入网址qinghuancun.get('chrome:/ ...
echarts快速上手
echarts快速入门笔者在初学echarts的时候,非常痛苦, 感觉配置项多如牛毛, 任务又很紧,无法细读文档, 在网上查阅过各种入门文章, 终是不合心意, 于是乎, 写下此文,话不多说直接开整. ...
java单链表通讯录_[Java教程]用java实现单链表（菜鸟出征）
[Java教程]用java实现单链表(菜鸟出征) 0 2016-03-24 14:00:06 package code;class Node{ Node next; int data; public ...
ECharts本地json文件引用问题
@比较详细,比较小白,大神笑看~ @求点赞,求打赏,请支持一个月薪3800的IT从业者☺️ ECharts本地.json文件引用问题初学echarts.js,因为没有网页基础,遇到很多问题.由于要做 ...
appscan无法连接到服务器_SQL Server无法连接服务器
DUKE:菜鸟初学-如何给电脑重装系统(Windows)zhuanlan.zhihu.com 情况一:首次安装 1.检查系统服务是否正常 2.检查SQL Server网络配置是否启用 3.双击TCP ...

菜鸟初学Echarts

菜鸟初学Echarts相关推荐

最新文章

热门文章