Echarts中柱状图完成横向布局

效果

代码

javascript 复制代码
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 RightTop

less

css 复制代码
.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

相关推荐
你的人类朋友25 分钟前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手42 分钟前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
一只小灿灿1 小时前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉
前端小趴菜051 小时前
react状态管理库 - zustand
前端·react.js·前端框架
Jerry Lau2 小时前
go go go 出发咯 - go web开发入门系列(二) Gin 框架实战指南
前端·golang·gin
我命由我123452 小时前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js
0wioiw02 小时前
Flutter基础(前端教程③-跳转)
前端·flutter
Jokerator2 小时前
深入解析JavaScript获取元素宽度的多种方式
javascript·css
落笔画忧愁e2 小时前
扣子Coze纯前端部署多Agents
前端