Echarts基本用法以及参数详情
echarts目录
1.什么是Echarts？
- 是一个js插件库
- 性能好可流畅运行PC与移动设备
- 兼容主流浏览器
- 提供很多常用图标，且可定制
- Echarts的特征
- 官网地址(最新版本)
- 官方网站(老版本)
2.常见的数据可视化库：
- D3.js 目前web端最高javascript可视化工具库（入手难）
- ECharts 百度出品的一个开源javasc数据可视化库
- Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
- AntV 蚂蚁金服全新一代数据可视化解决方案 等等
- Highcharts 和 Echarts 就像是 Office 和 WPS 的关系
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
3.Echarts-体验
使用步骤
- 引入echarts 插件文件到html页面中
- 准备一个具备大小的DOM容器
<div id="main" style="width: 600px;height:400px;"></div>
- 初始化echarts实例对象
var myChart = echarts.init(document.getElementById('main'));
- 指定配置项和数据(option)
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
- 将配置项设置给echarts实例对象
myChart.setOption(option);
6.让图表跟随屏幕自动的去适应
window.addEventListener('resize', function () {
myChart.resize()
})
4.Echarts基本配置
这是要求同学们知道以下配置每个模块的主要作用干什么的就可以了
需要了解的主要配置：series xAxis yAxis grid tooltip title legend color
- series
- 系列列表。每个系列通过 type 决定自己的图表类型
- 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
- xAxis：直角坐标系 grid 中的 x 轴
- boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
- yAxis：直角坐标系 grid 中的 y 轴
- grid：直角坐标系内绘图网格。
- title：标题组件
- tooltip：提示框组件
- legend：图例组件
- color：调色盘颜色列表
数据堆叠，同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。
5.Echarts配置详细参数
title：标题
title: {
text: 'test',
x: 'center',
backgroundColor: 'rgb(8, 10, 90,.4)',//标题背景颜色，默认'rgba(0,0,0,0)'透明
textStyle: { // 标题样式
color: '#fff', //字体颜色
fontSize: 15, //字体大小
fontWeight: 700, //字体粗细
},
},
xAxis：x轴
xAxis: {
show: true, // 是否显示x轴
position: 'top', // x轴的位置 top、bottom
type: 'category', // 坐标轴类型 value、category、time、log
name: '姓名', // 坐标轴名称
nameRotate: 10, // 坐标轴名字旋转，角度值
inverse: false, // 是否是反向坐标轴
boundaryGap: ['20%', '20%'], // 坐标轴两边留白策略
splitNumber: 5, // 坐标轴的分割段数（预估值）
zlevel: 100, //x轴层级（相当于定位中z-index）
axisLine: {
show: true, // 是否显示坐标轴轴线
symbol: ['none', 'arrow'], // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
symbolSize: [10, 15], // 轴线两端箭头大小，数值一表示宽度，数值二表示高度
lineStyle: {
color: '#333', // 坐标轴线线的颜色
width: '5', // 坐标轴线线宽
type: 'solid', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
},
},
axisTick: {
show: true, // 是否显示坐标轴刻度
inside: true, // 坐标轴刻度是否朝内，默认朝外
length: 5, // 坐标轴刻度的长度
lineStyle: {
color: '#FFF', // 刻度线的颜色
width: 10, // 坐标轴刻度线宽
type: 'solid', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
},
},
axisLabel: {
show: true, // 是否显示刻度标签
interval: '0', // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
inside: true, // 刻度标签是否朝内，默认朝外
rotate: 90, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从 -90 度到 90 度
margin: 10, // 刻度标签与轴线之间的距离
// formatter 刻度标签的内容格式器，支持字符串模板和回调函数两种形式
color: '#FFF', // 刻度标签文字的颜色
fontStyle: 'normal', // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
fontWeight: 'normal', // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
fontSize: '20', // 文字字体大小
align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
verticalAlign: 'left', // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'
lineHeight: '50', // 行高
backgroundColor: 'red', // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'
},
splitLine: {
show: true, // 是否显示分隔线。默认数值轴显示，类目轴不显示
interval: '0', // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
color: ['#ccc'], // 分隔线颜色，可以设置成单个颜色，也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色
width: 3, // 分隔线线宽
type: 'solid', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
},
splitArea: {
show: true, // 是否显示分隔区域
interval: '0', // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
areaStyle: {
color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
},
},
//当name值字数过多的时候，截取，只显示固定的几个字
formatter: function (val: string) {
let valList = '';
let n = 4;
for (var i = 0, l = val.length; i < l / n; i++) {
let a = val.slice((n * i), n * (i + 1));
valList = valList + a + '\n';
}
if (val.length > 4) {
return val.substring(0, 4) + "...";
// return valList
} else {
return val;
}
},
data: {
textStyle: {
color: '#FFF', // 文字的颜色
fontStyle: 'normal', // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
fontWeight: 'normal', // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
fontSize: '20', // 文字字体大小
align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
verticalAlign: 'left', // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'
lineHeight: '50', // 行高
backgroundColor: 'red',// 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'
},
},
},
yAxis ：y轴
yAxis: {
show: true, // 是否显示 y 轴
position: 'top', // y 轴的位置（'top'，'bottom'）
type: 'category', // 坐标轴类型
nameLocation: 'end', // 坐标轴名称显示位置
nameGap: 15, // 坐标轴名称与轴线之间的距离
nameRotate: 10, // 坐标轴名字旋转，角度值
inverse: false, // 是否是反向坐标轴
nameTextStyle: {
color: '#333', // 坐标轴名称的颜色
fontStyle: 'normal', // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
fontWeight: 'normal', // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
fontSize: '20', // 文字字体大小
align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
verticalAlign: 'left', // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'
lineHeight: '50', // 行高
backgroundColor: 'red', // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'
},
axisLine: {
show: true, // 是否显示坐标轴轴线
symbol: ['none', 'arrow'], // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
symbolSize: [10, 15], // 轴线两端箭头大小，数值一表示宽度，数值二表示高度
lineStyle: {
color: '#333', // 坐标轴线线的颜色
width: '5', // 坐标轴线线宽
type: 'solid', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
},
},
axisTick: {
show: true, // 是否显示坐标轴刻度
inside: true, // 坐标轴刻度是否朝内，默认朝外
length: 5, // 坐标轴刻度的长度
lineStyle: {
color: '#FFF', // 刻度线的颜色
width: 10, // 坐标轴刻度线宽
type: 'solid', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
},
},
axisLabel: {
show: true, // 是否显示刻度标签
interval: '0', // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
inside: true, // 刻度标签是否朝内，默认朝外
rotate: 90, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从 -90 度到 90 度
margin: 10, // 刻度标签与轴线之间的距离
// formatter 刻度标签的内容格式器，支持字符串模板和回调函数两种形式
color: '#FFF', // 刻度标签文字的颜色
fontStyle: 'normal', // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
fontWeight: 'normal', // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
fontSize: '20', // 文字字体大小
align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
verticalAlign: 'left', // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'
lineHeight: '50', // 行高
backgroundColor: 'red', // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'
},
splitLine: {
show: true, // 是否显示分隔线。默认数值轴显示，类目轴不显示
interval: '0', // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
color: ['#ccc'], // 分隔线颜色，可以设置成单个颜色，也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色
width: 3, // 分隔线线宽
type: 'solid', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
},
splitArea: {
show: true, // 是否显示分隔区域
interval: '0', // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
areaStyle: {
color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
},
},
data: {
textStyle: {
color: '#FFF', // 文字的颜色
fontStyle: 'normal', // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
fontWeight: 'normal', // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
fontSize: '20', // 文字字体大小
align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
verticalAlign: 'left', // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'
lineHeight: '50', // 行高 ）
backgroundColor: 'red', // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'
},
},
}
grid配置项：图标离容器的距离
show:是否显示直角坐标系网格-----------值:true?false
left:图表离容器左侧的距离-----------------值:number?百分比
top:图表离容器顶部的距离-----------------值:number?百分比
right:图表离容器右侧的距离---------------值:number?百分比
bottom:图表离容器底部的距离------------值:number?百分比
backgroundColor:网格背景色-------------值:rgba或#000000
borderColor:网格的边框颜色--------------值:rgba或#000000
borderWidth:网格的边框线宽-------------值:number
legend：图表旁边的文字
legend: {
icon: 'Rect',
orient: 'horizontal',
itemWidth: 20,
itemHeight: 2,
textStyle: {
fontSize: 12, //字体大小
color: fontColor, //字体颜色
},
right: '50%', //距离右侧
},
series
inside(自适应，柱状内部中央),top（柱状外的正上方）,bottom(柱状外的正下方)，left(柱状外的左边)，right(柱状外的右边)
坐标[x,y](以柱状的顶部为原点)
insideTop(柱状内部靠顶部)，insideBottom(柱状内部靠下方)，insideRight(柱状内部靠右边)，insideLeft(柱状内部靠左边)
series: [{
type: 'pie',
radius: ['10%', '40%'],
center: ['40%', '50%'],
// 数字在柱状图中显示的位置
label: {
show: true,
// position: 'top',
position: [2, -13],
color: '#ffb000',
},
//这个是饼状图或者环状图 指出的线
labelLine: {
normal: {
show: isshowline,
length: 10,
length2: 55,
lineStyle: {
color: "#fff"
},
}
},
data: chartData,
}]
6.柱状图基本参数
bar: {
barMinHeight: 0, // 最小高度改为0
// barWidth: null, // 默认自适应
barGap: '30%', // 柱间距离，默认为柱形宽度的30%，可设固定值
barCategoryGap : '20%', // 类目间柱形距离，默认为类目间距的20%，可设固定值
itemStyle: {
normal: {
// color: '各异',
barBorderColor: '#fff', // 柱条边线
barBorderRadius: 0, // 柱条边线圆角，单位px，默认为0
barBorderWidth: 1, // 柱条边线线宽，单位px，默认为1
label: {
show: false
// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
}
},
emphasis: {
// color: '各异',
barBorderColor: 'rgba(0,0,0,0)', // 柱条边线
barBorderRadius: 0, // 柱条边线圆角，单位px，默认为0
barBorderWidth: 1, // 柱条边线线宽，单位px，默认为1
label: {
show: false
// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
}
}
}
},
7.折线图基本参数
line: {
itemStyle: {
normal: {
// color: 各异,
label: {
show: false
// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
lineStyle: {
width: 2,
type: 'solid',
shadowColor : 'rgba(0,0,0,0)', //默认透明
shadowBlur: 5,
shadowOffsetX: 3,
shadowOffsetY: 3
}
},
emphasis: {
// color: 各异,
label: {
show: false
// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
}
}
},
//smooth : false,
//symbol: null, // 拐点图形类型
symbolSize: 2, // 拐点图形大小
//symbolRotate : null, // 拐点图形旋转控制
showAllSymbol: false // 标志图形默认只有主轴显示（随主轴标签间隔隐藏策略）
},
扫一扫
8007
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
