eCharts实现数据点从左至右浮动效果

最新推荐文章于 2024-12-25 09:40:43 发布

StupigYy

最新推荐文章于 2024-12-25 09:40:43 发布

阅读量714

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_36384745/article/details/126171722

版权

本文展示了如何使用ECharts库创建一个数据点浮动效果的图表。通过设置图标样式、线型效果和动态周期，实现了从左至右的数据点间的平滑浮动，增强了数据可视化的动态展示。主要涉及的技术包括ECharts配置、数据处理和图表样式定制。

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

eCharts数据点浮动效果

import React,{Component} from 'react';
import * as echarts from 'echarts';
import styles from '../One/One.module.scss';

export default class RightEcharts extends Component {
    componentDidMount(){
        var chartDom = document.getElementById('ecomomy');
        var myChart = echarts.init(chartDom);
        var option;
        var data = [260, 600, 1100, 1600, 1150, 750, 500, 1050, 1490, 810, 820, 1498, 620];
        var json = {
            chart0: {
                xcategory: [
                    '12:00','13:00','14:00','15:00','16:00','17:00','18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'                ],
                low: data,
                lowLine: [],
            },
        };
        var zrUtil = echarts.util;
        zrUtil.each(json.chart0.xcategory, function (item, index) {
            json.chart0.lowLine.push([
                {
                    coord: [index, json.chart0.low[index]],
                },
                {
                    coord: [index + 1, json.chart0.low[index + 1]],
                },
            ]);
        });

        myChart.setOption({
            grid:{
                bottom:'18%'
            },
            xAxis: {
                type: 'category',
                data: ['12:00','13:00','14:00','15:00','16:00','17:00','18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],
                axisLine: {
                    show: true,
                    onZero: true,
                    symbol: "none",
                    lineStyle: {
                        color: "rgba(28, 94, 136, 1)",
                        width: 4,
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    inside: false,
                    margin: 16,
                    fontFamily: "PingFangSC-Regular",
                    fontSize: 22,
                    rotate: -45,
                    color: "rgba(255, 255, 255, 1)"
                },
            },
            yAxis: {
                splitNumber: 5,
                axisTick: {
                    show: false
                },
                type: 'value',
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#1A5A91 ",
                        width: 3,
                    },
                },
                axisLabel: {
                    show: true,
                    inside: false,
                    margin: 16,
                    fontFamily: "DIN",
                    fontSize: 23,
                    color:'#fff'
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(26, 90, 145, 1)",
                        width:3,
                        type: "dashed",
                    },
                }
            },
            series: [
                {
                    type: 'line',
                    smooth:false,
                //数据点呈现的图片或样式
                    symbol: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAeCAYAAADU8sWcAAAD9ElEQVRIiaWXe4iOeRTHP/OYm1mMNoTYkFtRrFjRui+KlrCKf/ljQ2trpQgrItnkkj82uUSx7sLKuFvsSru0Fruby6xdkeQ2jJl3zFVn+/50enqN95331DPP1Pt7zvfcvuecX9aci3WkKG2BCcBQoCfQBigESoFHwN/AOeAgUJyKyuwUznwMLAJGAleBP4BfBFgGFAAtgU7AGOBb4DdgKXC+oeCmdBUwFTgETAdKgNdAFVADWNiygP9k1FGgCTAK2A+cAWYCT9MB7wAcBl4CXwEPgVdABVAJVMfAG+nJ1Td7BDwNuAKMA66lAt5ZuTsN7JK3Blwe87pW4CaRwHOAPKCxDF2nVJzR+9f6wK2AioATwG7gmTx5JeBKAdc4YOR9JH0V7qwZ+qP+t0j2V4qSgm/Qj3sE/FzACRdu87gL0Atoocj8CVwXmH9CdE4C7YEdwKBguAe3IhkOzJLCF6JRuYBrlbvFolpc7gKrgU3yPEQmSzjbgbWqg80hV0GWAT8AjwVa5jy2XO4E9r4D2KQjsF5hbiYDEtJTKmc2i4q5Htxy8ZGKrEzeJpzHFq6J7wCNy2fAERVelWqgXHqvSu/nHnwKcEGHKmJVPSMcTkP6AQtUI1UuCqb/rHrHW/AR4qMHrlZ4FqYJHGQ20MoZUCn9l4FhVguR8tkNuOlAQ1WPUEU3RPKBL6SnxhnxSE63tz/tRKc4h2tVC5lIH6erxhnxxGosUi9OOE7WOZq0zhC8bUxnMMRyXxjJkkh8xL0R3zORUqfT6zfeV0bidTMZELlWae9/MwQvdsCRG0CG9yxS/CtUWNl6giGnMgQvcroaSXee5v+tQLWLQG/9kKNDdvg2cKyBwL8DP7tplyPq9tDWUxrArSUOFD3ydShHH36j1piOGHO+dvn1o/ZT4b1tMtazu6rFFuhQrj4sVgcsSxHcCvhL4JILc2Pp/RAYAGzz4CWaRlNFvQ90OKTBloEhGpv1iRXoWM0C763pa6qmUxQWTD9SlykXnyhXYVVC4bsB9AUm6bEG0lwRuaY9b7try3kO1Kq7u5bQvgHQg5coXFuA+67ThUoNPf8AsE/f1Dn+hnP5zuOmMtCazVxgPnAnGThaddZo7V2kMIZqTbjVKNkaFaiU60JdqP1+scbs9x4s2QK5XB+v1HNdnoRxW+UGT11sfwt5LpDXtozOA37SFsz7wNEYvaMoHBcbSuT96ySrc+R4HMI9TrWxAvguFql6wU226sZhBmzUEmge3Iutz1kuNa11nRoN/AUMTravpwJu8g8wXlcmK8Yl8sA2XGvLYShZa7bt1MJtuZ38vquSSToXxf/Pqz3aY2BmvHn/QDS1K1OgZ/0CvAFB/zmnJEEQqQAAAABJRU5ErkJggg==",
                    symbolSize: 20,
                    itemStyle: {
                        color: "rgba(115, 198, 255, 1)",
                        borderColor: "rgba(107, 247, 234, 1)"
                    },
                    areaStyle: {
                        opacity: 1,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgba(56, 155, 224, 1)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(0,0,0,0)'
                            }
                        ])
                    },
                    data: data,
                },
                {
                    type: 'lines',
                    coordinateSystem: 'cartesian2d',
                    zlevel: 1,
                    smooth: true,
                    symbol: 'circle',
                    effect: {
                        show: true,
                        smooth: true,
                        period: 2,
                        symbolSize: 20,
                    },
                    lineStyle: {
                        normal: {
                            color: "rgba(115, 198, 255, 1)",
                            width: 0,
                            opacity: 0,
                            curveness: 0,
                        },
                    },
                    data: json.chart0.lowLine,
                },
            ]
        });
    }

    render() {
        return (
        <div className={styles.oneBox}>
            <div id='ecomomy' style={{height:360,marginTop:79}} className={styles.oneEcharts}></div>
        </div>
        )
    }
}

数据点的颜色样式图片均可调整，实现从左至右的数据点间动态浮动，实现数据可视化动态效果。