ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
使用ECharts的五个步骤
步骤1：引入echarts.js文件
步骤2：准备一个呈现图表的盒子
步骤3：初始化echarts实例对象
步骤4：准备配置项
步骤5：将配置项设置给echarts实例对象
<!-- 步骤1：引入echarts.js文件 -->
<script src="lib/echarts.min.js"></script> <!-- 步骤2：准备一个呈现图表的盒子 -->
<div style="width: 600px;height: 400px"></div>
<script>
// 步骤3：初始化echarts实例对象
// 参数, dom,决定图表最终呈现的位置
var mCharts = echarts.init(document.querySelector('div'))
// 步骤4：准备配置项
var option = {
xAxis: {
type: 'category',//类目轴
data: ['小明', '小红', '小王']
},
yAxis: {
type: 'value'// 数值轴
},
series: [
{
name: '语文',
type: 'bar',
data: [70, 92, 87]
}
]
}
// 步骤5：将配置项设置给echarts实例对象
mCharts.setOption(option)
</script>通用配置
标题：title
- 文字样式：
textstyle
- 标题边框
borderWidth borderColor borderRadius
扫描二维码关注公众号，回复：
14485183 查看本文章
- 标题位置
left right bottom top
提示：tooltip
提示框组件，用于配置鼠标滑过或点击图表时的显示框
- 触发类型：trigger
item axis
- 触发时机：triggerOn
click mouseover
- 格式化： formatter
字符串模板 回调函数
工具按钮 toolbox
ECharts提供的工具栏
内置有导出图片 数据视图 动态类型切换 数据区域缩放 重置五个工具
显示工具栏按钮 feature
toolbox: {
feature: {
saveAsImage: {}, // 导出图片
dataView: {}, // 数据视图
restore: {}, // 重置
dataZoom: {}, // 区域缩放
magicType: {
type: ['bar', 'line']
} // 动态图表类型的切换
}
}图例 legend
用于筛选系列需要和series配合使用
- legend中的data是一个数组
- legend中data的值需要和series数组中某组数据的name值相同
示例
<script>
var mCharts = echarts.init(document.querySelector("div"))
var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
var yDataArr1 = [88, 92, 63, 77, 94, 80, 72, 86]
var yDataArr2 = [93, 60, 61, 62, 85, 79, 92, 30]
var option = {
title: { // 标题设置
text: '成绩展示', // 标题文字
textStyle: { // 标题文字样式设置
color: 'red'
},
borderWidth: 5, // 标题边框宽度
borderColor: 'blue', // 标题边框颜色
borderRadius: 5, // 标题边框圆角
left: 50, // 标题距离左边的距离
top: 10 // 标题距离顶部的距离
},
tooltip: { // 工具提示
// trigger: 'item' 工具提示的类型 item代表的是每个柱本身, axis代表的是坐标轴
trigger: 'axis',
triggerOn: 'click', // 触发时机, click代表点击, mouseOver代表鼠标移过
// formatter: '{b} 的成绩是 {c}'
formatter: function(arg){ // 文字格式化
return arg[0].name + '的分数是:' + arg[0].data
}
},
toolbox: {
feature: {
saveAsImage: {}, // 导出图片
dataView: {}, // 数据视图
restore: {}, // 重置
dataZoom: {}, // 区域缩放
magicType: {
type: ['bar', 'line']
} // 动态图表类型的切换
}
},
legend: { // 图例, 图例中的data数据来源于series中每个对象的name, 图例可以帮助我们对图表进行筛选
data: ['语文', '数学']
},
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
name: '语文',
type: 'bar',
data: yDataArr1
},
{
name: '数学',
type: 'bar',
data: yDataArr2
}
]
}
mCharts.setOption(option)
</script>柱状图
series中type值为bar
常见效果
标记 最大值 最小值 平均值
markPoint
markLine
显示：数值显示 柱宽带 横向柱状图
label
barWidth
更改x轴和y轴的角色
示例
<script>
var mCharts = echarts.init(document.querySelector("div")) // 初始化echarts实例对象
var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强'] // 准备x轴数据
var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86] // 为x轴每一个元素指明数据
var option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: xDataArr
},
series: [
{
name: '语文',
type: 'bar',
markPoint: { // 标记点
data: [
{
type: 'max', name: '最大值'
},{
type: 'min', name: '最小值'
}
]
},
markLine: { // 标记线
data: [
{
type: 'average', name: '平均值'
}
]
},
label: { // 柱状图上的文字设置
show: true, // 是否显示
rotate: 60, // 旋转角度
position: 'top' // 显示位置
},
barWidth: '30%', // 柱的宽度
data: yDataArr
}
]
}
mCharts.setOption(option)
</script>折线图
将type的值设置为line
常见效果
标记 最大值 最小值 平均值 标注区间
- markPoint
- markLine
- markArea
线条控制
- smooth
- lineStyle
填充风格
areaStyle
紧挨边缘
boundaryGap
缩放 脱离0值比例 数据相差不大时使用
scale：true
堆叠图
stack
示例
<script>
var mCharts = echarts.init(document.querySelector("div"))
var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
var yDataArr2 = [2000, 3800, 1900, 500, 900, 1700, 2400, 300, 1900, 1500, 1800, 200]
var option = {
xAxis: {
type: 'category',
data: xDataArr,
boundaryGap: false // x轴的第1个元素是否与y轴有距离
},
yAxis: {
type: 'value',
scale:true//缩放 脱离0值比例 数据相差不大时使用
},
series: [
{
type: 'line',
data: yDataArr,
smooth: true, // 是否为平滑线
lineStyle: { // 线的样式设置
color: 'green',
type: 'solid' // dashed dotted solid
},
areaStyle: { // 线和x轴形成的区域设置
color: 'pink'
},
stack: 'all', // 堆叠图的设置
markPoint: { // 标记点
data: [
{
type: 'max'
},
{
type: 'min'
}
]
},
markLine: { // 标记线
data: [
{
type: 'average'
}
]
},
markArea: { // 标记区域
data: [
[
{
xAxis: '1月'
},
{
xAxis: '2月'
}
],
[
{
xAxis: '7月'
},
{
xAxis: '8月'
}
]
]
},
},
//第二段数据
{
type: 'line',
data: yDataArr2,
stack: 'all', // 堆叠图的设置
areaStyle: {}
}
]
}
mCharts.setOption(option)
</script>散点图
- x轴和y轴的数据：二维数组
数组1：[[身高1，体重1],[身高2，体重2],[身高3，体重3]......]
- 在series下设置type：scatter
- xAxis和yAxis的type都要设置为value
- 将坐标轴都设置为脱离0值比例 scale
常见效果
气泡图效果
- 散点的大小不同 sybolSize
- 散点的颜色不同 itemStyle.color
涟漪动画效果
type: 'effectScatter', // 指明图表为带涟漪动画的散点图
showEffectOn: 'emphasis', // 出现涟漪动画的时机 render emphasis
rippleEffect: {
scale: 10 // 涟漪动画时, 散点的缩放比例
}示例
var axisData = [[身高1，体重1],[身高2，体重2],[身高3，体重3]......]
console.log(axisData)
var mCharts = echarts.init(document.querySelector("div"))
var option = {
xAxis: {
type: 'value',
scale: true
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
// type: 'scatter',
type: 'effectScatter', // 指明图表为带涟漪动画的散点图
showEffectOn: 'emphasis', // 出现涟漪动画的时机 render自动拥有 emphasis 鼠标移动产生效果
rippleEffect: {
scale: 10 // 涟漪动画时, 散点的缩放比例
},
data: axisData,
// symbolSize: 30
symbolSize: function (arg) { // 控制散点的大小
// console.log(arg)
var height = arg[0] / 100
var weight = arg[1]
// bmi = 体重kg / (身高m*身高m) 大于28,就代表肥胖
var bmi = weight / (height * height)
if (bmi > 28) {
return 20
}
return 5
},
itemStyle: { // 控制散点的样式
color: function (arg) {
// console.log(arg)
var height = arg.data[0] / 100
var weight = arg.data[1]
// bmi = 体重kg / (身高m*身高m) 大于28,就代表肥胖
var bmi = weight / (height * height)
if (bmi > 28) {
return 'red'
}
return 'green'
}
}
}
]
}
mCharts.setOption(option)直角坐标系常用配置
配置1网格 grid
grid 控制直角坐标系的布局和大小
- 显示grid
- show
grid边框
- borderWidth borderColor
grid位置和大小
- left right bottom top
- width height
配置2 坐标轴
- value 数值轴自动从目标数据中 读取数据
- category 类目轴 需要通过data设置类目数据显示位置
position
- xAxis 可取值为top 和 buttom
- yAxis 可取值为 left 和 right
配置3 区域缩放筛选 dataZoom
dataZoom是一个数组意味着可以配置多个区域缩放
注意点和toolbox中的dataZoom不同
类型 type
- slider 滑块
- inside 内置，依靠鼠标滚轮或双指缩放
指明产生作用的轴
- xAxisindex 设置缩放组件控制的是哪个x轴 一般写0即可
- yAxisindex 设置缩放组件控制的是哪个y轴 一般写0即可
指明初始状态的缩放情况
- start end
示例
<script>
var mCharts = echarts.init(document.querySelector("div"))
var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
var option = {
grid: { // 坐标轴容器
show: true, // 是否可见
borderWidth: 10, // 边框的宽度
borderColor: 'red', // 边框的颜色
left: 120, // 边框的位置
top: 120,
width: 500, // 边框的大小
height: 350
},
dataZoom: [ // 控制区域缩放效果的实现
{
type: 'slider', // 缩放的类型 slide代表滑块 inside代表依靠鼠标滚轮
// type: 'inside'
xAxisIndex: 0,
position: 'top' // 控制坐标轴的位置
},
{
type: 'slider',
yAxisIndex: 0,
start: 0, // 渲染完成后, 数据筛选的初始值, 百分比
end: 80 ,// 渲染完成后, 数据筛选的结束值, 百分比
position: 'right' // 控制坐标轴的位置
}
],
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
name: '语文',
type: 'bar',
label: {
show: true,
position: 'top'
},
barWidth: '30%',
data: yDataArr
}
]
}
mCharts.setOption(option)
</script>小结
直角坐标系的图表
- 柱状图
- 折线图
- 散点图
网格grid
- x和y轴的依附
- 大小
- 边框
区域缩放 dataZoom
- x和y轴都可以设置
- 类型 inside slider