1、横向
export const focusbarChartConfig = {
option: {
grid: {
top: '5%',
left: '-80rem',
right: '10%',
bottom: '-10rem',
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
},
formatter: (v) => {
return `${v[0].name}:${v[0].value}`;
},
},
legend: {
show: false,
x: 'right', // 'center' | 'left' | {number},
y: 'top', // 'center' | 'bottom' | {number}
textStyle: { color: '#fff' },
itemWidth: 15,
itemHeight: 15,
icon: 'rect',
},
yAxis: [
{
type: 'category',
// axisTick: {
// show: false,
// },
axisLine: {
show: false,
},
axisTick: {
alignWithLabel: true,
show: false,
},
axisLabel: {
show: true,
overflow: 'truncate',
zlevel: 2,
color: '#fff',
width: 90,
margin: 100,
align: 'left',
},
splitLine: {
show: false,
},
splitArea: {
show: false,
},
data: [],
},
{
type: 'category',
// inverse: true,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
// inside: true,
formatter: '{value}人',
color: '#fff',
},
data: [],
},
],
xAxis: [
{
show: false,
},
],
series: [
{
type: 'bar',
hoverAnimation: false,
barCategoryGap: 30,
barWidth: 7,
emphasis: {
disabled: true,
},
label: {
show: false,
position: 'right',
color: '#22d285',
},
itemStyle: {
normal: {
borderRadius: 10,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: 'rgb(34,210,133,1)',
},
{
offset: 1,
color: 'rgb(55,185,255,1)',
},
]),
},
},
data: [],
},
{
type: 'bar',
animation: false,
emphasis: {
disabled: true,
},
barGap: '-100%',
zlevel: -5,
itemStyle: {
normal: {
color: 'rgb(136,185,255,0.5)',
borderRadius: 10,
},
},
barCategoryGap: 30,
barWidth: 7,
},
],
},
};
const [focusPerson, setFocusPerson] = useState(focusbarChartConfig);
const getData = ()=>{
const focusData = [
{ value: 12, name: '刑满释放人员' },
{ value: 3, name: '社区矫正人员' },
{ value: 4, name: '肇事肇祸等严重精神障碍患者' },
{ value: 66, name: '吸毒人员' },
{ value: 4, name: '艾滋病危险人员' },
{ value: 2, name: '邪教人员' },
{ value: 2, name: '重点信访人员' },
{ value: 7, name: '重点青少年' },
];
const focusvalue = focusData.reduce((acc, cur, index) => {
acc.push(cur.value);
return acc;
}, []);
const focuslabel = focusData.reduce((acc, cur, index) => {
acc.push(cur.name);
return acc;
}, []);
focusPerson.option.series[0].data = focusvalue;
focusPerson.option.yAxis[0].data = focuslabel;
focusPerson.option.yAxis[1].data = focusvalue;
let tmparr = [];
const max = Math.max.apply(null, focusvalue);
for (let i = 0; i < focusvalue.length; i++) {
tmparr[i] = max || 0;
}
focusPerson.option.series[1].data = tmparr;
setFocusPerson({ ...focusPerson });
}
2、竖状
export const focusbarChartConfig = {
option: {
grid: {
top: '5%',
left: '1%',
right: '1%',
bottom: '2%',
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
},
formatter: (v) => {
return `${v[0].name}:${v[0].value}`;
},
},
legend: {
show: false,
x: 'right', // 'center' | 'left' | {number},
y: 'top', // 'center' | 'bottom' | {number}
textStyle: { color: '#fff' },
itemWidth: 15,
itemHeight: 15,
icon: 'rect',
},
xAxis: [
{
type: 'category',
// axisTick: {
// show: false,
// },
axisLine: {
show: false,
},
axisTick: {
alignWithLabel: true,
show: false,
},
axisLabel: {
boundaryGap: false, // 不留白,从原点开始
show: true,
overflow: 'truncate',
zlevel: 2,
color: '#fff',
interval: 0,
align: 'center',
formatter: function (params) {
var newParamsName = '';
var paramsNameNumber = params.length;
var provideNumber = 4; //一行显示几个字
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
//两行展示
for (var p = 0; p < 2; p++) {
var tempStr = '';
var start = p * provideNumber;
var end = start + provideNumber;
if (p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
tempStr = params.substring(start, end) + '\n';
}
newParamsName += tempStr;
}
//换行时....
// newParamsName = newParamsName.substring(0, newParamsName.length - 1) + '...' + ' ';
console.log(p);
if (rowNumber > 2) {
newParamsName = newParamsName.substring(0, 2 * provideNumber) + '...' + ' ';
} else {
newParamsName = newParamsName;
}
} else {
newParamsName = params;
}
return newParamsName;
},
},
splitLine: {
show: false,
},
splitArea: {
show: false,
},
data: [],
},
],
yAxis: [
{
show: false,
},
],
series: [
{
type: 'bar',
hoverAnimation: false,
barCategoryGap: 30,
barWidth: 18,
emphasis: {
disabled: true,
},
label: {
show: false,
position: 'right',
color: '#22d285',
},
itemStyle: {
normal: {
borderRadius: 10,
color: 'rgb(36,216,205,1)',
},
},
data: [],
},
{
type: 'bar',
animation: false,
emphasis: {
disabled: true,
},
barGap: '-100%',
zlevel: -5,
itemStyle: {
normal: {
color: 'rgb(237,238,240,1)',
borderRadius: 10,
},
},
barCategoryGap: 30,
barWidth: 18,
},
],
},
};
const [focusPerson, setFocusPerson] = useState(focusbarChartConfig);
const getData = ()=>{
const focusData = [
{ value: 12, name: '刑满释放人员' },
{ value: 3, name: '社区矫正人员' },
{ value: 4, name: '肇事肇祸等严重精神障碍患者' },
{ value: 66, name: '吸毒人员' },
{ value: 4, name: '艾滋病危险人员' },
{ value: 2, name: '邪教人员' },
{ value: 2, name: '重点信访人员' },
{ value: 7, name: '重点青少年' },
];
const focusvalue = focusData.reduce((acc, cur, index) => {
acc.push(cur.value);
return acc;
}, []);
const focuslabel = focusData.reduce((acc, cur, index) => {
acc.push(cur.name);
return acc;
}, []);
focusPerson.option.series[0].data = focusvalue;
focusPerson.option.xAxis[0].data = focuslabel;
focusPerson.option.series[0].data = focusvalue;
let tmparr = [];
const max = Math.max.apply(null, focusvalue);
for (let i = 0; i < focusvalue.length; i++) {
tmparr[i] = max || 0;
}
focusPerson.option.series[1].data = tmparr;
setFocusPerson({ ...focusPerson });
}