当前位置：首页 > news >正文

[echarts]多个柱状图及图例

news 2025/8/2 16:32:44

前言

实现多个柱状图功能，并设置多个图例样式，并定时刷新数据

react引入echarts

import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';
import DeviceApi from '@/api/screen/DeviceApi';const CenterDeviceSummary = (props) => {const chartRef = useRef(null);const initEcharts = () => {if (chartRef.current) {const chart = echarts.init(chartRef.current);const option = {tooltip: { trigger: 'axis',axisPointer: {label: {backgroundColor: '#6a7985',},},},grid: {top: '20%',left: '3%',right: '8%',bottom: '10%',containLabel: true},color: ['#1FFFD9', '#3662EC', '#8937F4', '#2FBCEB'],  //设置图例的四个颜色legend: {orient: 'horizontal',x: 'center',   //设置图例的位置y: 'top',top: 12,padding: 5,itemGap: 10,itemWidth: 10,itemHeight: 10,icon: 'roundRect',data: ['在线', '离线', '占用', '空闲'],   // 这里要跟series的name对上，否则图例显示不出来textStyle: {color: '#FFFFFF',fontSize: '0.8rem'},},xAxis: {type: 'category',data: [],axisLabel: {interval: 0,width: 10,textStyle: {color: '#FFFFFF',fontSize: '0.8rem',},formatter: function (value) {  //设x轴显示文字的大小，大于4个字符就换行let result = '';for (let i = 0; i < value.length; i += 4) {result += value.substr(i, 4) + '\n';}return result;}},axisLine: {show: false},axisTick: {show: false},splitLine: {show: false}},yAxis: {type: 'value',axisLabel: {  // y轴文字的样式formatter: '{value}',textStyle: {color: '#FFFFFF',fontSize: '0.8rem'},},splitLine: {  //y轴轴线的样式show: true,lineStyle: {color: 'rgba(159,255,253,0.1)',width: 1,type: 'solid'}}},series: [{type: 'bar',data: [],name: '在线',barWidth: 6,itemStyle: {borderRadius: 3,   //柱子的圆角color: function (params) {  //柱子线性渐变return new echarts.graphic.LinearGradient(0, 0, 0, 1,[{ offset: 0, color: '#1FFFD9' },{ offset: 1, color: 'rgba(31,255,218,0)' }],false);},},barGap: '30%'  //柱子间隔},{type: 'bar',data: [],name: '离线',barWidth: 6,itemStyle: {borderRadius: 3,color: function (params) {return new echarts.graphic.LinearGradient(0, 0, 0, 1,[{ offset: 0, color: '#3662EC' },{ offset: 1, color: 'rgba(54,98,236,0)' }],false);},},barGap: '40%'},{type: 'bar',data: [],name: '占用',barWidth: 6,itemStyle: {borderRadius: 3,color: function (params) {return new echarts.graphic.LinearGradient(0, 0, 0, 1,[{ offset: 0, color: '#8A38F5' },{ offset: 1, color: 'rgba(138,56,245,0)' }],false);},},barGap: '40%'},{type: 'bar',data: [],name: '空闲',barWidth: 6,itemStyle: {borderRadius: 3,color: function (params) {return new echarts.graphic.LinearGradient(0, 0, 0, 1,[{ offset: 0, color: '#2FBCEB' },{ offset: 1, color: 'rgba(47,188,235,0)' }],false);},},barGap: '40%'}],};chart.setOption(option);const fetchData = async () => {try {const response = await DeviceApi.getSummaryByOrg();chart.setOption({xAxis: {data: response.map(item => item.orgName)},series: [{data: response.map(item => item.connectNum)},{data: response.map(item => item.disconnectNum)},{data: response.map(item => item.occupyNum)},{data: response.map(item => item.releaseNum)}]});} catch (error) {console.error('Error fetching data:', error);}}fetchData();const intervalId = setInterval(fetchData, 60 * 60 * 1000);// 当窗口大小改变时，更新图表window.addEventListener('resize', chart.resize);// 清理函数return () => {window.removeEventListener('resize', chart.resize);clearInterval(intervalId);chart.dispose();};}};useEffect(() => {initEcharts();}, []);return (<div ><div ref={chartRef} style={{ height: '100%', width: '100%' }} /></div>)
}export default CenterDeviceSummary;