Echarts带时间轴的复杂动态可视化案例

最新推荐文章于 2024-07-29 19:53:51 发布

寧三一

最新推荐文章于 2024-07-29 19:53:51 发布

阅读量1.9k

点赞数 5

文章标签：可视化 js

本文链接：https://blog.csdn.net/weixin_51967583/article/details/115551776

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时间轴可视化图</title>
    <script src="../../js/echarts.min.js"></script>
    <script src="../../js/jquery.min.js"></script>
</head>
<body>

<div id="main" style="width: 1200px;height: 800px"></div>

<script type="text/javascript">

    // 第一部分
    // 定义一个rankData的变量存放数据，他是一个列表，其中有多个字典，每个字典代表了某天的数据情况
    // 内容包括日期（date），分类（category），具体数据（data-包含每个商品的累计销量情况）
    var rankData = [
        {
            "date": "2020-03-14",
            "category": "2020-03-14",
            "data": [
                {'name': 'A商品', 'value': 6509},
                {'name': 'B商品', 'value': 4791},
                {'name': 'C商品', 'value': 3447},
                {'name': 'D商品', 'value': 2906},
                {'name': 'E商品', 'value': 2611},
            ]
        },
        {
            'date': '2020-03-13',
            'category': '2020-03-13',
            'data': [
                {'name': 'A商品', 'value': 4874},
                {'name': 'B商品', 'value': 3662},
                {'name': 'D商品', 'value': 2431},
                {'name': 'C商品', 'value': 2160},
                {'name': 'E商品', 'value': 2101},
            ]
        },
        {
            'date': '2020-03-12',
            'category': '2020-03-12',
            'data': [
                {'name': 'A商品', 'value': 3751},
                {'name': 'B商品', 'value': 3398},
                {'name': 'D商品', 'value': 2129},
                {'name': 'C商品', 'value': 2110},
                {'name': 'E商品', 'value': 2088},
            ]
        },
        {
            'date': '2020-03-11',
            'category': '2020-03-11',
            'data': [
                {'name': 'A商品', 'value': 2642},
                {'name': 'B商品', 'value': 2332},
                {'name': 'D商品', 'value': 1095},
                {'name': 'C商品', 'v