EChart：基础学习

概念

ECharts，一个使用 JavaScript 实现的开源可视化库
可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）。
底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表

作用

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图
用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

使用步骤

初始化容器，大小，背景等
配置数据
创建echarts实例
使用制定的配置项和数据显示图表

基础使用

引用JS文件

<script type="text/javascript" src="js/echarts.js"></script>

下载地址：EChart

创建DOM容器

<div id="main"></div>

创建图标并放入

<script>// 1. 指定图标的配置和数据var option = {title:{text:'开发语言排行版'},tooltip:{},legend:{data:['权威统计']},xAxis:{data:["JavaScript","Java","Python","C/C++"]},yAxis:{},series:[{name:'日活跃量',type:'line',data:[600,300,500,800]}]};// 2. 初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 3. 使用制定的配置项和数据显示图表myChart.setOption(option);
</script>

图示

柱状图

把series里的type 值修改为"bar"

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>#main{width: 600px;height: 600px;background-color: #ccc;margin: 0 auto;}</style>
</head>
<body><div id="main"></div>
<script src="js/echarts.min.js"></script>
<script>// 1. 配置和数据var option = {title: {text: '开发语言排行榜'},tooltip: {},xAxis: {data: ['JavaScript', 'Java', 'Python', 'iOS', 'C/C++']},yAxis: {},series: [{name: '日活跃量',data: [820, 932, 901, 934, 1290],type: 'bar'}]};// 2. 创建echarts实例var myChart = echarts.init(document.getElementById('main'));// 3. 作用myChart.setOption(option);</script>
</body>
</html>

图示

饼图

饼图没有X轴和Y轴的坐标，数据绑定上也是采用value 和name对应的形式
代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>#main{width: 600px;height: 600px;background-color: #ccc;margin: 0 auto;}</style>
</head>
<body><div id="main"></div>
<script src="js/echarts.min.js"></script>
<script>// 1. 配置和数据var option = {title: {text: '开发语言排行榜'},tooltip: {},series: [{name: '日活跃量',type: 'pie',radius: '70%',data: [{value: 820, name: 'JavaScript'},{value: 932, name: 'Java'},{value: 901, name: 'Python'},{value: 934, name: 'iOS'},{value: 1290, name: 'C/C++'}]}]};// 2. 创建echarts实例var myChart = echarts.init(document.getElementById('main'));// 3. 作用myChart.setOption(option);</script>
</body>
</html>

图示

绑定多组数据

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>#main {width: 600px;height: 600px;background-color: #ccc;margin: 0 auto;}</style>
</head>
<body>
<div id="main"></div>
<script src="js/echarts.min.js"></script>
<script>// 1. 配置和数据var option = {title: {text: '开发语言排行榜'},tooltip: {},xAxis: {data: ['JavaScript', 'Java', 'Python', 'iOS', 'C/C++']},yAxis: {},series: [{name: '日活跃量',data: [820, 932, 901, 934, 1290],type: 'bar'},{name: '访问量',data: [1999, 888, 666, 256, 980],type: 'bar'}]};// 2. 创建echarts实例var myChart = echarts.init(document.getElementById('main'));// 3. 作用myChart.setOption(option);</script>
</body>
</html>

图示

数据绑定

概念

实际使用中，我们的数据一般都是异步读取的。EChart.js对于数据异步读取这块也提供了异步加载的方法。

使用方式

方式1：写好图表参数，然后数据留空，然后在异步读取数据的时候，绑定数据
方式2：异步读取数据的时候同时设置图表参数和数据绑定

操作1

代码

<script>// 1. 初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 2. 异步加载的配置项和数据显示图表$.get('./data/data.json').done(function (data) {setTimeout(function () {myChart.setOption({title:{text:'开发语言排行版'},tooltip:{},legend:{data:['活跃量']},xAxis:{data:data.name},yAxis:{},series:[{name:'活跃量',type:'bar',data:data.data}]})}, 3000);});
</script>

EChart：基础学习相关推荐

【转】oracle PLSQL基础学习
[转]oracle PLSQL基础学习 --oracle 练习: /**************************************************PL/SQL编程基础****** ...
python创建对象的格式为_Python入门基础学习(面向对象)
python基础学习笔记(四) 面向对象的三个基本特征: 封装:把客观事物抽象并封装成对象,即将属性,方法和事件等集合在一个整体内继承:允许使用现有类的功能并在无须重新改写原来的类情况下,对这些功能 ...
虚幻引擎虚拟现实开发基础学习教程
流派:电子学习| MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz 语言:英语+中英文字幕(根据原英文字幕机译更准确)|大小解压后:3.93 GB |时长:5h 15m 了 ...
动画产业基础学习教程 Rad How to Class – Animation Industry Fundamentals
如何分类--动画产业基础大小解压后:6.2G 含课程素材 1920X1080 mp4 语言:英语+中英文字幕(根据原英文字幕机译更准确) 信息: 绘画技巧.解剖学.角色设计.透视和整体讲故事--这门 ...
Blender纹理基础学习视频教程 CGCookie – Fundamentals of Texturing in Blender
Blender纹理基础学习视频教程 CGCookie – Fundamentals of Texturing in Blender Blender纹理基础学习视频教程 CGCookie – Funda ...
ue5新手零基础学习教程 Unreal Engine 5 Beginner Tutorial - UE5 Starter Course
ue5新手零基础学习教程 Unreal Engine 5 Beginner Tutorial - UE5 Starter Course! 教程大小解压后:4.96G 语言:英语+中英文字幕(机译)时长 ...
0基础学好python难不难_零基础学习Python难不难？Python有什么优势？
原标题:零基础学习Python难不难?Python有什么优势? Python是一种计算机程序设计语言.首先,我们普及一下编程语言的基础知识.用任何编程语言来开发程序,都是为了让计算机干活,比如下载一个 ...
计算机一级ps2019,2019年计算机一级考试PS基础学习点子：PS菜单中英文对照表.docx...
2019 年计算机一级考试 PS 基础学习点子: PS 菜单中英文对照表 PS菜单中英文对照表一.File New 2.Open 3.Open As 4.Open Recent Close 6.Sa ...
Java零基础学习难吗
java编程是入行互联网的小伙伴们大多数的选择,那么对于零基础的小伙伴来说Java零基础学习难吗?如果你是初学者,你可以很好的理解java编程语言.并不困难.如果你的学习能力比较高,那么你对Java的 ...
零基础学习java，这些书一定要看!
学习java技术除了看视频,看书也是非常重要的,尤其是零基础同学,本文包含学习Java各个阶段的书籍推荐,史上最全,学习Java,没有书籍怎么行,就好比出征没带兵器一个道理,这些书籍整理出来给大家作为 ...

EChart：基础学习

概念

作用

使用步骤

基础使用

引用JS文件

创建DOM容器

创建图标并放入

图示

柱状图

饼图

绑定多组数据

数据绑定

概念

使用方式

操作1

EChart：基础学习相关推荐

最新文章

热门文章