一、饼状图
饼状图不需要配置坐标轴，而是把数据名称和值都写在系列中，并且value值不需要是百分比数据，echarts会根据所有数据的value,按比例分配他们在饼图中对应的弧度
饼图的半径：
饼图的半径可以通过 series.radius 设置，可以是诸如 '60%' 这样相对的百分比字符串，或是 200 这样的绝对像素数值。当它是百分比字符串时，它是相对于容器宽高中较小的一条边的。也就是说，如果宽度大于高度，则百分比是相对于高度的，反之则反；当它是数值型时，它表示绝对的像素大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/echarts.min.js"></script>
<!-- 汉化包 -->
<script src="js/langZH.js"></script>
</head>
<body>
<div id="main"></div>
<script>
//饼状图不需要配置坐标轴，而是把数据名称和值都写在系列中，并且value值
// 不需要是百分比数据，echarts会根据所有数据的value,按比例分配他们在饼图
// 中对应的弧度
var main = document.getElementById("main")
var myEcharts = echarts.init(main, null, {
width: 800,
height: 600
})
var option = {
series: [{
type: 'pie',
data: [{
value: 335,
name: '直接访问'
}, {
value: 234,
name: '联盟广告'
}, {
value: 1548,
name: '搜索引擎'
}],
// radius:如果值是百分比的话，它是以width和height中值较小的为参照物
radius: '50%'
//当radius的值是一个数组时，第一个元素表示的时内圆的半径，第二个元素指
// 的是外圆的半径
// radius: [50，100]
}]
}
myEcharts.setOption(option)
</script>
</body>
</html>
二、圆环图
在 ECharts 中，饼图的半径除了上一小节提到的，可以是一个数值或者字符串之外，还可以是一个包含两个元素的数组，每个元素可以为数值或字符串。当它是一个数组时，它的前一项表示内半径，后一项表示外半径，这样就形成了一个圆环图。
从这个角度上来说，可以认为饼图是一个内半径为 0 的圆环图，也就是说，饼图是圆环图的特例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/echarts.min.js"></script>
<!-- 汉化包 -->
<script src="js/langZH.js"></script>
</head>
<body>
<div id="main"></div>
<script>
var main = document.getElementById("main")
var myEcharts = echarts.init(main, null, {
width: 800,
height: 600
})
var option = {
title: {
text: '标题',
left: "center",
top: 'center'
},
series: [{
type: 'pie',
label: {
show: false
},
// 高亮时设置的样式
emphasis: {
label: {
show: true,
color: 'red'
},
labelLine: {}
},
data: [{
value: 335,
name: '直接访问'
}, {
value: 234,
name: '联盟广告'
}, {
value: 1548,
name: '搜索引擎'
}],
radius: ['40%', '80%']
}]
}
myEcharts.setOption(option)
</script>
</body>
</html>
三、南丁格尔图
南丁格尔图又称玫瑰图，通常用弧度相同但半径不同的扇形表示各个类目。
ECharts 可以通过将饼图的 series.roseType 值设为 'area' 实现南丁格尔图，其他配置项和饼图是相同的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/echarts.min.js"></script>
<!-- 汉化包 -->
<script src="js/langZH.js"></script>
</head>
<body>
<div id="main"></div>
<script>
var main = document.getElementById("main")
var myEcharts = echarts.init(main, null, {
width: 800,
height: 600
})
// 饼状图中不需要设置坐标轴
var option = {
series: [{
type: 'pie',
data: [{
value: 335,
name: '直接访问'
}, {
value: 310,
name: '邮件营销'
}, {
value: 234,
name: '联盟广告'
}, {
value: 135,
name: '视频广告'
}, {
value: 548,
name: '搜索引擎'
}],
roseType: 'area'
}]
}
myEcharts.setOption(option)
</script>
</body>
</html>
四、散点图
散点图，也是一种常见的图表类型。散点图由许多“点”组成，有时，这些点用来表示数据在坐标系中的位置（比如在笛卡尔坐标系下，表示数据在 x 轴和 y 轴上的坐标；在地图坐标系下，表示数据在地图上的某个位置等）；有时，这些点的大小、颜色等属性也可以映射到数据值，用以表现高维数据。
笛卡尔坐标系下的散点图
在上文的例子中，散点图的横坐标都是离散的类目轴，而纵坐标都是连续的数值轴。而对于散点图而言，另一种常见的场景是，两个坐标轴均为连续的数值轴，也就是笛卡尔坐标系。这时的系列形式略有不同，数据的横坐标和纵坐标一同写在 data 中，而非坐标轴中。
图形的形状
图形（symbol）指的是散点图中数据“点”的形状。有三类图形可选，一种是 ECharts 内置形状，第二种是图片，第三种是 SVG 的路径。
ECharts 内置形状包括：圆形、矩形、圆角矩形、三角形、菱形、大头针形、箭头形，分别对应'circle'、'rect'、'roundRect'、'triangle'、'diamond'、'pin'、'arrow'。使用内置形状时，只要将 symbol 属性指定为形状名称对应的字符串即可。
如果想要将图形指定为任意的图片，以 'image://' 开头，后面跟图片的绝对或相对地址。形如：'image://http://example.com/xxx.png' 或 'image://./xxx.png'。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/echarts.min.js"></script>
<!-- 汉化包 -->
<script src="js/langZH.js"></script>
</head>
<body>
<div id="main"></div>
<script>
var main = document.getElementById("main")
var myEcharts = echarts.init(main, null, {
width: 800,
height: 600
})
// 饼状图中不需要设置坐标轴
var option = {
type: 'category',
xAxis: {
data: ['周日', '周二', '周三', '周四', '周五', '周六', '周一']
},
yAxis: {
type: 'value'
},
//
series: [{
// scatter:用来设置散点图
// 第一种：使用内置
// 第二种：使用图片，格式：'image//url'
// 第三种：使用svg绘制：格式
type: 'scatter',
data: [220, 182, 191, 234, 290, 330, 310]
}]
}
myEcharts.setOption(option)
</script>
</body>
</html>
五、数据转换、
使用 transform 进行数据转换
Apache EChartsTM 5 开始支持了“数据转换”（ data transform ）功能。在 echarts 中，“数据转换” 这个词指的是，给定一个已有的“数据集”（dataset）和一个“转换方法”（transform），echarts 能生成一个新的“数据集”，然后可以使用这个新的“数据集”绘制图表。这些工作都可以声明式地完成。
抽象地来说，数据转换是这样一种公式：outData = f(inputData)。f 是转换方法，例如：filter、sort、regression、boxplot、cluster、aggregate(todo) 等等。有了数据转换能力后，我们就至少可以做到这些事情：
- 把数据分成多份用不同的饼图展现。
- 进行一些数据统计运算，并展示结果。
- 用某些数据可视化算法处理数据，并展示结果。
- 数据排序。
- 去除或直选择数据项。
- ...
数据转换基础使用
在 echarts 中，数据转换是依托于数据集（dataset）来实现的. 我们可以设置 dataset.transform 来表示，此 dataset 的数据，来自于此 transform 的结果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/echarts.min.js"></script>
<!-- 汉化包 -->
<script src="js/langZH.js"></script>
</head>
<body>
<div id="main"></div>
<script>
var main = document.getElementById("main")
var myEcharts = echarts.init(main, null, {
width: 800,
height: 600
})
// 饼状图中不需要设置坐标轴
var option = {
dataset: [{
// 这个 dataset 的 index 是 `0`。
source: [
['产品', '销量', '价格', '年份'],
['蛋糕', 123, 32, 2011],
['麦片', 231, 14, 2011],
['豆腐', 235, 5, 2011],
['饺子', 341, 25, 2011],
['饼干', 122, 29, 2011],
['蛋糕', 143, 30, 2012],
['麦片', 201, 19, 2012],
['豆腐', 255, 7, 2012],
['饺子', 241, 27, 2012],
['饼干', 102, 34, 2012],
['蛋糕', 153, 28, 2013],
['麦片', 181, 21, 2013],
['豆腐', 395, 4, 2013],
['饺子', 281, 31, 2013],
['饼干', 92, 39, 2013],
['蛋糕', 223, 29, 2014],
['麦片', 211, 17, 2014],
['豆腐', 345, 3, 2014],
['饺子', 211, 35, 2014],
['饼干', 72, 24, 2014]
]
//c id: 'a'
}, {
transform: {
type: 'filter',
config: {
dimension: '年份',
'=': '2011'
}
}
}, {
transform: {
type: 'filter',
config: {
dimension: '年份',
'=': '2012'
}
}
}, {
transform: {
type: 'filter',
config: {
dimension: '年份',
'=': '2013'
}
}
}],
series: [{
type: 'pie',
radius: 50,
center: ['25%', '50%'],
datasetIndex: 1
}, {
type: 'pie',
radius: 50,
center: ['50%', '50%'],
datasetIndex: 2
}, {
type: 'pie',
radius: 50,
center: ['75%', '50%'],
datasetIndex: 3
}]
};
myEcharts.setOption(option)
</script>
</body>
</html>
关于关系比较操作符：
关系操作符，可以设定这些： >（gt）、>=（gte）、<（lt）、<=（lte）、=（eq）、!=（ne、<>）、reg。（小括号中的符号或名字，是别名，设置起来作用相同）。他们首先基本地能基于数值大小进行比较，然后也有些额外的功能特性：
- 多个关系操作符能声明在一个 {} 中，例如
{ dimension: 'Price', '>=': 20, '<': 30 }。这表示“与”的关系，即，筛选出价格大于等于 20 小于 30 的数据项。 - data 里的值，不仅可以是数值（ number ），也可以是“类数值的字符串”（“ numeric string ”）。“类数值的字符串”本身是一个字符串，但是可以被转换为字面所描述的数值，例如
' 123 '。转换过程中，空格（全角半角空格）和换行符都能被消除（ trim ）。 - 如果我们需要对日期对象（JS
Date）或者日期字符串（如 '2012-05-12'）进行比较，我们需要手动指定parser: 'time'，例如config: { dimension: 3, lt: '2012-05-12', parser: 'time' }。 - 纯字符串比较也被支持，但是只能用在
=或!=上。而>,>=,<,<=并不支持纯字符串比较，也就是说，这四个操作符的右值，不能是字符串。 reg操作符能提供正则表达式比较。例如，{ dimension: 'Name', reg: /\s+Müller\s*$/ }能在'Name'维度上选出姓'Müller'的数据项。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/echarts.min.js"></script>
<!-- 汉化包 -->
<script src="js/langZH.js"></script>
</head>
<body>
<div id="main"></div>
<script>
var main = document.getElementById("main")
var myEcharts = echarts.init(main, null, {
width: 800,
height: 600
})
// 饼状图中不需要设置坐标轴
var option = {
dataset: [{
// 这个 dataset 的 index 是 `0`。
source: [
['产品', '销量', '价格', '年份'],
['蛋糕', 123, 32, 2011],
['麦片', 231, 14, 2011],
['豆腐', 235, 5, 2011],
['饺子', 341, 25, 2011],
['饼干', 122, 29, 2011],
['蛋糕', 143, 30, 2012],
['麦片', 201, 19, 2012],
['豆腐', 255, 7, 2012],
['饺子', 241, 27, 2012],
['饼干', 102, 34, 2012],
['蛋糕', 153, 28, 2013],
['麦片', 181, 21, 2013],
['豆腐', 395, 4, 2013],
['饺子', 281, 31, 2013],
['饼干', 92, 39, 2013],
['蛋糕', 223, 29, 2014],
['麦片', 211, 17, 2014],
['豆腐', 345, 3, 2014],
['饺子', 211, 35, 2014],
['饼干', 72, 24, 2014]
]
//c id: 'a'
}, {
transform: [{
type: 'filter',
config: {
dimension: '年份',
'=': '2011'
}
}, {
type: 'filter',
config: {
dimension: '销量',
'<': 200
}
}]
}],
series: [{
type: 'pie',
radius: 50,
center: ['25%', '50%'],
datasetIndex: 1
}]
};
myEcharts.setOption(option)
</script>
</body>
</html>
关于逻辑比较：
我们也支持了逻辑比较操作符 与或非（ and | or | not ）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/echarts.min.js"></script>
<!-- 汉化包 -->
<script src="js/langZH.js"></script>
</head>
<body>
<div id="main"></div>
<script>
var main = document.getElementById("main")
var myEcharts = echarts.init(main, null, {
width: 800,
height: 600
})
// 饼状图中不需要设置坐标轴
var option = {
dataset: [{
// 这个 dataset 的 index 是 `0`。
source: [
['产品', '销量', '价格', '年份'],
['蛋糕', 123, 32, 2011],
['麦片', 231, 14, 2011],
['豆腐', 235, 5, 2011],
['饺子', 341, 25, 2011],
['饼干', 122, 29, 2011],
['蛋糕', 143, 30, 2012],
['麦片', 201, 19, 2012],
['豆腐', 255, 7, 2012],
['饺子', 241, 27, 2012],
['饼干', 102, 34, 2012],
['蛋糕', 153, 28, 2013],
['麦片', 181, 21, 2013],
['豆腐', 395, 4, 2013],
['饺子', 281, 31, 2013],
['饼干', 92, 39, 2013],
['蛋糕', 223, 29, 2014],
['麦片', 211, 17, 2014],
['豆腐', 345, 3, 2014],
['饺子', 211, 35, 2014],
['饼干', 72, 24, 2014]
]
//c id: 'a'
}, {
transform: [{
type: 'filter',
config: {
// 逻辑比较操作符 与或非（ and | or | not ）
and: [{
dimension: '年份',
'=': 2011
}, {
dimension: '销量',
'>=': 200,
'<=': 300
}]
}
}]
}],
series: [{
type: 'pie',
radius: 50,
center: ['25%', '50%'],
datasetIndex: 1
}]
};
myEcharts.setOption(option)
</script>
</body>
</html>