ECharts 开源纯 JavaScript 统计图表插件

发布于 2019-05-04 10:06:46 字数 4413 浏览 2088 评论 0

ECharts 开源来自百度商业前端数据可视化团队,基于 HTML5 的 Canvas 画布设计,是一个纯 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可以说是数据驱动的图表,大部分时候你关心的是那个 option 该如何实现,官网的文档提供详细的说明,另外我们还有近100个实例,这些例子都为你展现了最核心的 option 代码,可以通过在线修改查看效果,ECharts 是玩出来的,希望你玩得开心。

相关资源

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84960 人气
更多

推荐作者

一梦浮鱼

文章 0 评论 0

mb_Z9jVigFL

文章 0 评论 0

伴随着你

文章 0 评论 0

耳钉梦

文章 0 评论 0

18618447101

文章 0 评论 0

蜗牛

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文