echarts 各个参数
初始化图表
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 可以在这里定义窗口大小
var myChart = echarts.init(document.getElementById('main'), null, {
width: 600,
height: 400
});
// 在div中定义大小
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option)
// 自适应窗口大小
// 方法一
window.onresize = function () {
myChart.resize();
};
// 方法二
window.addEventListener('resize', () => {
myChart.resize();
})
</script>
echarts通用配置
通用配置：指的是任何一种类型的图表都可以使用的配置。
1.通用配置title
（1）文字样式：textStyle
（2）标题边框：borderWidth、borderColor、borderRadius
（3）标题位置：left、top、right、bottom
title: {
show: true, //是否显示
text: '期末语文考试成绩', // 标题文字内容
link:'http://baidu.com', // 标题的超链接
target：'blank'， // 指定窗口打开主标题超链接 'self' 当前窗口打开 'blank' 新窗口打开
// 标题文字
textStyle: { // 标题文字样式
color: 'red', // 标题文字颜色
fontSize: 12, // 标题文字大小
lineHeight: 14, //行高
fontStyle: 'normal', // 主标题文字字体的风格。 normal italic oblique
fontWeight: 'bolder', //主标题文字字体的粗细 normal bold bolder lighter 100 | 200 | 300 | 400...
textBorderColor: '#fff', // 文字本身的描边颜色。
textBorderWidth:2, // **文字本身的描边宽度。**
textBorderType:'solid',// 文字本身的描边类型。'solid' 'dashed' dotted
// 自 v5.0.0 开始，也可以是 number 或者 number 数组，用以指定线条的 dash array，配合 textBorderDashOffset 可实现更灵活的虚线效果。例如
// textBorderType: [5, 10],
// textBorderDashOffset: 5，
textBorderDashOffset：1, // 用于设置虚线的偏移量，可搭配 textBorderType 指定 dash array 实现灵活的虚线效果。
textShadowColor: 'transparent' //文字本身的阴影颜色。
textShadowBlur:12 // 文字本身的阴影长度。
textShadowOffsetX:12 // 文字本身的阴影 X 偏移。
textShadowOffsetY:12 // 文字本身的阴影 Y 偏移。
overflow: 'none' //文字超出宽度是否截断或者换行。配置width时有效
'truncate' //截断，并在末尾显示ellipsis配置的文本，默认为...
'break' //换行
'breakAll' //换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行
ellipsis: '...' //在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本。
}
// 副标题文ben
subtext: '', //副标题文本，支持使用 \n 换行。
sublink: '', //副标题文本超链接。
subtarget: 'blank',// 指定窗口打开副标题超链接，可选：'self' 当前窗口打开 'blank' 新窗口打开
subtextStyle:{
color: '#aaa',
fontSize: '12px',
fontFamily: 'sans-serif',
align: 'center', //文字水平对齐方式，默认自动。left center right
verticalAlign:'top', //文字垂直对齐方式，默认自动。top middle bottom
....
},
textAlign: 'auto', //整体（包括 text 和 subtext）的水平对齐。auto left right center
textVerticalAlign:'auto', // 整体（包括 text 和 subtext）的垂直对齐。auto top middle bottom
triggerEvent:true,//是否触发事件。
padding: 5, //标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。 padding: [5, 10]
itemGap: 10, //主副标题之间的间距。
zlevel:12, //所有图形的 zlevel 值。zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
z: 2,//组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。z相比zlevel优先级更低，而且不会创建新的 Canvas。
left: 'auto' // title 组件离容器左侧的距离。left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。****
top:'auto', //'top', 'middle', 'bottom'
bottom:'auto',
right:'auto',
backgroundColor: 'transparent' // 标题背景色，默认透明。
borderColor: '#ccc' // 标题的边框颜色。支持的颜色格式同 backgroundColor。
borderWidth:1, // 标题的边框线宽。
borderRadius:5, //圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。 如:borderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）
// 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowColor: 'rgba(0, 0, 0, 0.5)', //阴影颜色。支持的格式同color。注意：此配置项生效的前提是，设置了 show: true。
shadowBlur: 10, // 图形阴影的模糊大小
shadowOffsetX:12,//阴影水平方向上的偏移距离。
shadowOffsetY:12,//阴影垂直方向上的偏移距离。
// 标题边框
borderWidth: 5,
borderRadius: 5, // 标题边框圆角形状
borderColor: 'black', // 标题边框颜色
// 标题位置
left: 50, // 标题位置
top: 10
},
2.legend图例组件
图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
legend:{
id:'', // 组件id
type:'plain', // 图例的类型。'plain'：普通图例。缺省就是普通图例,'scroll'：可滚动翻页的图例。当图例数量较多时可以使用。
show:true, // 是否显示
zlevel:12,// 所有图形的 zlevel 值。
Z:2, //
left:'auto', // 图例组件离容器左侧的距离。例：20%或者20px或者left\center\right
top:'auto' , // top middle bottom
right:'auto' //
bottom:'auto',
width:'auto' ,//图例组件的宽度。默认自适应。
height:'auto', //图例组件的高度。默认自适应。
orient:'horizontal',// 图例列表的布局朝向 vertical横 horizontal纵
align:'auto',// 图例标记和文本的对齐
padding:5,//图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
itemGap:10, //图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
itemWidth: 25 , //图例标记的图形宽度
itemHeight:25, // 图例标记的图形高度。
//图例的图形样式。其属性的取值为 'inherit' 时，表示继承系列中的属性值
itemStyle:{
color:inherit,// 图形的颜色。
borderColor:inherit//图形的描边颜色。支持的颜色格式同 color，不支持回调函数
borderWidth: auto, //当其值为 "auto" 时，如果系列有 borderWidth 取 2，如果系列没有 borderWidth 则取 0。当其值为 "inherit" 时，始终取系列的 borderWidth。
borderType: inherit,//描边类型 solid' 'dashed' dotted
opacity: inherit, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
},
// 图例图形中线的样式，用于诸如折线图图例横线的样式设置。其属性的取值为 'inherit' 时，表示继承系列中的属性值。
lineStyle:{
color： 'inherit',
width:auto // 线宽
type:'inherit' // 线的类型 solid dashed dotted
opacity:1,// 图形透明度
inactiveColor:'#ddd',//图例关闭时的线条描边颜色
inactiveBorderColor: '#ccc' //图例关闭时的描边颜色。
inactiveBorderWidth: 'auto' // 图例关闭时的描边粗细。
inactiveWidth:2, // 图例关闭时的线条宽度
symbolRotate：'inherit' // 图形旋转角度，类型为 number | 'inherit'。如果为 'inherit'，表示取系列的 symbolRotate
formatter:function(name){
return 'legend ' + name;
}
}
//图例的公用文本样式。
textStyle:{
color:'#fff' //文字颜色
fontStyle:'normal'//文字字体风格 italic oblique
fontWeight:'normal' // bold bolder lighter 100 900
fontFamily:''//文字的字体演示
fontSize:'12px'// 文字的字体大小
lineHeight:12,//行高
backgroundColor:'transparent'//文字块背景颜色
//也可以是图片
：{
image:'xxxx/xxx.png'
}
borderColor:'#FFf'//文字块边框颜色
borderWidth:12,//文字块边框宽度
borderType:'solid'//文字块边框类型
borderRadius:12//文字块的圆角
padding:[1,2,3,4]//文字块的内边距
width:12,//文字块宽度
height:12,//文字块高度
overflow:'none'//文字超出宽度是否截断或者换行，有width有效，truncate截断，并在末尾显示ellopsis配置文本，默认为...
break 换行 breakAll 换行，强制单词内换行
ellipssis:'...',
rich:{}//可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果
例如：{
label: {
// 在文本中，可以对部分文本采用 rich 中定义样式。
// 这里需要在文本中使用标记符号：
// `{styleName|text content text content}` 标记样式名。
// 注意，换行仍是使用 '\n'。
formatter: [
'{a|这段文本采用样式a}',
'{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
].join('\n'),
rich: {
a: {
color: 'red',
lineHeight: 10
},
b: {
backgroundColor: {
image: 'xxx/xxx.jpg'
},
height: 40
},
x: {
fontSize: 18,
fontFamily: 'Microsoft YaHei',
borderColor: '#449933',
borderRadius: 4
},
...
}
}
}
tooltip:{
show:true
},
icon:'circle'//图例项的 icon。rect roundRect tirangle diamond pin arrow none
data:[]
}
}
3.grid配置
gird:{
show:true,
left:'10%',
width:'auto' //组件的宽度。默认自适应。
height:'auto'// 组件的高度。默认自适应
containLabel:true, //区域是否包含坐标轴的刻度标签。
backgroundColor: 'transparent' //网格背景色，默认透明
borderColor: '#ccc' //网格的边框颜色
borderWidth: 1
}
4.xAxis
直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠.
xAxis:{
show:true,
alignTicks:{
},
position:'top'//x轴的位置 bottom
type:'category'//坐标轴的类型 value: 数值轴，适用于连续数据 category 类目轴，适用于离散的类目数据 time: 时间轴 log:对数轴
name:'mingzi' // 坐标轴的名称
namelocation:'eng'// 坐标轴名称明显的位置 start middle center end
// 坐标轴名称的文字样式。
nameTextStyle:{
color:'#fff',// 坐标轴名称的颜色
fontStyle:'normal',
fontWeight:'bold',
fontFamily,
fontSize,
align:'center' // 文字水平对齐方式，默认自动。 left right
verticalAlign:'middle'//文字垂直对齐方式 top bottom
lineHeight:12//行高
backgroundColor:'#fff' //文字块背景色。
borderColor,borderWidth ,borderType,borderRadius
padding:[12,23,23,21] // 文字块的内边距。[上, 右, 下, 左] 的边距。
width:12,//文本显示宽度
height:12,//文本显示高度
textBorderColor：‘#fff’, // 文字本身的描边颜色。
textBorderWidth:12, // 文字本身的描边宽度。
textBorderType: 'solid', //文字本身的描边类型。
textShadowColor:'transparent', //文字本身的阴影颜色。
textShadowBlur:12, // 文字本身的阴影长度。
overflow:'none', // 文字超出宽度是否截断或者换行
}
nameGap：15 //坐标轴名称与轴线之间的距离
nameRotate:12 // 坐标轴名字旋转，角度值。
//坐标轴名字的截断
nameTruncate:{
maxWidth:12, // 截断文本的最大长度，超过此长度会被截断
ellopsis:'...' // 截断后文字末尾显示的内容。
},
inverse:true, // 是否是反向坐标轴。
boundaryGap:true, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
min:12,//坐标轴刻度最小值
min:function(value){
return value.min - 20;
}
max:12 //坐标轴刻度最大值。
max: function (value) {
return value.max - 20;
}
scale:true //
}
5.通用配置tooltip
tooltip：提示框组件，用于配置鼠标滑过或点击图标时的显示框。
触发类型：tigger（item、axios）
触发时机：triggerOn（mouseover、click）
格式化：formatter（字符串模板、回调函数）
tooltip: {
// 鼠标移到柱状图上显示具体信息
// trigger: 'item',// 只能在柱的内部显示
trigger: 'axis', // 在柱的轴上都可以显示
// 点击的时候出现柱状图的具体信息
// triggerOn: "click",
show: true, // 是否显示
trigger: 'axis', // 触发类型 'item'图形触发：散点图，饼图等无类目轴的图表中使用； 'axis'坐标轴触发；'none'：什么都不触发。
axisPointer: { // 坐标轴指示器配置项。
type: 'shadow', // 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。
axis: 'auto', // 指示器的坐标轴。
snap: true, // 坐标轴指示器是否自动吸附到点上
},
showContent: true, //是否显示提示框浮层，默认显示。
triggerOn: 'mouseover', // 触发时机 'mouseover'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。
enterable: false, // 鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
renderMode: 'html', // 浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；
backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色。
borderColor: '#333', // 提示框浮层的边框颜色。
borderWidth: 0, // 提示框浮层的边框宽。
padding: 5, // 提示框浮层内边距，
textStyle: { // 提示框浮层的文本样式。
color: '#fff',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: 12,
},
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);', // 额外附加到浮层的 css 样式
confine: false, // 是否将 tooltip 框限制在图表的区域内。
formatter: '{b}' // 自定义数据
// 决定提示框的内容
// formatter:'{b}的成绩是{c}'
formatter: function (arg) { // arg包含了具体柱状图的信息
return arg[0].name + "的分数是" + arg[0].data 或者
let result = `<p> ${arg.name} 分数是${arg[0].data}</p>`
return result
}
},
3.通用配置toolbox
toolbox：Echarts提供的工具栏。
内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具
toolbox: {
feature: {
saveAsImage: {
toolbox.show boolean 默认值为true，是否显示工具栏组件
toolbox.orient stirng 默认值为horizontal，工具栏 icon 的布局朝向。可选项为“horizontal”和“vertical”
toolbox.itemSize number 默认值为15，工具栏 icon 的大小。
toolbox.itemGap number 默认值为10，工具栏 icon 每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
toolbox.showTitle boolean 默认值为true，是否在鼠标 hover 的时候显示每个工具 icon 的标题。
toolbox.feature Object
// type->保存图片的格式，name->保存文件的名字，backgroundColor->保存图片的背景色，show->是否显示该工具，还有一些别的属性可以自己再使用的时候查询API文档。
//restore：配置项还原。主要属性是show->是否显示该工具。
}, // 导出图片按钮
dataView: {}, // 数据视图按钮数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。show->是否显示该工具，readOnly->是否不可编辑，optionToContent->自定义 dataView 展现函数，用以取代默认的 textarea 使用更丰富的数据编辑。可以返回 dom 对象或者 html 字符串，backgroundColor->数据视图浮层背景色。
restore: {}, // 重置按钮
dataZoom: {}, // 区域缩放按钮 数据区域缩放。目前只支持直角坐标系的缩放（这里的含义就是柱状体，折线图可以缩放，但是像饼状图就不能缩放）。show->是否显示该工具
magicType: {
type: ['bar', 'line'] // 动态图表类型的切换动态类型切换。show->是否显示该工具，type->这是个数组，启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）
}
}
5.通用配置legend
legend：图例，用于筛选系列，需要和series配合使用
legend中的data是一个数组
legend中的data的值需要和series数组中某组数据的name值一致
//legend要和series的name保持一致
legend: {
orient: 'horizontal', // 图例设置图例的朝向 vertical 垂直显示 horizontal 水平显示
x:'center', // 设置图例在X轴方向上的位置 取值： left/center/right
y:'top', // 在Y轴方向上的位置 取值： top/center/bottom
backgroundColor: '#fff' // 图例背景颜色
borderColor： ‘#fff’ // 图例边框颜色
borderWidth // 边框颜色
padding ： // 内边距
itemGap： 40， //控制每一项的间距，也就是图例之间的距离 属性值为数值，不带单位
itemHeight: 6, // 控制图例图形的高度 属性值为数字，不加单位
textStyle: { // 图例文字样式
color: 'red',
fontSize: '20px',
fontWeight: 700
}，
selected：{ // 设置图例的某个选项的数据默认是显示还是隐藏。 属性值：对象，属性值内容：图例上的数据与boolean构成键值对，如果某选项设置为false，那么图标上的数据也会默认不显示，而图例会以灰色样式显示。
'搜索引擎': false, // 隐藏
'联盟广告': false
}
data: ['语文', '数学']
},
series: [{
name: '语文',
type: 'bar',
data: yDataArr1
}, {
name: '数学',
type: 'bar',
data: yDataArr2
}]
案例 柱状图
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
},
formatter: function (params) {
let result = ''
params.forEach((res) => {
result += `<p style="margin: 0px 10px; font-size: 12px;">${res.seriesName}<span> : </span>${res.value}</p>`
})
return result
},
backgroundColor: '#6485A2'
},
color: [
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: '#C7BAF8' }, // 设置颜色渐变 柱状图的颜色
{ offset: 1, color: '#705AE2' }
]
},
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: '#8AB2FC' }, // 设置颜色渐变
{ offset: 1, color: '#2E5FE4' }
]
},
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: '#74DFBB' }, // 设置颜色渐变
{ offset: 1, color: '#2FAF99' }
]
}
],
legend: {
orient: 'horizontal',
itemWidth: 15,
itemHeight: 10,
data: [ '未执行', '执行失败', '执行成功' ], // 图例
textStyle: {
fontSize: 10,
color: '#333'
},
zlevel: 1,
right: '2%',
top: '3%'
},
dataZoom: {
show: false,
start: 0,
end: 100
},
center: ['5%', '50%'],
xAxis: {
type: 'category',
data: ['替代文字2', '替代文字2', '替代文字2', 'T替代文字2', '替代文字2', '替代文字2', '替代文字1', '替代文字2'],
axisLabel: {
interval: 0, // 代表显示所有x轴标签
rotate: 30,
textStyle: {
color: '#000000'
}
},
axisLine: {
lineStyle: {
color: '#B9B9BA'
}
},
splitLine: {
show: false,
lineStyle: {
color: ['#315070'],
width: 1,
type: 'solid'
}
},
axisTick: {
show: false,
lineStyle: {
color: '#000000'
}
}
},
grid: {
x: '10%',
y: '15%',
x2: '3%',
y2: '20%'
},
yAxis: [
{
// name: '单位:分',
name: '',
type: 'value',
// max: 100,
splitLine: {
show: false
},
axisTick: {
show: true,
lineStyle: {
color: '#B9B9BA'
}
},
axisLabel: {
textStyle: {
color: '#000000'
}
},
axisLine: {
lineStyle: {
color: '#B9B9BA'
}
},
splitArea: {
show: true,
areaStyle: {
color: [ '#ffffff', '#F5F6FA' ]
}
}
}
],
series: [
{
type: 'bar',
name: '未执行',
// data: [10, 10, 10, 10, 20, 20, 30, 50],
data: [],
barWidth: 12
// itemStyle: {
// color: '#705AE2'
// }
},
{
type: 'bar',
name: '执行失败',
// data: [10, 40, 10, 10, 60, 20, 30, 50],
data: [],
barWidth: 12
// itemStyle: {
// color: '#2E5FE4'
// }
},
{
type: 'bar',
name: '执行成功',
// data: [10, 10, 80, 10, 20, 20, 30, 50],
data: [],
barWidth: 12
// itemStyle: {
// color: '#2FAF99'
// }
}
]
}
