ECharts 开源纯 JavaScript 统计图表插件 - 文章教程

ECharts 开源纯 JavaScript 统计图表插件

发布于 2019-05-04 字数 5638 浏览 1641 评论 0

ECharts 开源来自百度商业前端数据可视化团队,基于 HTML5 的 Canvas 画布设计,是一个纯 JavaScript 图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特 性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。

ECharts 开源纯 JavaScript 统计图表插件

ECharts 特点

ECharts 全称 Enterprise Charts 商业产品图表库,提供商业产品常用图表,底层基于 ZRender(一个全新的轻量级 Canvas 类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图,同时支持任意维度的堆积和多图表混合展现。

混搭

混搭的图表会更具表现力也更有有趣味,ECharts 提供的图表(共11类17种)支持任意混搭:

折线图(面积图)、柱状图(条形图)、散点图(气泡图)、K 线图、
饼图(环形图)、雷达图、地图、和弦图、力导布局图、仪表盘、漏斗图。

混搭情况下一个标准图表:包含唯一图例、工具箱、数据区域缩放、值域漫游模块,一个直角坐标系(可包含一条或多条类目轴线,一条或多条值轴线,最多上下左右四条)

拖拽重计算

拖拽重计算特性(专利)带来了数据统计图表从未有过的用户体验,允许用户对统计数据进行有效的提取、整合,甚至在多个图表间交换数据,赋予了用户对数据进行挖掘、整合的能力。

数据视图

如果你所呈现的数据足够让用户所关心,那么他们将不满足于查看可视化的图表,要去逐一迎合他们下载保存,数据分享,加工整合已有数据等等需求?

或许你只要给予一个“,”分隔的数据文本他们就懂了,这就是ECharts的数据视图!当然,你可以重载数据视图的输出方法,用你独特的方式去呈现数据。

如果你的用户足够的高端,你甚至可以打开数据视图的编辑功能,跟拖拽重计算相比,这可是批量的数据修改!

动态类型切换

很多图表类型本身所表现的能力是相似的,但由于数据差异、表现需求和个人喜好的不同导致最终图表所呈现的张力又大不一样,比如折线图和柱状图的选择,系列数据是堆叠还是平铺总是让人头疼。

ECharts提供了动态类型切换,让用户随心所欲的切换到他所需要的图表类型和堆叠状态。

图例开关

多系列数据的同时展现呈现出丰富内容,但如何让用户切换到他所关心的个别系列上?

ECharts提供了方便快捷的多维度图例开关,可以随时切换到你所关心的数据系列。

更多特点请移步:ECharts · Feature

快速入门

新建一个 echarts.html 文件,为 ECharts 准备一个具备大小(宽高)的 Dom。

<div id="main" style="height:400px"></div>

新建<script>标签引入模块化单文件echarts.js

<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

新建 <script> 标签中为模块加载器配置 Echarts 和所需图表的路径(相对路径为从当前页面链接到 echarts.js),引入图表文件见引入ECharts2

<script>
// 路径配置
require.config({
    paths: { echarts: 'http://echarts.baidu.com/build/dist' }
});

<script> 标签内动态加载 Echarts 和所需图表,回调函数中可以初始化图表并驱动图表的生成,option 见API & Doc

// 使用
require(
    [
        'echarts',
        'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
    ],
    function (ec) {
        // 基于准备好的dom,初始化echarts图表
        var myChart = ec.init(document.getElementById('main')); 
        var option = {
            tooltip: {
                show: true
            },
            legend: {
                data:['销量']
            },
            xAxis : [
                {
                    type : 'category',
                    data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    "name":"销量",
                    "type":"bar",
                    "data":[5, 20, 40, 10, 10, 20]
                }
            ]
        };
        // 为echarts对象加载数据 
        myChart.setOption(option); 
    }
);

浏览器中打开 echarts.html,就可看到以下效果

ECharts 开源纯 JavaScript 统计图表插件

最好的参考资源:实例

ECharts可以说是数据驱动的图表,大部分时候你关心的是那个 option 该如何实现,官网的文档提供详细的说明,另外我们还有近100个实例,这些例子都为你展现了最核心的 option 代码,可以通过在线修改查看效果,ECharts 是玩出来的,希望你玩得开心。

相关资源

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0