数据可视化图表ECharts

时间:2023-02-23 21:01:32

介绍:

ECharts是一个基于ZRender(轻量级Canvas类库)的纯javascript图表库,提供可交互、个性化的数据可视化图表。

ECharts提供了折线图、柱状图、散点图、饼图、K线图,以及地图、热力图、关系图等多种图表API,并支持多图混搭。

ECharts一直在交互上不断的改进,最新版的ECharts3支持坐标轴、维度上对数据进行过滤、缩放、平移。对于数据的改变,ECharts会找到两组数据的差异,结合动画去表现数据的变化。对于地理数据,加入了酷炫的特效。

使用起来简单、易上手。

数据可视化图表ECharts

还能根据喜好,更换不同的主题

数据可视化图表ECharts

兼容性:

绝大部分浏览器都支持,IE8也支持哦。

使用:

首先要准备一个具备宽高的DOM容器

文件引入方式:

(一)传统的,通过<script>标签引入

数据可视化图表ECharts

(二)也可以使用模块化的方式

首先,可以通过npm安装ECharts

数据可视化图表ECharts

引入js

数据可视化图表ECharts

初始化:

数据可视化图表ECharts

配置文件:

然后就可以写配置文件啦,通过setOption生成所需要的图表。

数据可视化图表ECharts

title:图表标题

xAxis、yAxis:X轴、Y轴

series:系列列表,通过其中的type属性决定图表类型。

更多的参数配置可以参考这里:http://echarts.baidu.com/option.html#title

效果图:

数据可视化图表ECharts

数据可视化图表ECharts的更多相关文章

  1. Webstorm&plus;Webpack&plus;echarts构建个性化定制的数据可视化图表&amp&semi;&amp&semi;两个echarts详细教程(柱状图,南丁格尔图)

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  2. ECharts-基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表

    ECharts http://ecomfe.github.com/echarts 基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算 ...

  3. Python调用matplotlib实现交互式数据可视化图表案例

    交互式的数据可视化图表是 New IT 新技术的一个应用方向,在过去,用户要在网页上查看数据,基本的实现方式就是在页面上显示一个表格出来,的而且确,用表格的方式来展示数据,显示的数据量会比较大,但是, ...

  4. 百度数据可视化图表套件echart实战

    最近我一直在做数据可视化的前端工作,我用的最多的绘图工具是d3.d3有点像photoshop,功能很强大,例子也很多,但是学习成本也不低,做项目是需要较大人力投入的.3月底由在亚马逊工作的同学介绍下使 ...

  5. JavaScript—数据可视化(ECharts)

    Echarts具有丰富的图表,可以说是数据可视化的神器: 1.下载Echarts 官网下载地址:https://echarts.baidu.com/index.html 2.Echarts引用案例—柱 ...

  6. 数据分析 &vert; 数据可视化图表,BI工具构建逻辑

    本文源码:GitHub·点这里 || GitEE·点这里 一.数据可视化 1.基础概念 数据可视化,是关于数据视觉表现形式的科学技术研究.其中,这种数据的视觉表现形式被定义为,一种以某种概要形式抽取出 ...

  7. CSDN开源夏令营 百度数据可视化实践 ECharts(4)

    ECharts知识点总结: 在应用过程中总会遇到一些难以理解的概念和属性,这里就总结了一下比較难的知识点,方便理解概念.进而更好的掌握ECharts. (1)1.  一个完整的option包括什么?能 ...

  8. CSDN开源夏令营 百度数据可视化实践 ECharts(8)问题分析

    ECharts问题描写叙述: 问题就是折线图上的点是显示的,有人问能不能一開始不显示,当你点击的时候或者是当鼠标移动到上面的时候,折线上的点才显示? 例如以下图所看到的: 分析:让折线上的点不显示能够 ...

  9. CSDN开源夏令营 百度数据可视化实践 ECharts(8)

    (1)前言 首先谢谢林峰老师,继续接着第七篇提到的内容.CSS布局确实非常累,感觉不好看了就的调整,总的看起来的高大上嘛.好了废话不再多说.今天主要就先解说一个页面的内容,对于CSS布局后面讲会具体的 ...

随机推荐

  1. 17&period;观察者模式&lpar;Observer Pattern&rpar;

    using System; using System.Collections.Generic; namespace ConsoleApplication10 { /// <summary> ...

  2. iOS设计模式之简单工厂模式

    简单工厂模式 基本理解 到底要实例化谁,将来会不会增加实例化的对象,比如计算器增加开根运算,这是很容易变化的地方,应该考虑用一个单独的类来做这个创造实例的过程,这就是工厂. 通过使用工厂模式,我们可以 ...

  3. iOS edgesForExtendedLayout、extendedLayoutIncludesOpaqueBars、automaticallyAdjustsScrollViewInsets属性详解

    edgesForExtendedLayout: 在IOS7以后 ViewController 开始使用全屏布局的,而且是默认的行为通常涉及到布局,就离不开这个属性 edgesForExtendedLa ...

  4. 树莓派&plus;qt&plus;opencv

    树莓派:Qt开发套件和opencv安装sudo apt-get install qt4-dev-tools libqt4-dev 不用qt core 的话,其实只要按照 qt4-qmake就行了(只做 ...

  5. storm启动分析

    一个topology的启动包括了三个步骤 1)创建TopologyBuilder,设置输入源,输出源 2)获取config 3)提交topology(这里不考虑LocalCluster本地模式) 以s ...

  6. 基于FPGA的均值滤波算法的实现

    前面实现了基于FPGA的彩色图像转灰度处理,减小了图像的体积,但是其中还是存在许多噪声,会影响图像的边缘检测,所以这一篇就要消除这些噪声,基于灰度图像进行图像的滤波处理,为图像的边缘检测做好夯实基础. ...

  7. 支持&OpenCurlyDoubleQuote;XXX”上下文的模型已在数据库创建后发生更改。请考虑使用 Code First 迁移更新数据库&lpar;http&colon;&sol;&sol;go&period;microsoft&period;com&sol;fwlink&sol;&quest;LinkId&equals;238269&rpar;。

    在Global.asax文件中的Application_Start()方法中加入以下代码 Database.SetInitializer<XXX>(null);

  8. 代码审查Code Review

    代码审查清单 常规项 代码能够工作么?它有没有实现预期的功能,逻辑是否正确等. 所有的代码是否简单易懂? 代码符合你所遵循的编程规范么?这通常包括大括号的位置,变量名和函数名,行的长度,缩进,格式和注 ...

  9. pytest&period;5&period;参数化的Fixture

    From: http://www.testclass.net/pytest/parametrize_fixture/ 背景 继续上一节的测试需求,在上一节里,任何1条测试数据导致断言不通过后测试用例就 ...

  10. C&num; Quartz的配置

    1. 介绍 Quartz为后台工作者提供了得便利,我们下面介绍一下它的配置.本文配置主要针对服务程序的配置. 但是在做下面配置之前,要安装包 Install-Package Quartz 2. Qua ...