Echarts中柱状图完成横向布局
效果
代码
import React, { useEffect, useRef } from 'react'
import './index.less'
import * as echarts from 'echarts';
const RightTop = (props: any) => {
const echarts_ref = useRef<HTMLDivElement | null>(null);
useEffect(() => {
if (echarts_ref.current) {
const myChart = echarts.init(echarts_ref.current);
let colorList = ['#FF4B01', '#FF7B00', '#FFE823', '#fff', '#fff', '#fff']
let result = props.teamData
const option = {
color: colorList,
tooltip: {
show: false,
trigger: 'item',
borderColor: 'rgba(3, 11, 44, 0.5)',
textStyle: {
color: '#9bb2de'
}
},
legend: {
show: false
},
grid: {
left: '0%', // 向左扩展
right: '12%', // 向右扩展
top: '5%', // 向上扩展
bottom: '5%' // 向下扩展
},
xAxis: [
{
splitLine: {
show: false
},
type: 'value',
show: false
}
],
yAxis: [
{
splitLine: {
show: false
},
axisLine: {
show: false
},
type: 'category',
axisTick: {
show: false
},
}
],
series: [
{
name: '',
type: 'bar',
barWidth: 6, // 柱子宽度
MaxSize: 0,
showBackground: false,
borderRadius: [30, 30, 30, 30],
// 名称---
label: {
show: true,
offset: [10, -20], // 将标签上移20个像素
color: '#ccc',
fontWeight: 400,
position: 'left',
align: 'left',
fontSize: 16,
fontFamily: 'YouSheBiaoTiHei',
formatter: function (params) {
return params.data.name
}
},
data: result.map((item, index) => {
return {
name: item.name,
value: item.value,
itemStyle: {
borderRadius: [30, 30, 30, 30],
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: '#0F1F45'
},
{
offset: 1,
color: colorList[index]
}
]
}
}
}
})
},
{
name: '',
type: 'bar',
barGap: '-100%',
barWidth: 4,
showBackground: false,
borderRadius: [30, 30, 30, 30],
label: {
position: 'right',
distance: 4,
show: true,
offset: [0, 0],
formatter: function (params) {
return '{a|' + params.data.value + '}'
},
rich: {
align: 'left',
a: {
color: '#00D1FF',
fontSize: 20,
fontFamily: 'UnidreamLED',
fontWeight: 500
},
}
},
data: result.map((item, index) => {
return {
name: item.name,
value: item.value,
itemStyle: {
borderRadius: [30, 30, 30, 30],
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: '#0F1F45'
},
{
offset: 1,
color: colorList[index]
}
]
}
}
}
})
}
]
}
myChart.setOption(option);
}
}, [props])
return (
<div className='right-top'>
<div className='right-top-big'>
<div className='right-top-team'>团队</div>
</div>
{
props.teamData.length > 0 && props.teamData ?
<div className='right-top-chart' ref={echarts_ref}></div>
:
<div style={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: 18 }}>暂无数据</div>
}
</div>
)
}
export default RightTopless
.right-top {
width: 500px;
height: 290px;
margin-bottom: 5px;
.right-top-big {
display: flex;
align-items: center;
justify-content: center;
width: 500px;
.right-top-team {
width: 320px;
height: 24px;
margin-top: 14px;
color: #ffffff;
font-weight: 400;
font-size: 22px;
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
font-style: normal;
line-height: 20px;
letter-spacing: 1px;
text-align: center;
background: linear-gradient(
90deg,
rgba(3, 157, 229, 0) 0%,
rgba(57, 222, 255, 0.26) 50%,
rgba(3, 157, 229, 0) 100%
);
border-radius: 0px 0px 0px 0px;
}
}
.right-top-chart{
width: 500px;
height: 270px;
}
}
技术栈
React + TypeScript + Less + Echarts
原文地址：https://blog.csdn.net/GAGGAAAAA/article/details/143961191
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！