React函数式组件 + Echart 3.X : 常用图表设置
垂直柱状图
import React, {
useState, useEffect } from 'react';
import ReactEcharts from '../../../components/ECharts/ReactEcharts.js';
const Line = (props) => {
const {
yAixsName, barColor, legendName, data, filterKey } = props;
const [seriesData, setSeriesData] = useState([[], []]); // 表格数据
const [legend, setLegend] = useState(legendName[0]); // 选中的legend
useEffect(() => {
...
// 初始化表格数据
setTimeout(() => {
setSeriesData([formatData1, formatData2]);
setLegend(legendName[0]);
}, 500);
}, [props]);
const option = {
grid: {
// left: 100, // grid 组件离容器左侧的距离。
bottom: 80 // 同上，避免label文字块高度太高，显示不全
},
// tooltip: {
// trigger: 'axis'
// },
tooltip: {
trigger: 'axis',
// axisPointer: {
// type: 'shadow'
// },
formatter: `{b}
${
yAixsName}：{c0}`
},
legend: {
data: legendName, // 图例对应的series中的name字段
selected: {
// 防止点击legend动画数据异常
[legendName[0]]: legend === legendName[0],
[legendName[1]]: legend === legendName[1]
},
selectedMode: 'single', // 单选模式
right: 50, // 图例组件离容器上侧的距离
itemHeight: 30, // 图例高度
itemWidth: 50, // 图例宽度
itemGap: 20, // 每个图例之间的距离
textStyle: {
color: 'white', // 图例文字颜色
fontSize: 18 // 图例文字大小
}
},
xAxis: {
type: 'category',
data: legend === legendName[0] ? seriesData[0].map(item => item.key) : seriesData[1].map(item => item.key),
axisLabel: {
// 坐标轴刻度标签的相关设置
color: '#fff', // 坐标轴文字颜色
fontSize: 14, // 坐标轴文字大小
// margin: 8, // 文字与坐标轴的垂直距离
interval: 0, // 隔多少个才显示label文字， 0强制显示全部
// rotate: -25, // label文字旋转，防止重叠
formatter: (value = '', index) => {
// label文字格式化，换行输出
let ret = ''; // 拼接加\n返回的类目项
const maxLength = 4; // 每项显示文字个数
const valLength = value.length; // X轴类目项的文字个数
const rowN = Math.ceil(valLength / maxLength); // 类目项需要换行的行数
if (rowN > 1) {
// 如果类目项的文字大于3,
for (let i = 0; i < rowN; i++) {
let temp = ''; // 每次截取的字符串
const start = i * maxLength; // 开始截取的位置
const end = start + maxLength; // 结束截取的位置
temp = `${
value.substring(start, end)}\n`;
ret += temp; // 拼接最终的字符串
}
return ret;
} else {
return value;
}
}
}
// min: -1, // 坐标轴刻度最小值 0-1-2 | 1（第一条柱子不显示） | -1（缩进-0-1-2）
// max: 15, // 坐标轴刻度最大值 2 => 0-1-2 -> 分成三份， 可用来减少柱子间的距离
},
yAxis: {
type: 'value',
splitLine: {
show: false // 取消网格线
},
name: yAixsName, // 坐标轴名称
nameTextStyle: {
// 坐标轴名称的文字样式。
color: '#fff', // 坐标轴名称的颜色
fontSize: 18, // 坐标轴名称文字的字体大小
fontWeight: 700 // 坐标轴名称文字字体的粗细
// padding: [0, 0, 0, 80] // 文字块的内边距，用来设置位置偏移
},
nameGap: 30, // 坐标轴名称与轴线之间的距离
axisLabel: {
// 坐标轴刻度标签的相关设置
color: '#fff', // 坐标轴文字颜色
fontSize: 14 // 坐标轴文字大小
}
},
series: [
{
name: legendName[0],
type: 'bar',
barWidth: 40,
data: seriesData[0].map((item) => item.value),
itemStyle: {
normal: {
color: barColor[0] // 柱子颜色
}
},
emphasis: {
focus: 'series'
}
},
{
name: legendName[1],
type: 'bar',
barWidth: 40,
data: seriesData[1].map((item) => item.value),
itemStyle: {
normal: {
color: barColor[1] // 柱子颜色
}
}
}
]
};
const legendselectchanged = (e) => {
setLegend(e.name);
};
const onEvents = {
'legendselectchanged': legendselectchanged
};
return (
<ReactEcharts
option={
option}
onEvents={
onEvents}
/>
)
};
export default Line;
水平柱状图
import React, {
useEffect, useState } from 'react';
import ReactEcharts from '../../../components/ECharts/ReactEcharts.js';
const HorizontalLine = (props) => {
const {
yAixsName, barColor, legendName, data, filterKey } = props;
const [legend, setLegend] = useState(legendName[0]); // 选中的legend
const [seriesData, setSeriesData] = useState([[], []]); // 表格数据
useEffect(() => {
...
// 初始化表格数据
setTimeout(() => {
setSeriesData([formatData1, formatData2]);
// 上面把数据分成了两种类型，如果只展示其中一种，传进来的 legendName['', name2] | legendName[name1, '']
setLegend(legendName[0] || legendName[1]);
}, 500);
}, [props]);
const option = {
tooltip: {
trigger: 'axis',
// axisPointer: {
// type: 'shadow'
// },
formatter: `{b}
${
yAixsName}：{c0}` // 隐藏最后一列背景列
},
legend: {
data: legendName, // 图例对应的series中的name字段
selected: {
// 防止点击legend动画数据异常
[legendName[0]]: legend === legendName[0],
[legendName[1]]: legend === legendName[1]
},
selectedMode: 'single',
animation: false,
right: 50, // 图例组件离容器上侧的距离
itemHeight: 30, // 图例高度
itemWidth: 50, // 图例宽度
itemGap: 20, // 每个图例之间的距离
textStyle: {
color: 'white', // 图例文字颜色
fontSize: 18 // 图例文字大小
}
},
grid: {
left: 250 // grid 组件离容器左侧的距离。
},
xAxis: {
type: 'value',
show: false // 隐藏X轴
// splitLine: {
// show: false // 取消网格线
// },
// axisTick: { // 坐标轴刻度相关设置
// show: false, // 是否显示坐标轴刻度
// },
},
yAxis: {
type: 'category',
// inverse: true, //倒叙
data: legend === legendName[0] ? seriesData[0].map(item => item.key) : seriesData[1].map(item => item.key),
name: yAixsName, // 坐标轴名称
nameTextStyle: {
// 坐标轴名称的文字样式。
color: '#fff', // 坐标轴名称的颜色
fontSize: 18, // 坐标轴名称文字的字体大小
fontWeight: 700, // 坐标轴名称文字字体的粗细
padding: [0, 0, 0, 80], // 文字块的内边距，用来设置位置偏移
},
nameGap: 30, // 坐标轴名称与轴线之间的距离
axisLabel: {
// 坐标轴刻度标签的相关设置
color: '#fff', // 坐标轴文字颜色
fontSize: 14, // 坐标轴文字大小
interval: 0 // 隔多少个才显示label文字， 0强制显示全部
// formatter: (value = '', index) => { // label文字格式化，换行输出
// let ret = ''; // 拼接加\n返回的类目项
// const maxLength = 4; // 每项显示文字个数
// const valLength = value.length; // X轴类目项的文字个数
// const rowN = Math.ceil(valLength / maxLength); // 类目项需要换行的行数
// if (rowN > 1) {
// // 如果类目项的文字大于3,
// for (let i = 0; i < rowN; i++) {
// let temp = ''; // 每次截取的字符串
// const start = i * maxLength; // 开始截取的位置
// const end = start + maxLength; // 结束截取的位置
// temp = `${value.substring(start, end)}\n`;
// ret += temp; // 凭借最终的字符串
// }
// return ret;
// } else {
// return value;
// }
// },
},
splitLine: {
show: false // 取消网格线
},
axisTick: {
// 坐标轴刻度相关设置
show: false // 是否显示坐标轴刻度
},
axisLine: {
show: false // 是否显示坐标轴轴线
}
// max: 20, // 坐标轴刻度最大值 2 => 0-1-2 -> 分成三份， 可用来减少柱子间的距离
},
series: [
{
name: legendName[0],
type: 'bar',
barWidth: 15, // 柱子高度 width 和 Gap 不能同时设置，设置width后减小间距可以把容器宽度减小
data: seriesData[0].map((item) => item.value),
itemStyle: {
normal: {
color: barColor[0], // 柱子颜色
label: {
// 图形上的文本标签
show: true,
position: 'right',
fontSize: 18,
color: '#fff'
}
}
}
},
{
name: legendName[1],
type: 'bar',
barWidth: 15, // 柱子高度
data: seriesData[1].map((item) => item.value),
itemStyle: {
normal: {
color: barColor[1], // 柱子颜色
label: {
// 图形上的文本标签
show: true,
position: 'right',
fontSize: 18,
color: '#fff'
}
}
}
},
{
// 设置背景阴影
type: 'bar',
barWidth: 15, // 柱子高度
barGap: '-100%',
data: legend === legendName[0] ? seriesData[0].map(() => 100) : seriesData[1].map(() => 100),
itemStyle: {
normal: {
color: 'rgba(239, 239, 239, 0.1)' // 柱子颜色
}
}
}
]
};
const legendselectchanged = (e) => {
setLegend(e.name);
};
const onEvents = {
'legendselectchanged': legendselectchanged
};
return <ReactEcharts option={
option} onEvents={
onEvents} />;
};
export default HorizontalLine;
折线 / 面积图
import React, {
useEffect, useState } from 'react';
import ReactEcharts from '../../../components/ECharts/ReactEcharts.js';
const Area = (props) => {
const {
yAixsName, lineColor, legendName, data, filterKey } = props;
const [legend, setLegend] = useState(legendName[0]); // 选中的legend
const [seriesData, setSeriesData] = useState([[], []]); // 表格数据
const option = {
// title: { // 标题组件
// text: '扫描率', // 主标题文本
// textStyle: {
// color: '#fff' // 主标题文字颜色
// }
// },
tooltip: {
trigger: 'axis',
// axisPointer: {
// type: 'shadow'
// },
formatter: `{b}
${
yAixsName}：{c0}`
},
grid: {
// left: 50 // grid 组件离容器左侧的距离。
},
color: [lineColor[0], lineColor[1]], // 修改图例颜色
legend: {
data: legendName, // 图例对应的series中的name字段
selected: {
// 防止点击legend动画数据异常
[legendName[0]]: legend === legendName[0],
[legendName[1]]: legend === legendName[1]
},
selectedMode: 'single',
icon: 'roundRect', // 显示图标类型
right: 50, // 图例组件离容器上侧的距离
itemHeight: 30, // 图例高度
itemWidth: 50, // 图例宽度
itemGap: 20, // 每个图例之间的距离
textStyle: {
color: 'white', // 图例文字颜色
fontSize: 18 // 图例文字大小
}
},
xAxis: {
type: 'category',
boundaryGap: true, // 坐标轴两边留白策略
// name: '坐标轴名称', // 坐标轴名称
data: legend === legendName[0] ? seriesData[0].map(item => item.key) : seriesData[1].map(item => item.key),
axisLabel: {
// 坐标轴刻度标签的相关设置
color: '#fff', // 坐标轴文字颜色
fontSize: 14, // 坐标轴文字大小
// interval: 0, // 隔多少个才显示label文字， 0强制显示全部
// padding: [0, 0, 0, 40], // 文字块的内边距
formatter: (value = '', index) => {
// label文字格式化，换行输出
let ret = ''; // 拼接加\n返回的类目项
const maxLength = 4; // 每项显示文字个数
const valLength = value.length; // X轴类目项的文字个数
const rowN = Math.ceil(valLength / maxLength); // 类目项需要换行的行数
if (rowN > 1) {
// 如果类目项的文字大于3,
for (let i = 0; i < rowN; i++) {
let temp = ''; // 每次截取的字符串
const start = i * maxLength; // 开始截取的位置
const end = start + maxLength; // 结束截取的位置
temp = `${
value.substring(start, end)}\n`;
ret += temp; // 凭借最终的字符串
}
return ret;
} else {
return value;
}
}
}
},
yAxis: {
type: 'value',
splitLine: {
show: false // 取消网格线
},
name: yAixsName, // 坐标轴名称
nameTextStyle: {
// 坐标轴名称的文字样式。
color: '#fff', // 坐标轴名称的颜色
fontSize: 18, // 坐标轴名称文字的字体大小
fontWeight: 700, // 坐标轴名称文字字体的粗细
},
nameGap: 30, // 坐标轴名称与轴线之间的距离
axisLabel: {
// 坐标轴刻度标签的相关设置
color: '#fff', // 坐标轴文字颜色
fontSize: 14 // 坐标轴文字大小
}
},
dataZoom: [ // 滑轮控制数据区域缩放
{
type: 'inside',
start: 0,
end: 50,
}
],
series: [
{
name: legendName[0],
data: seriesData[0].map((item) => item.value),
type: 'line',
areaStyle: {
// 区域填充样式
normal: {
// 开启面积图
// color: { // 填充的颜色
// ype: 'linear', // 线性渐变
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// { offset: 0, color: colorStops[0] }, // 0% 处的颜色
// { offset: 1, color: colorStops[1] } // 100% 处的颜色
// ],
// global: false // 缺省为 false
// }
color: lineColor[0]
}
},
itemStyle: {
normal: {
lineStyle: {
color: lineColor[0], // 折线颜色
width: 5 // 折线宽度
}
}
}
},
{
name: legendName[1],
data: seriesData[1].map((item) => item.value),
type: 'line',
areaStyle: {
// 区域填充样式
normal: {
// 开启面积图
// color: { // 填充的颜色
// ype: 'linear', // 线性渐变
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// { offset: 0, color: colorStops[0] }, // 0% 处的颜色
// { offset: 1, color: colorStops[1] } // 100% 处的颜色
// ],
// global: false // 缺省为 false
// }
color: lineColor[1]
}
},
itemStyle: {
normal: {
lineStyle: {
color: lineColor[1], // 折线颜色
width: 5 // 折线宽度
}
}
}
}
]
};
useEffect(() => {
...
// 初始化表格数据
setTimeout(() => {
setSeriesData([formatData1, formatData2]);
// 上面把数据分成了两种类型，如果只展示其中一种，传进来的 legendName['', name2] | legendName[name1, '']
setLegend(legendName[0] || legendName[1]);
}, 500);
}, [props]);
const legendselectchanged = (e) => {
setLegend(e.name);
};
const onEvents = {
'legendselectchanged': legendselectchanged
};
return <ReactEcharts option={
option} onEvents={
onEvents} />;
};
export default Area;
