Echarts 柱状折线图自动滚动展示

最新推荐文章于 2024-06-13 14:50:59 发布

Pinkh

最新推荐文章于 2024-06-13 14:50:59 发布

阅读量4.3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： react学习笔记文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/Shuiercc/article/details/109491018

本文介绍了如何使用Echarts实现柱状图和折线图的自动滚动展示，提供了完整的JavaScript代码示例，并展示了实际运行的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Echarts 柱状折线图自动滚动展示

完整代码如下

import React, {
   
    useEffect, useState } from 'react';
import Echarts from '../components/Echarts';
import echarts from 'echarts';
import {
   
    withRouter } from 'react-router-dom';

const titleStyle = {
   
   
    cursor: 'pointer',
    zIndex: 100
};

const data = [
    {
   
   
        name: '消费次数',
        value: [
            {
   
    name: '文典学院', value: 2.87 },
            {
   
    name: '数学科学学院', value: 2.93 },
            {
   
    name: '物理与材料科学学院', value: 2.99 },
            {
   
    name: '化学化工学院', value: 3.09 },
            {
   
    name: '计算机科学与技术学院', value: 2.95 },
            {
   
    name: '电子信息工程学院', value: 3.06 },
            {
   
    name: '电气工程与自动化学院', value: 3.05 },
            {
   
    name: '生命科学学院', value: 2.88 },
            {
   
    name: '资源与环境工程学院', value: 2.91 },
            {
   
    name: '文学院', value: 2.64 },
            {
   
    name: '历史系', value: 2.57 },
            {
   
    name: '哲学系', value: 2.53 },
            {
   
    name: '新闻传播学院', value: 2.51 },
            {
   
    name: '经济学院', value: 2.8 },
            {
   
    name: '商学院', value: 2.72 },
            {
   
    name: '外语学院', value: 2.77 },
            {
   
    name: '法学院', value: 2.65 },
            {
   
    name: '社会与政治学院', value: 2.6 }
        ]
    },
    {
   
   
        name: '消费金额',
        value: [
            {
   
    name: '文典学院', value: 28.42 },
            {
   
    name: '数学科学学院', value: 28.76 },
            {
   
    name: '物理与材料科学学院', value: 30.41 },
            {
   
    name: '化学化工学院', value: 30.04