第一次使用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/article/92255446a3a11d851648f48e.html)
(4)点击修改后缀名后的新文件, ( 需要选择打开方式,最好直接选择Google Chrome,因为常用这个浏览器可以在网页右上方的点点中的工具中,打开开发者模式,直接对与新建的html文件进行修改;不过直接用win10自带的浏览器也可以打开这个html,看到新建的网页效果,显示出刚刚添加的文本内容)
(1)在官网上下载ECharts的源代码,并找到下载后保持这个文件的文件夹; (2)将新建的html文件移动到这个含有ECharts的源代码的文件夹中;
(3)修改html文件的内容,改为网上的例子中的内容;示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--include ECharts document-->
<script src="echarts.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> (参考链接1:https://jingyan.baidu/article/acf728fd6c09baf8e510a3a9.html 2:https://wwwblogs/bricyang/p/6733671.html) 【注意:】 (1)很有可能文件最后的编码显示是不支持中文的,我暂时是直接用英文来替换达到目的; (2)请注意使用英文的符号; (3)可以用Google Chrome的“...”的“更多工具”的“开发者工具”调试;
(4)修改内容后,保存文件; (5)点击文件,以某个浏览器打开后,可以看到如下效果的网页内容:
更多推荐
菜鸟初学Echarts
发布评论