Echart v5.3.2
var options = {
// 一、标题组件，包含主标题和副标题
title: {
...
...
},
// 二、 图例组件
legend: {
...
...
},
// 三、直角坐标系内网格布局。折线图，柱状图，散点图（气泡图）
grid: {
...
...
},
// 四、提示框组件
tooltip: {
...
...
},
// 五、直角坐标系grid的x轴
xAxis: {
...
...
},
// 六、series
series: [
{
...
},
{
...
}
]
}
一、标题组件，包含主标题和副标题
title: {
text: '主标题',
textStyle: { ... },
subtext: '副标题',
subtextStyle: { ... },
top: '',
left: '',
backgroundColor: '',
...
},
图1.1
图1.2
二、图例组件
legend: {
type: 'plain', // plain普通图例 scroll可滚动图例，多用于饼图
// 图例的数据数组。需与series的name对应匹配
data: [
// 默认取series中的name，无特别设置样式，可不声明
'series1的name',
// 可为该项配置对象，单独设置样式{name: '', icon: '', textStyle: { ... }}
{
name: 'series2的name',
icon: '',
textStyle: {
color: ''
}
}
],
selectedMode: true, // string|boolean，默认true。图例选择模式，控制是否可以通过点击图例改变系列的显示状态，还有可选值single|multiple模式
// 图例选中状态。初始化显示需要显示的图表，eg：初始化加载显示[series1的name]的bar图表，而[series2的name]的line图表不显示，在selectedMode为true时可通过点击显示图例显示 。
selected：{
'series1的name': true,
'series2的name': false
},
itemGap: 2, // 图例间隔
itemWidth: 25, // 图例宽度
itemHeight: 25, // 图例高度
itemStyle: { ... }, // 图例样式
lineStyle: { ... }, // 图例图形中线的样式，诸如折线图的图例-o-
// 图例的公用文本样式。eg：设置饼图
textStyle: {
// 自定义富文本样式（给标签增加样式）
rich: {
aStyle: {
color: '#f00'
},
bStyle: {
height:42
},
cStyle: {
fontSzie:18,
fontWeight: 600
},
...
}
}
// 图例文本。字符串模板和回调函数。只有变量name，如果需要其他数据，使用图表实例, this.instanceChart.getOption().series[0].data获取对应的数据
formatter: function(name) {
let items = that.instanceChart.getOption().series[0].data.filter(item => item.name == name)
let ratio = items?.[0]?.ratio || '0.00%'
let quantity = items?.[0]?.value || '0'
return `{aStyle|${name}}{bStyle|${ratio}}${cStyle|quantity}`
},
...
},
图2.1
图2.2
三、直角坐标系内网格布局。折线图，柱状图，散点图（气泡图）
grid: {
top: 40,
left: 10,
right: 5,
bottom: 0,
containLabel: true, // 『防止标签溢出』。设置为true显示X轴和Y轴的标签
show: true,
backgroundColor: 'transparent', // 网格背景色，默认透明。设置show：true生效
borderColor: '#ccc', // 网格边框颜色。设置show：true生效
borderWidth: 1, // 网格边框线框。设置show：true生效
shadowBlur: 10, // 图形阴影的模糊大小。设置show：true生效
shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色。设置show：true生效
shadowOffsetX: 1, // number 阴影水平方向上的偏移距离。设置show：true生效
shadowOffsetY: 1, // number 阴影垂直方向上的偏移距离。设置show：true生效
...
},
图3.1
四、提示框组件
tooltip: {
trigger: 'axis', // axis坐标轴触发（柱状图和折线图）；item数据项图形触发（散点图和饼图；none什么都不触发）
backgroundColor: '#ccc', // 悬浮框的背景颜色
// 设置悬浮框内的文字大小样式等
textStyle: {
color: '#fff',
fontSize: 14,
...
},
// 坐标轴指示器配置项
axisPointer: {
type: 'line', // 坐标轴指示器，默认为直线。可选为：line | shadow | none | cross
// 坐标轴指示器的文本标签
label: {
show: false, // 默认false，当type为cross时默认true
precision：'auto', // number或string，文本标签的小数点精度
color: '#f00',
...
},
lineStyle: { ... },
shadowStyle: { ... },
crossStyle: { ... }
},
// 提示框浮层内容格式器。方式一：字符串模板
formatter: '{a}-{b}-{c}', // 折线|柱状|K线： {a}系列名称：series的name，{b}类目值：x轴的值，{c}数值：y轴的值。{a0}-{b0}-{c0}加索引的表示系列索引，0表示series中第一个data数据值，1表示第二个data数据值，依次类推...
// 提示框浮层内容格式器。方式二：回调函数
formatter: function formatter(params) {
// params[0].data中的data是series中的data
const { date, value } = params[0].data
return `<div>${date}<br />销售金额：${value} </div>`
}
}
图4.1
图4.2
五、直角坐标系grid的x轴（y轴属性基本相同）
xAxis: {
show: true, // 是否显示x轴。默认true
type: 'category', // x轴类型。category类目轴--自定义的类目数据，多用于x轴文字展示 | value数据轴--连续数据，多用于y轴数据展示 | time时间轴 | log对称轴
name: '日期', // x轴的坐标轴名称，标识单位等
nameLocation: 'end', // start | middle | end，x轴名称显示位置
// 设置x轴的坐标轴名称颜色大小等样式
nameTextStyle: {
color: '',
fontSize: 12,
width: 50, // 文本宽
height: 35, // 文本高
...
}
nameGap: 15, // x轴名称与轴线之间的间距
nameRotate: 45, // x轴名字旋转的角度
// x轴轴线
axisLine: {
show: true, // 默认true显示
// 轴线类型样式等设置
lineStyle: {
type: '', // 线的类型，solid | dashed | dotted, v5.0.0开始，可以number或number数组，配合dashOffset指定线条的虚线效果
color: '',
width: 2,
...
}
},
// x轴刻度线
axisTick: {
show：true, // 默认true显示
alignWithLabel: true, // 类目轴boundary为true时，保证刻度线与标签居中对齐
interval: 0, // number | function，坐标轴刻度线显示间隔。0强制显示所有标签
inside: false, // boolean，x轴刻度线是否朝内，默认朝外false。（利用这个属性可以实现x轴线的效果，见图二）
length: 5, // x轴刻度线的长度
// 刻度线类型样式等设置
lineStlye: {
type: '', // 线的类型，solid | dashed | dotted, v5.0.0开始，可以number或number数组，配合dashOffset指定线条的虚线效果
color: '',
...
}
},
// x轴刻度标签文字
axisLabel: {
show: true, // 是否显示刻度标签，默认true
interval: 0, // number | function，坐标轴标签文字显示间隔。0强制显示所有标签
inside: false, // boolean，x轴标签文字是否朝内，默认朝外false
rotate: 15, // number，// x轴标签文字旋转角度
margin: 10, // x轴标签文字与x轴轴线之间的距离
hideOverlap: true, // v5.2.0支持 boolean，是否隐藏重叠的标签，默认false
formatter: '', // string | function，x轴标签文字格式器，支持字符串和回调函数两种形式。（1）字符串模板：适用不改变原value值，直接追加内容. eg： formatter: '{value} kg'；（2）函数模板：适用于改造原value值. eg:formatter: function(value, index) { return Math.trunc(value) + 'key' }
color: '#f00', // color | function, x轴标签文字颜色，默认取axisLine.lineStyle.color. 支持回调函数，参数是标签的文本，返回颜色值，eg：(value, index) => { return value == '苹果' ? '#f00' : 'black' }
fontSize: '',
width: '',
textBorderColor: '',
textShadowColor: '',
overflow: 'none', // 文字超出宽度截断或换行，配置width有效。 truncate | break | breakAll
rich: {}, // Object，自定义富文本样式
...
},
// x轴指示器（鼠标进入悬浮显示）
axisPointer: {
show: false, // 默认不显示
type: 'line', // line | shadow | none
label: {
show: false, // 默认不显示
precision: 2, // number |string, 文本标签的小数点精度
formatter: '', // string | function
},
// type为line生效
lineStyle: {
type: 'line',
color: '',
...
},
shadowStyle: {
color: '',
...
}
}
data: Array, // x轴数据。type: 'category'时data才有效。若需要以对象的形式传入多个数据，x轴展示的数据的key必须是【value】。（若传入的是字符串，会被切分成数组依次展示）
...
}
图5.1
图5.2
六、series
// 数组形式，一个对象表示一个图表。eg：
// 两个柱状图 series:[{type: 'bar', data: seriesData},{type: 'bar',data: seriesData}];
// 柱状图+折线图 series:[{type: 'line', data: seriesData},{type: 'bar',data: seriesData}]
series: [
{
type: 'line', // 图表类型。line折线图、bar柱状图、pie饼图、map地图
// 悬浮在数据项上的文字标签（eg：柱状图的柱子上方漂浮显示/柱子中间显示）。见图6.1
label: {
show: true, // boolean
position: 'top', // string | Array。top/left/bottom/inside/insideLeft/insideBottomLeft等。[10, '10%']像素或百分比
distance：5, // number 距离图形元素的距离
formatter: '', // 字符串模板和回调函数
fontSize: 12, // 字体大小
...
},
select: {}, // 数据选中后状态
selectedMode: false, // boolean选中状态，默认false | string选中模式single，multiple，series
itemStlye: {},
lineStyle: {},
// 区域填充颜色，line有此属性。见图6.2
areaStyle: {
// 区域颜色，支持十六进制，rgba，渐变色。0, 0, 0, 1代表右|下|左|上
color: echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
// 开始位置
offset: 0,
color: '#B7DBFF'
},
{
// 结束位置
offset: 1,
color: '#fff'
}
])
},
// 鼠标悬停区域的高亮状态
emphasis: {
disabled: false, // boolean 是否关闭高亮状态
label: {
show: true,
position: '',
color: ''
...
}
},
// 系列中数据内容数组。具体数据项
// 第一种：只有数据值。eg：[12, 45, 674, 88, 90]
// 第二种：不止数据值，还需要其他数据的数组对象形式（需要更多的数据去自定义tooltip等），数据项数值必须是value这个字段（其中pie中的series的data格式必须满足[{name: '', value: ''}]）。eg：[{date: '2020-09', value: 12}, {date: '2021-08', value: 45}, ...]
data: [
{
type: 'bar',
// 为该系列单独设置样式
label: { ... },
labelLine: { ... },
itemStyle: { ... },
emphasis: { ... }
...
}, {
type: 'pie'
}
]
}
]
图6.1
图6.2
