这种效果 。 后面的数据可以带 可以不带。
先上代码
import React, { Component, useState, useEffect, useMemo } from 'react';
import * as echarts from 'echarts';
import { DatasetComponent, GridComponent, VisualMapComponent } from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import {
Row,
Col,
}from 'antd'
echarts.use([DatasetComponent, GridComponent, VisualMapComponent, BarChart, CanvasRenderer]);
const Matechart = props => {
let WaitPrice = props.WaitPrice - 0;
let ShouldPrice = props.ShouldPrice - 0;
let AlreadyPrice = props.AlreadyPrice - 0;
let max = 0
max = Math.max(WaitPrice , ShouldPrice , AlreadyPrice ,
props.noAlreadyPrice,props.noWaitPrice , props.noShouldPrice )
WaitPrice < 0 ? WaitPrice = 0 : WaitPrice
ShouldPrice < 0 ? ShouldPrice = 0 : ShouldPrice
AlreadyPrice < 0 ? AlreadyPrice = 0 : AlreadyPrice
useEffect(() => {
var chartDom = document.getElementById('main2');
var myChart = echarts.init(chartDom);
let option = {
dataset: {
source: [[WaitPrice, '待回'], [AlreadyPrice, '已回'], [ShouldPrice, '应回']],
},
grid: {
containLabel: false,
// right:'10%',
width:'60%',
},
xAxis: { name: 'amount', show: false, boundaryGap: [0, 0] },
yAxis: [
{
type: 'category',
data: ['待回', '已回', '应回'],
axisLabel: {
textStyle: {
fontWeight: 'bolder',
fontSize: 16,
color: 'black',
},
},
axisLine: { show: false },
axisTick: [
{
show: false,
},
],
max: 2,
},
{
type: 'category',
// inverse: true,
axisTick: 'none',
axisLine: 'none',
data: [WaitPrice, AlreadyPrice, ShouldPrice],
show: true,
axisLabel: {
textStyle: {
color: 'white',
fontSize: '12',
},
},
},
],
series: [
{
type: 'bar',
zlevel: 1,
encode: {
// Map the "amount" column to X axis.
x: 'amount',
// Map the "product" column to Y axis
y: 1,
},
itemStyle: {
normal: {
color: function(params) {
var colorList = ['rgba(255,161,161)', 'rgba(158,181,255)', 'rgba(221,229,255)'];
return colorList[params.dataIndex];
},
barBorderRadius: [3],
label: {
show: true, //开启显示
position: 'right',
// distance :15,
padding: [3, 10, 10, 5],
formatter: row => {
if (row.data[0]) {
return (row.data[0].toFixed() - 0).toLocaleString() + '元';
}else if ( row.data[0] === 0 ){
if( row.data[1] === '应回' ) return ( props.ShouldPrice !==null ? (props.ShouldPrice.toFixed()- 0) .toLocaleString() + '元' : 0 )
if( row.data[1] === '待回' ) return ( props.WaitPrice !== null ? (props.WaitPrice.toFixed()- 0) .toLocaleString() + '元' : 0 )
if( row.data[1] === '已回' ) return ( props.AlreadyPrice !== null ? (props.AlreadyPrice.toFixed()- 0) .toLocaleString() + '元' : 0 )
}
},
textStyle: {
//数值样式
color: 'black',
fontSize: 16,
fontWeight: '700',
},
},
},
},
barWidth: 20,
},
{
name: '背景',
type: 'bar',
barWidth: 20,
barGap: '-100%',
data: [max ],
itemStyle: {
normal: {
color: 'rgba(255,255,255 , 0)',
barBorderRadius: 0,
},
},
},
],
};
option && myChart.setOption(option);
});
return (
<Row gutter={[24]}>
<Col xs={8} sm={22} xl={24} xxl={24} >
<div
id="main2"
style={
{
minWidth: '100%',
height: '280px',
}}
/>
</Col>
</Row>
);
};
export default Matechart;
这个其实也不难 就是不太懂的有点繁琐。 首先我是先去最大值 ,作为进度条的最大值,
然后就是y轴是两条轴, 第二条是透明的 所以设置的白色 为了让看不到。
itemStyle 是为了显示后面的数据 如不不用 你可以删除 。其次我加了判断 ,因为如果数据是负的话 ,他会往后走 ,
形成这样的格局 , 就很丑 于是当他数据为负的时候 就不让他的进度条显示。