前言:数据可视化的概念是风靡网络的Facebook全球用户热度图,该图是先从Hive中抽取用户的信息,再利用统计软件进行数据挖掘,然后根据定义的权重值画线,最后用色盘来标识获得。今天我们来谈谈Echarts Gallery
的使用方法。
一.需要的文件:
在使用Echarts Gallery
时,我们需要进行下载一些相关的文件,我们可以通过echarts来进行相关文件的下载,我们下载的版本是4.9.0
,可以通过官网来进行下载,也可以通过echarts-4.9.0来进行下载。
二.项目进行:
1.类型选择:
我们大概需要什么样子的模板,我们可以在ECharts Gallery
中进行选择,以下图为例:
假设我们需要实现一个这种模板的效果,那么我们可以通过以下步骤来进行操作:
2.操作步骤:
(1).文件导入:
我们首先在原模板的网页中进行需要文件的查看,主要就是点击脚本
查看需要的文件:
由上图知道需要的是china.js
这个脚本文件,然后在我们刚开始下载的文件里面进行查找这个文件,然后在我们的项目中进行导入:
`echarts.min.js`这个文件是必不可少的,同时两者的顺序也是不能颠倒的:`谨记`
<script src="echarts/echarts.min.js"></script>
<script src="echarts/china.js"></script>
(2).进行布局:
既然要显示,那么我们必需一个容器来进行其的装载,我们简单的使用一个div来对其进行装载吧;
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main"></div>
css样式:
#main {
width: 600px;
height: 500px;
margin: 100px auto;
}
(3).JS书写:
文件已经导入就绪,那么就是主要的功能部分了,JS在进行书写时,先对我们的echarts
进行基于容器Dom
来实例化:
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
然后接下来就是无脑操作了,将我们需要的模板中的代码进行赋值粘贴至我们的项目JS文件中。
但是:在代码的最后我们需要使用刚指定的配置项和数据显示图表,也就是需要如下的代码:
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
没有这一步,就算前面书写再多也是没用的,我们的数据是无法显示的!
三.效果展示:
经过我们的操作,那么我们的实现效果如下:
希望可以帮助到你!
今天的文章Echarts Gallery的使用方法分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/25179.html