第1页 / 共19页
第2页 / 共19页
第3页 / 共19页
第4页 / 共19页
第5页 / 共19页
第6页 / 共19页
第7页 / 共19页
第8页 / 共19页
Echarts最全教程文档和源码.docx
Echarts学习图解
1、学习工具
2、基本认识
3、常用的Echarts图表（Bar、Pie、Line、Map）
Bar:柱状图
1.简单的柱状图
2.带有刻度的柱状图
3.双柱数据柱状图
3.带有折线的柱状图
4.折线多轴的柱状图
Pie:圆饼图
1.圆环统计图
2.圆饼统计图
3.带有背景的圆饼统计图
4.不规则圆饼图
Line:折线图
1.简单的折线图
1.平滑折线图
3.堆叠折线走势图
4.多线折线图
Map:地图
1.引入地区js方式绘制地图
2.引入地区json方式绘制地图
4、ecahrts补充知识
Echarts 学习图解
整理人:MrChen
1、学习工具
在学习 ecahrts 之前，你必须在你的项目中导入一些必要的 js 插件（附 API 文档）：
Echarts汇总.rar
2、基本认识
①什么是 Echarts？
echarts 就是一个数据可视化的库，通俗说就是把数据用各种各样图标进行展示，echarts
不仅提供常见的如折线图，柱状图，散点图，饼图，K 线图等图表类型，而且 ECharts 提
供了用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，
多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混
搭。另外 echarts 3 开始独立出了“坐标系”的概念，支持了直角坐标系（catesian，
同 grid）、极坐标系（polar）、地理坐标系（geo）。图表可以跨坐标系存在，例如折、
柱、散点等图可以放在直角坐标系上，也可以放在极坐标系上，甚至可以放在地理坐标系
中。人们常将 highcharts 与 echarts 进行比较，highcharts 是基于 SVG 的，SVG 的节点
可以向 dom 节点一样控制，所以在自主创作图形方面非常方便，但是 SVG 是 2D 矢量图，
不能画 3D 图形，而且 SVG 的节点都是对象，会非常占用内存。同样虽然 canvas 也只支持
2D 绘图，不支持 3D 绘图。但是 canvas 绘图不会给每个点生成对象，因此绘制图形可以
非常快，占用内存特别少，兼容性也比较好，除了 IE6，其他浏览器都可以支持。
②Echarts 官网在哪？
http://echarts.baidu.com/
③echarts 难吗?
由于工作必要,必须硬着头皮去琢磨 echarts,发现其实并不难,真正难的地方可能是你对
echarts 功能了解多少,echarts 的配置项了解多少,它哪些能做哪些不能直接做,这都是
我们需要慢慢深入了解的,本文档结合代码分析并附上源码,仅供入门甚至满足工作基本
需求而编写!
④参考好的博文
https://www.cnblogs.com/1996zy/p/8963385.html
3、常用的 Echarts 图表（Bar、Pie、Line、Map）
Bar:柱状图
1.简单的柱状图
①常规引入 js（后面代码分析中将不再重复介绍）
②代码
//按照配置项生成echarts图表
2.带有刻度的柱状图
option = {
color: ['#3398DB'], //数据柱颜色
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: { //柱状图整体布局
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true //防止标签溢出,一般情况可由可无
},
xAxis : [
{
type : 'category',
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: false //数据柱底部刻线
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接访问', //提示信息显示的固定内容
type:'bar',
barWidth: '60%', //数据柱宽度
3.双柱数据柱状图
option = {
title : {
text: '某地区蒸发量和降水量',
subtext: '数据统计'
},
tooltip : {
trigger: 'axis'
},
legend: { //需要和series中name对应,是图表上方的两个矩形标志
data:['蒸发量','降水量']
},
toolbox: { //工具栏,如果不需要可以去掉
show : true,
feature : {
dataView : {show: true, readOnly: false}, //数据视图
magicType : {show: true, type: ['line', 'bar']}, //转换为折线图、柱状图
restore : {show: true}, //还原
saveAsImage : {show: true} //保存为图片
}
},
calculable : true,
xAxis : [
{
type : 'category', //横坐标类型
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11
月','12月']
}
],
yAxis : [
{
type : 'value'
}
],
3.带有折线的柱状图
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross', //可选cursor
crossStyle: {
color: '#999'
}
}
},
toolbox: { //工具栏,如果不需要可以删除
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: { //图标上方的小矩形,需要与series中数据name对应上
data:['蒸发量','降水量','平均温度']
},
xAxis: [
{
type: 'category', //横坐标类别
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11
月','12月'],
axisPointer: {
type: 'shadow' //鼠标悬浮时候数据柱有阴影包裹
}
}
],
yAxis: [
{
4.折线多轴的柱状图
var colors = ['red', 'yellow', 'blue'];
option = {
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
right: '20%'
},
toolbox: { //工具栏
feature: {
dataView: {show: true, readOnly: false},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data:['蒸发量','降水量','平均温度']
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true //数据柱底部刻线
},
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11
月','12月']
}
],
yAxis: [
{
type: 'value',
name: '蒸发量',
min: 0,
max: 250, //决定了y轴的起始点和结束点
position: 'right', //坐标轴位置
Pie:圆饼图
1.圆环统计图
legend: { //圆饼图旁边的小矩形,单击变灰则不参入统计
orient: 'vertical', //水平是horizontal
x: 'left',
data:['苹果','华为','三星','小米']
},
series: [
{
name:'市场销售额和占有率',
type:'pie',
radius: ['40%', '70%'], //控制圆饼图大小,前参控制镂空大小,后参控制圆饼大
小
center:['50%','50%'], //可选属性,控制圆环位置['左右百分比','上下百分
比']
avoidLabelOverlap: false,//防止标签重叠策略，默认默认开启
label: {
normal: {
show: true, //是否显示各个数据环的名称
position: 'left' //数据环名称显示位置
},
emphasis: {
show: true, //悬浮某数据环时中心处再次显示数据环名称
textStyle: { //中间显示数据环名称的字体样式控制
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: true //引导线,当label的position值为center则看不到此效果
}
},
data:[ //数据不要为百分比形式,因为圆环会
{value:400, name:'苹果'},
{value:300, name:'华为'},
{value:250, name:'三星'},
{value:200, name:'小米'}
]
}
]
2.圆饼统计图
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
data:['苹果','华为','三星','小米'],
selected: { //false则为默认不加入统计
'苹果':true,'华为':true,'三星':true,'小米':false
}
},
series : [
{
name: '销售占比',
type: 'pie',
radius : '55%', //圆饼图整体大小
center: ['40%', '50%'], //上下、左右间距
data:[ //数据不要为百分比形式,因为圆环会
{value:400, name:'苹果'},
{value:300, name:'华为'},
{value:250, name:'三星'},
{value:200, name:'小米'}
],
itemStyle: {
emphasis: {
shadowBlur: 10, //悬浮上后shadow阴影
shadowOffsetX: 0, //阴影的偏离位置,echarts中一般不带单位px
shadowColor: 'rgba(0, 0, 0, 0.5)' //阴影的颜色
}
}
}
]
};
相关推荐
2023年江西萍乡中考道德与法治真题及答案.doc
2012年重庆南川中考生物真题及答案.doc
2013年江西师范大学地理学综合及文艺理论基础考研真题.doc
2020年四川甘孜小升初语文真题及答案I卷.doc
2020年注册岩土工程师专业基础考试真题及答案.doc
2023-2024学年福建省厦门市九年级上学期数学月考试题及答案.doc
2021-2022学年辽宁省沈阳市大东区九年级上学期语文期末试题及答案.doc
2022-2023学年北京东城区初三第一学期物理期末试卷及答案.doc
2018上半年江西教师资格初中地理学科知识与教学能力真题及答案.doc
2012年河北国家公务员申论考试真题及答案-省级.doc
2020-2021学年江苏省扬州市江都区邵樊片九年级上学期数学第一次质量检测试题及答案.doc
2022下半年黑龙江教师资格证中学综合素质真题及答案.doc
