EC基础-1

最新推荐文章于 2024-06-04 10:03:01 发布

阿黄Ahuang

最新推荐文章于 2024-06-04 10:03:01 发布

阅读量569

点赞数

文章标签： Echarts 大数据开发数据可视化

本文链接：https://blog.csdn.net/FZUMRWANG/article/details/82890481

版权

EC基础-1

如何使用官网，如何引入EChart，名词解释，第一个ECharts例子，web托管，理解ECharts的数据驱动

如何使用官网

Get Started：一个五分钟上手Echarts的图表
百度图说：不使用编程制作交互能力的图表
ECharts-X：ECharts扩展，一个3D的图表库
ZRender：Echarts底层依赖的一个开发的图表库，如果需要一个开发模式的模块化的包引入，那么需要下载一个ZRender，也可以到GitHub上下载源码
QTEX：Echarts-X的基础库，是一个3D的Web jar引擎，但是目前只提供一个3D地球
下载：能找到最新版的发布的版本，其中Echarts-m是移动版，Echarts-X是一个3D版
BaiduHi群：可以找到也在玩Echarts的群友
实例：有一些Echarts的特性介绍和一些特殊特性的教程，其中有一个子地图模式，能够抓取一个地区的地图
事件交互：这里能够看到一些联动的案例，可以做出一个具有互动能力的交互表，其中有一个事件调试的demo，其下会默认的绑定一些事件，对图表做出一些操作则事件会在下面显示，比如说点击，则下面则会告诉你这是一个点击事件，并且显示的参数，若是想要看更加详细的则可以打开控制台，则完整的参数则会在控制台之中打印出来，这是在事件调试时候非常有帮助的功能；这里只提供六个功能，若是想要更多的功能，就可以在左边的OPION之中添加一些事件，然后点击刷新，则可以显示出事件的效果
百搭事件轴：提供了四个例子，折柱，散点，饼图，地图

官网最重要的两个内容之一：实例

导航：有每一种图标所提供的例子，这是一个图表的导航
例子：在实例页面之中有很多的例子，有些例子有编号数字，有些例子没有编号数字，其中有编号数字的是具有数据意义的实例，可以在网站的网址上输入例子的英文名则会自动显示，比如输入bar1.html（这是在尾部添加），则会显示有实际意义数据的实例，但是若是显示bar.html，则显示的是一个模板，将bar这个例子的可用的方法显示在左边的OPION之中，可以在其中查找这个例子的各种个性化的使用方法。
地图例子：有全国的省份的各种例子，比如全国的34是个省份的例子在标准地图之中，可以在其中找到各个省份的例子，还有基于百度地图的扩展BMap，百度迁徙就是使用这个扩展，支持SVG扩展自定义的地图
混搭：除了单独的图表地图之外还有混搭，比如折现+饼图
组件：Echarts除了提供十二类图表之外还提供了七个具有交互能力的组件，可以在其中找到应用广泛的组件的个性化例子，比如说坐标系，其中有坐标轴各种相关的配置，可以在其中修改并且看看效果。图例支持异步加载，支持默认的开启或者关闭，都能在legend之中看到相关的配置
其他：有三个动态加载的例子
- 过渡：Ecahrts有6种过渡效果，点击loading就能实现过渡
主题：可以预览Echarts提供的九个主题，可以通过切换去看到，除了主题预览之外也能定制主题，可以在OPTION之中修改，若是不知道怎么修改的话可以将文档实例打开，其中有图文并茂的告诉大家所有的配置项指的是什么，修改之后刷新即可
专题：在里面能够找到一些有意思的东西，或者说在设计上能够有所参考

官网之中最最重要的东西：文档

一开始使用文档会不好理解，因为Echarts的文档使用的是数据驱动的思想，它是一个参考手册，在设计的时候可以时时翻阅，当我们要实现某个东西的时候，可以从文档之中寻找内容

文档是如何组织的？

左边是文档的主导航，下边是文档的次导航，打开下边的默认选项，指向的是右边的同样的内容
怎么引入Echarts：三种引入方式
- 单文件引入需要一个构建工具echarts-optimizer，若是需要自定义构造单文件则需要看它的安装说明，Echarts的下载包中已经提供了单文件，若是没有个性化的需求，则不用去构造单文件。
- 当我们引入单文件之后需要初始化去初始化Echarts实例，初始化只有一个方法init，拿到实例之后能够看到这个实例会有一些自身的方法，可以去做图表的渲染，更新，动态接口，清除，释放等等内容
选项之中最重要的是数据驱动型的图表option，该对象分成三大类，公共选项，组件选项，数据选项，左边的导航是option的进一步细分
图数据的表示：如果需要做和和弦图和力导向图这两种图表则需要看这一部分的内容
多级控件
三个附录
- 地图的扩展
- 组件和图表的实例接口
关于怎么使用图表的伪代码
副导航：其实就是整个的option，其实就是整个的默认配置项

Echarts入门教程：5分钟上手Echarts图表

网址：http://echarts.baidu.com/tutorial.html#5 分钟上手 ECharts
两种引入方式：模块化单文件引入(推荐)、标签式单文件引入(简单)

第一个Echarts实例

在Echarts官网首页点击下载，选择全部源代码下载
打开编辑器：Hbuilder新建Project
将下载的源代码echarts.js放入新建的Project之中
在Project之中新建html文档，将官网上第一个实例粘贴复制

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例，echarts命名空间有一个init方法，传入名为main的dom
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据，数据驱动echarts，所谓的数据就是option
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表，使用实例方法setOption将option传入
        myChart.setOption(option);
    </script>
</body>
</html>

将应用实例放到网络之上
- 百度搜索：新浪云
- 进入，注册，登录，创建云应用
- 代码管理，在线编辑代码
- 上传echarts.js以及html文件，保存
- 在浏览器之中输入应用网址/html文件名
- http://myecharts.applinzi.com/3-1.html

ECharts文档

参考手册：http://echarts.baidu.com/echarts2/doc/doc.html
使用ECharts作图关键的是怎么构建option，因此不论是文档还是例子，都是围绕着option展开，ECharts的每一个实例我们都能看到它的option
我们使用ECharts很重要的一点就是可以直接在实例之中修改其option，然后刷新之后就能够看到结果

阿黄Ahuang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
EC基础-1

EC基础-1如何使用官网，如何引入EChart，名词解释，第一个ECharts例子，web托管，理解ECharts的数据驱动如何使用官网Get Started：一个五分钟上手Echarts的图表百度图说：不使用编程制作交互能力的图表ECharts-X：ECharts扩展，一个3D的图表库ZRender：Echarts底层依赖的一个开发的图表库，如果需要一个开发模式的模块化的包引入，那...
复制链接

扫一扫