Echarts
常用配置技巧
柱状图显示多个数值
- 柱状图显示多个数值：中间位置 + 顶部位置
- X轴label超出范围...展示
- y轴最大值设置：预留顶部label展示空间
- 无数据：默认展示
查看代码
js
export const getOption = (xAxisData = [], seriesData = [], labelData = []) => {
// 设置默认信息 、 无数据展示
const graphic =
xAxisData.length === 0
? [
{
type: 'text',
left: '40%',
top: '28%',
z: 1000,
style: {
text: '暂无数据',
textAlign: 'center',
fill: '#bcd2ff', // 设置文本颜色
fontSize: 18,
},
},
]
: []
return {
graphic,
title: {
},
tooltip: {
trigger: 'axis',
},
calculable: true,
grid: {
top: '10%',
bottom: '130px',
left: '0',
right: '10%',
},
xAxis: [
// x轴
{
type: 'category',
data: xAxisData,
height: 100,
axisLine: {
show: true,
lineStyle: {
color: '#bcd2ff',
},
},
axisTick: {
// 刻度
show: false,
},
axisLabel: {
color: '#bcd2ff',
interval: 0, // 显示所有标签
rotate: -45,
fontSize: 18,
/*
x轴 label 超出范围...展示
设置下边三个属性：width、overflow、ellipsis
grid.bottom 控制label的展示区域的大小
*/
lineHeight: 130,
width: 130, // 标签宽度
overflow: 'truncate', // 超出显示省略号
ellipsis: '...', // 省略号
},
},
],
yAxis: [
// y轴
{
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: '#bcd2ff',
},
},
axisTick: {
show: false,
},
axisLabel: {
color: '#bcd2ff',
show: false,
},
splitLine: {
show: false,
},
max: Math.max(...seriesData) * 1.1, // 设置y轴顶部的空间
},
],
series: [
{
type: 'bar',
data: seriesData,
label: {
// 柱状图中间位置展示label
show: true,
position: 'inside',
color: '#bcd2ff',
formatter: (params) => {
return labelData[params.dataIndex]
},
},
markPoint: {
// 柱状图顶部位置展示label
symbol: 'image://', // 设置为image://，默认背景没有图案和背景
symbolSize: 10,
label: {
color: '#bcd2ff',
show: true,
position: 'top',
formatter: '{c}', // 显示数值
fontSize: 18,
},
data: seriesData.map((item, index) => ({
value: item,
coord: [index, item], // 展示位置，x轴和y轴的值
})),
},
itemStyle: {
borderRadius: [10, 10, 10, 10],
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(2, 201, 213, 1)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(1, 164, 251, 1)', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
],
}
}柱状图+折线图
- 渐变颜色
- yAxisIndex 数据维度
- barGap 柱与柱之间的间距
查看代码
js
export function getOption(timeData = [], inputQuantity = [], realTimeUph = [], standardUph = []) {
return {
title: {
},
tooltip: {
trigger: 'axis',
},
legend: {
// 顶部小色块
textStyle: {
color: '#bcd2ff',
fontSize: 18,
},
},
toolbox: {
show: false,
},
calculable: true,
grid: {
top: '10%',
bottom: '30px',
left: '64px',
right: '5%',
},
xAxis: [
{
type: 'category',
data: timeData,
axisLine: {
show: true,
lineStyle: {
color: '#bcd2ff',
},
},
axisTick: {
show: false,
},
axisLabel: {
color: '#bcd2ff',
fontSize: 18,
},
},
],
yAxis: [
{
type: 'value',
name: '',
axisLine: {
show: true,
lineStyle: {
color: '#bcd2ff',
},
},
axisTick: {
show: false,
},
axisLabel: {
color: '#bcd2ff',
show: true,
fontSize: 18,
},
splitLine: {
show: true,
lineStyle: {
color: '#1D4988',
},
},
},
],
series: [
{
name: 'F:投入',
type: 'bar',
data: inputQuantity,
barWidth: 10,
label: {
show: true,
color: '#bcd2ff',
position: 'top',
fontSize: 14,
},
itemStyle: {
borderRadius: [10, 10, 10, 10],
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(2, 201, 213, 1)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(1, 164, 251, 1)', // 100% 处的颜色
},
],
},
},
barGap: '200%',
},
{
name: 'F:产出',
type: 'bar',
data: realTimeUph,
// yAxisIndex: 1, 如果设置，则这里的数据，与上一数据的不在同一维度
barWidth: 10,
label: {
show: true,
color: '#bcd2ff',
position: 'top',
fontSize: 14,
},
itemStyle: {
borderRadius: [10, 10, 10, 10],
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(249, 182, 74, 1)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(248, 100, 0, 1)', // 100% 处的颜色
},
],
},
},
},
{
name: 'F:理论UPH',
type: 'line',
data: standardUph,
lineStyle: {
color: '#49FFED',
width: 2,
},
itemStyle: {
color: '#49FFED',
},
smooth: true,
symbol: 'none',
},
],
}
}折线图+查看节点
- 增加监听事件
- vue组件 转为 htmlElement
查看代码
js
export function getOption(timeData = [], lineData = [], standardUph = null) {
const graphic =
timeData.length === 0
? [
{
type: 'text',
left: 'center',
top: '50%',
z: 1000,
style: {
text: '暂无数据',
textAlign: 'center',
fill: '#323232', // 设置文本颜色
fontSize: 14,
},
},
]
: []
return {
graphic,
// title: {
// text: title,
// },
legend: {
// data: ['inputting', 'outting', '理论UPH'],
textStyle: {
color: '#323232',
fontSize: 14,
},
},
toolbox: {
show: false,
},
calculable: true,
grid: {
top: '5%',
bottom: '30px',
left: '5%',
right: '5%',
},
xAxis: [
{
type: 'category',
data: timeData,
axisLine: {
show: true,
lineStyle: {
color: '#323232',
},
},
axisTick: {
show: false,
},
axisLabel: {
color: '#323232',
fontSize: 14,
},
},
],
yAxis: [
{
type: 'value',
name: '',
axisLine: {
show: true,
lineStyle: {
color: '#323232',
},
},
axisTick: {
show: false,
},
axisLabel: {
color: '#323232',
show: true,
fontSize: 14,
},
splitLine: {
show: false,
},
},
],
series: [
// 多条折线图
...lineData.map((item, index) => {
return {
name: `${item.a}-${item.b}`,
type: 'line',
data: item.data,
// triggerLineEvent: true,
smooth: true,
symbolSize: 10,
// showSymbol: false,
// symbol: 'none',
}
}),
// 单独增加一条参考线
standardUph
? {
name: 'F:标准UPH',
type: 'line',
itemStyle: {
color: 'red',
},
markLine: {
data: [
{
// 设置高度
yAxis: standardUph,
// 只显示线
symbol: 'none',
},
],
symbol: 'none',
distance: 40,
lineStyle: {
color: 'red',
},
label: {
position: 'end',
color: 'red',
},
},
}
: null,
],
}
}
export const mouseoverHandle = (params, echartInstance) => {
if (params.componentType === 'series' && params.seriesType === 'line') {
const table = document.createElement('table')
// 这里也可以使用vue组件，可使用vue extend 实现
table.innerHTML = `
<thead>
<tr>
<th>name</th>
<th>value</th>
</tr>
</thead>
<tbody>
<tr>
<td>${params.name}</td>
<td>${params.seriesName}</td>
</tr>
</tbody>
`
echartInstance.setOption({
tooltip: {
show: true,
hideDelay: 500,
confine: true, // 是否限制在图表区域内
// alwaysShowContent: true,
// triggerOn: 'click',
// trigger: 'item',
enterable: true, // 是否可进入tooltip
formatter: () => {
return table
},
borderColor: '#f0f0f0',
},
})
} else if (params.componentType === 'markLine') {
echartInstance.setOption({
tooltip: {
show: false,
hideDelay: 0,
},
})
}
}