ECharts的基本使用与方法
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器，底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
绘制数据图表
1、柱状图
柱状图效果浏览
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}; // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
2、折线图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据统计图：折线图</title>
<!-- 引入 ECharts 文件 这里选择min.js压缩版的echarts -->
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '未来一周气温变化'
},
tooltip:{
trigger: 'axis'
},
xAxis:{
type: 'category',
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis:{
type: 'value',
axisLabel: { //坐标轴刻度标签的相关设置。
formatter: '{value} °C' // 使用字符串模板，模板变量为刻度默认标签 {value}
}
},
series:[
{
name:'最高气温',
type:'line',
data:[11, 11, 15, 13, 12, 13, 10],
},
{
name:'最低气温',
type:'line',
data:[1, -2, 2, 5, 3, 2, 0], }
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script> </body>
</html>
3、饼图
代码如下：
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据
var option = {
title: {
text: '小杰公司年龄阶段的员工占比',
x:'center'//水平居中
},
tooltip: {//提示框组件
trigger:'item',//'item'数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用
formatter:"{a}<br/>{b}:{c} ({d}%)"
},
series:[
{
name:'年龄占比',
type:'pie',
radius:'55%',
center:['50%','60%'],
data:[
{value:80,name:'20-25岁'},
{value:30,name:'26-30岁'},
{value:20,name:'31-35岁'},
{value:8,name:'36-40岁'},
{value:5,name:'41岁以上'}
],
itemStyle:{
emphasis:{
shadowBlur:10,
shadowOffsetX:0,
shadowColor:'rgba(0,0,0,0.5)'
}
}
}
]
}; // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
结语
以上绘制的图表是数据图中用的频率较高的三种。不仅如此，ECharts 还可用于地理数据可视化的地图，用于关系数据可视化的关系图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，并且支持图与图之间的混搭。更多有关 ECharts 的使用方法，可参考 ECharts 的官方文档：
https://echarts.baidu.com/index.html
ECharts的基本使用与方法的更多相关文章
- Echarts 多曲线“断点”问题解决方法
Echarts 用来做可视化曲线是非常优秀的一个库.建议使用 Echarts 作为项目的可视化图标库时,仔细研究 官方实例,根据需求来选择类似的示例,下载实例模板来开发,节省时间,减少出错,提高效率. ...
- echarts 调整图表 位置 的方法
###内部图表大小是与div容器大小位置相关的,如果想调整图表大小位置,调整div的属性就可以了### ###如果是想调整图表与div间上下左右留白,则设置grid属性就可以了### 如图所示: 具体 ...
- echarts 调整图表大小的方法
第一次使用Echarts,大小用的不是那么随心应手,通过文档和百度出的结果,发现其实很简单: 内部图表大小是与div容器大小相关的,如果想调整图表大小,调整div就可以了 如果是想调整图表与div间上 ...
- echarts ajax数据加载方法
一: <!-- 引入 echarts.js --> <script type="text/javascript" src="echarts.min.js ...
- handsontable 和 echarts都定义了require方法，初始化时冲突了，怎么办?
echarts初始化时报这个错误. require.config is not a function 方案一: 让其中一方的初始化不依赖于 require即可 1.去掉 var testDrowEc ...
- angular 实现 echarts 拖动区域进行放大 方法
实现逻辑: 1.通过鼠标摁下事件 和弹出事件 获取x轴的index 之后去x轴的list中去获取两个坐标点 2.之后将这两个数据作为参数 传到后台更新数据 3.记录下来这两个坐标点 放到lis ...
- echarts图表里label文字过长换行的方法
在做一些图标时,有时会出现显示文字过长的问题,需要将其按照指定的字数换行,像下图这样 而echarts没有提供换行的方法,但是可以使用fomatter方法进行设置,代码如下 formatter: fu ...
- Echarts 曲线数少于图例数解决方法
在上一篇文章 Echarts 多曲线“断点”问题解决方法 中说到了Angular 项目中要使用 Echarts 的方法. 说明了自己解决当“每一条曲线的横坐标不相同”时,在各条曲线上,它们的值采用数组 ...
- 时隔两个月再写的Echarts（Enterprise Charts，商业级数据图表）一文
简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10 ...
随机推荐
- CorelDRAW快速去除图片背景颜色
当我们需要从网上借助一些素材图片在CorelDRAW中运用时,往往需要去掉图片的背景颜色.本文小编分享CDR中如何快速去除图片背景颜色的方法,通过此方法可以做简单的照片抠图.合成. 1. 打开Core ...
- 下载器Folx专业版有没有iTunes整合功能
对于使用Mac系统的用户来说,相信对iTunes都不陌生.Folx专业版提供的iTunes整合功能,能将下载的音频.电影等文件自动同步到iTunes. 该功能将会有助于用户的音频.视频整合,对于喜欢听 ...
- jQuery 第四章 实例方法 DOM操作之data方法
jquery 里面 的 data 方法比较重要, 所以成一个模块写: 首先, 得知道 data() 干嘛用的, 看淘宝上 有自定义的属性, 为data - 什么什么, 这是为了dom 跟数据有 ...
- win10安装jenkins忘记密码的解决方法
jenkins安装完了一直没用,突然想学习的时候,忘记了登陆密码. 一:修改配置文件 1. 打开jenkins的安装目录,选择users下面的admin目录下的config.xml文件 我的文件路 ...
- 2017年第八届蓝桥杯【C++省赛B组】B、C、D、H 题解
可能因为我使用暴力思维比较少,这场感觉难度不低. B. 等差素数列 #暴力 #枚举 题意 类似:\(7,37,67,97,127,157\) 这样完全由素数组成的等差数列,叫等差素数数列. 上边的数列 ...
- 创建topic
sh kafka-topics.sh --create --zookeeper localhost:2181 --replication-factor 1 --partitions 1 --topic ...
- 杂篇-之裸眼3D渲染相机及画面矫正
主题公园类,或大型广场led屏幕,直角幕,三维影片如何制作,和最终画面如何矫正还原. 前两天,一朋友做的项目,大概就是一个柱状的led屏幕,可能是立在广场街角等处,如果这样子,那个柱状体的有颜色的两面 ...
- 思维导图学《JVM 虚拟机规范》
目录 工具 虚拟机实现 class 文件结构 字节码指令 其他 虚拟机结构 公众号 coding 笔记.点滴记录,以后的文章也会同步到公众号(Coding Insight)中,希望大家关注_ 公众号 ...
- CentOS 7下使用systemctl为Nginx启用进程守护实现开机自启
1.cd到指定目录 cd /usr/lib/systemd/system 2.创建nginx.service vi nginx.service 3.输入以下内容,路径为nginx安装路径 [Unit] ...
- fist-第一天随笔
这个作业属于哪个课程 https://edu.cnblogs.com/campus/fzzcxy/2018SE1 这个作业要求在哪里 https://edu.cnblogs.com/campus/fz ...