echarts通用配置
通用配置：指的是任何一种类型的图表都可以使用的配置。
1.通用配置title
（1）文字样式：textStyle
（2）标题边框：borderWidth、borderColor、borderRadius
（3）标题位置：left、top、right、bottom
title: {
text: '期末语文考试成绩',
// 标题文字
textStyle: {
color: 'red',
fontSize: 12,
lineHeight: 14, //行高
fontStyle: 'normal'
},
// 标题边框
borderWidth: 5,
borderRadius: 5,
borderColor: 'black',
// 标题位置
left: 50,
top: 10
},
2.通用配置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'
// }
}
]
}