这篇文章主要讲解了“怎么使用Echarts实现数据的可视化”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习”怎么使用Echarts实现数据的可视化”吧!
数据可视化的方式有很多种,最简单的是用一些轻量级的图表框架,比如Echarts等。下面我们讲下如何使用Echarts来实现数据的静态可视化。
步骤:
1,下载Echarts
2,编写网页代码
1,下载Echarts
Echarts要实现简单的可视化,其实只需要下载它的js包,登录进官网,点击实例:
我们可以看的到,这里有很多实例,各种各样的,我们可以根据自己的需要进行实例的选择。
点击不同的实例,我们可以看到页面分两个部分,一个是实例的核心代码,一个是实例的效果。代码的修改可以实时反馈到效果界面,所以我们可以先在这个界面上进行调试,看图标是否能够满足我们的功能需求。
我们要下载Echarts组件,可以直接从官网上下载组件包,包含很多复杂的插件。
当然,简单一点,我们只需要下载echart。js这个javascript文档。这里官网任何一个实例界面都是应用了这个文档了的,所以我们在任何一个实例界面,按F12,切换到浏览器界面调试模式。
上图所示,我们看到本界面使用的是echarts.min。js这个文件比echarts.js的区别就是,最小代表的是压缩过后的,体积会小很多,而且不方便阅读,要想阅读比较规整的代码的,可以找到echarts。js来阅读。
双击上面的src路径,复制这个js的路径,然后复制到浏览器的地址栏。
有些浏览器会直接采用打开这个js文件的方式。如下图所示,如果是这样的话,你把这个浏览器内容的界面全选,复制粘贴到一个新建的js文档里面就可以了。
但是上面复制粘贴的方式会出现一个编码格式错误的问题。建议浏览器有下载功能的,新建一个下载链接,然后把地址复制进去。或者通过即IE默认是下载的方式。
这样可以避免在复制粘贴的过程中出现编码格式错误的问题。
保存的时候,保存到一个非中文并且非空格的路径里面,避免系统识别出现问题。
2,程序编码
我们需要在浏览器里面显示Echarts组件,有两个必须的要注意的,一个是你要在浏览器里面预先提供有div,这个div是要显示Echarts各种组件的。另外一个就是用javascript或jquery来创建一个Echarts对象,然后设置数据源,然后将数据源和Echarts对象绑定. .
那么我们在网络里面新建一个html文档,在文档中写入以下代码:
& lt; ! DOCTYPE html>
& lt; html>
& lt; head>
& lt; !
,,,刘日辉
,,,作用:教学演示
,,,时间:2020-9-23
——比;
,,,& lt; !——,设置浏览器的编码,如果中文还是乱码的,可以把下面的utf - 8改成gb2312——比;
,,,& lt; meta charset=皍tf-8"比;
,,,& lt; title>第一个,ECharts 实例& lt;/title>
,,,& lt; !——,导入echarts.js ——比;
,,,& lt; script src=癳charts.min.js"祝辞& lt;/script>
& lt;/head>
& lt; body>
,,,& lt; !——,为ECharts准备一个具备大小(宽高)的Dom ——比;
,,,& lt; div id=癿ain",祝辞& lt;/div>
,,,& lt; script 类型=拔谋?javascript"比;
,,,,,,,//,基于准备好的dom,初始化echarts实例,通过id获取html里面的div对象
,,,,,,,var myChart =, echarts.init (. getelementbyid(& # 39;主要# 39;));
,
,,,,,,,//,配置echarts组件的数据源,指定图表的配置项和数据
,,,,,,,var option =, {
,,,,,,,,,,,标题:,{
,,,,,,,,,,,,,,,:,& # 39;第一个,ECharts 实例& # 39;
,,,,,,,,,,,},
,,,,,,,,,,,提示:,{},
,,,,,,,,,,,传说:,{
,,,,,,,,,,,,,,,数据:[& # 39;销量& # 39;】
,,,,,,,,,,,},
,,,,,,,,,,,xAxis:, {
,,,,,,,,,,,,,,,数据:,(“衬衫“,“羊毛衫“,“雪纺衫“,“裤子“,“高跟鞋“,“袜子“)
,,,,,,,,,,,},
,,,,,,,,,,,桠溪:,{},
,,,,,,,,,,,系列:,[{
,,,,,,,,,,,,,,,名字:,& # 39;销量& # 39;,
,,,,,,,,,,,,,,,类型:,& # 39;酒吧# 39;
null
null
null
null
null
null
null
null
null怎么使用Echarts实现数据的可视化
