【数据可视化】react异步加载数据并动态渲染echart柱状图

最新推荐文章于 2024-07-03 23:00:22 发布

椰卤工程师

最新推荐文章于 2024-07-03 23:00:22 发布

阅读量2.5k

点赞数

分类专栏：数据可视化 React echart 文章标签： react.js echarts javascript

本文链接：https://blog.csdn.net/weixin_42224055/article/details/122524007

版权

本文将实现的功能如下：

通过api异步获取数据并动态加载
根据数值的区间，柱状图单根柱子颜色展示不同
柱状图横坐标标题过长，超出部分身略号代替

一、引入echart库和加载数据的api

import * as echarts from 'echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import {
    getCharList } from '../../../services/map/api';

二、处理数据，绘制柱状图

const drawChart = async() =>{
   

    let chartOneXaxis = {
   } as any;
    let chartOneYaxis = {
   } as any;
    
    await getCharList().then((res: any) => {
   
      chartOneXaxis = Object.keys(res.data.PENDING_ALARM)
      chartOneYaxis = Object.values(res.data.PENDING_ALARM)
    });

    const chartDom1 = document.getElementById('linechart1')!;
    const myChart1 = echarts.init(chartDom1);
    myChart1.setOption({
   
      title: {
    text: '此柱状图标题' },
      tooltip: {
   },
      xAxis: {
   
        data: chartOneXaxis, //横坐标数据
        axisLabel: {
   
          show: