ECharts 蓝色系-荧光图标折线图01案例

ECharts 蓝色系-荧光图标折线图01案例

图表意义

本折线图案例展示了一周内不同路线的使用情况或数据统计。通过折线的上升和下降,可以直观地观察到每条路线的流量或数据变化趋势,从而进行分析和决策。

效果预览

效果图展示不同路线的数据统计和个性化图标

image-20240618155140594

代码配置

本案例使用的 ECharts 版本为 5.2.0,这是 ECharts 的一个稳定版本,提供了丰富的图表类型和配置选项。

以下是创建上述折线图的基础代码配置,包括 ECharts 初始化、数据准备和图表配置:

var myChart = echarts.init(document.getElementById('ECharts'));

var option = {
    backgroundColor: '#0e2147',
    grid: {
        left: '10%',
        top: '15%',
        bottom: '12%',
        right: '10%',
    },
    legend: {
        data: ['云篆山水路线', '昕博朗学校路线', '新华小学路线', '云锦五路路线'],
    },
    xAxis: {
        type: 'category',
        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '云篆山水路线',
            type: 'line',
            data: [123, 154, 234, 321, 120, 390, 634],
            itemStyle: {
                normal: {
                    color: '#00f8ff'
                }
            }
        },
        // 其他路线数据...
    ]
};

myChart.setOption(option);

完整代码

点我下载完整案例

结语

ECharts 折线图案例提供了一个动态且直观的方式来展示数据变化。通过个性化图标和色彩的运用,图表不仅信息丰富,而且视觉上更具吸引力。希望本案例能够帮助您更好地利用 ECharts 进行数据可视化

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/731703.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

DVWA 靶场 Authorisation Bypass 通关解析

前言 DVWA代表Damn Vulnerable Web Application,是一个用于学习和练习Web应用程序漏洞的开源漏洞应用程序。它被设计成一个易于安装和配置的漏洞应用程序,旨在帮助安全专业人员和爱好者了解和熟悉不同类型的Web应用程序漏洞。 DVWA提供了一系列的漏洞场…

Java宝藏实验资源库(8)多态、抽象类和接口

一、实验目的 理解面向对象程序的基本概念。掌握类的继承和多态的实现机制。熟悉抽象类和接口的用法。 二、实验内容、过程及结果 **1.Using the classes defined in Listing 13.1, 13.2, 13.3, write a test program that creates an array of some Circle and Rectangle in…

docker换源

文章目录 前言1. 查找可用的镜像源2. 配置 Docker 镜像源3. 重启 Docker 服务4. 查看dock info是否修改成功5. 验证镜像源是否更换成功注意事项 前言 在pull镜像时遇到如下报错: ┌──(root㉿kali)-[/home/longl] └─# docker pull hello-world Using default …

IPv6 address status lifetime

IPv6 地址状态转换 Address lifetime (地址生存期) 每个配置的 IPv6 单播地址都有一个生存期设置,该设置确定该地址在必须刷新或替换之前可以使用多长时间。某些地址设置为“永久”并且不会过期。“首选”和“有效”生存期用于指定其使用期限和可用性。 自动配置的…

基于WPF技术的换热站智能监控系统16--动态数据绑定

1、实现思路 1)实时读取到的数据绑定到前台UI控件上,这个通过MVVM模式实现,同时注意实时读取必须通过任务task异步方式,这就需要读取PLC数据。 2)UI控件的动作,如开或关水泵,必定能够将值写入…

常见的Wi-Fi蓝牙模组

在嵌入式领域,常见的Wi-Fi蓝牙模组确实包括多个知名品牌,如乐鑫、安信可和移远等,以前可能你听的最多的是ESP8266,不过今天讨论的是Wi-Fi蓝牙模组,而8266本身并不内置蓝牙功能,不在介绍范围。而拿到模块之后…

graalvm jdk和openjdk

下载地址:https://github.com/graalvm/graalvm-ce-builds/releases 官网: https://www.graalvm.org

设计模式4-模版方法

设计模式 重构获得模式重构的关键技法1. 静态转动态2. 早绑定转晚绑定3. 继承转组合4. 编译时依赖转运行时依赖5. 紧耦合转松耦合 组件协助动机模式定义结构 要点总结。 例子示例解释: 重构获得模式 设计模式的目的是应对变化,提高复用 设计模式的要点…

数据通信与网络(五)

交换机功能: 地址学习(端口/MAC地址映射表) 通信过滤(基于端口/MAC地址映射表) 生成树协议(断开环路) 隔离冲突域 生成树协议 隔离冲突域 交换机配置模式(用不同级别的命令对交换机进行配置) 普…

Zookeeper原理

Zookeeper监听原理 监听原理详解 (1)首先要有一个main()线程 (2)在main线程中创建Zookeeper客户端,这时就会创建两个线程,一个负责网络连接通信(connet),一个负责监听(listener) 。 &#xf…

PHP转Go系列 | ThinkPHP与Gin的使用姿势

大家好,我是码农先森。 安装 使用 composer 进行项目的创建。 composer create-project topthink/think thinkphp_demo使用 go mod 初始化项目。 go mod init gin_demo目录 thinkphp_demo 项目目录结构。 thinkphp_demo ├── LICENSE.txt ├── README.md …

【STM32】时钟树系统

1.时钟树简介 1.1五个时钟源 LSI是低速内部时钟,RC振荡器,频率为32kHz左右。供独立看门狗和自动唤醒单元使用。 LSE是低速外部时钟,接频率为32.768kHz的石英晶体。这个主要是RTC的时钟源。 HSE是高速外部时钟,可接石英*/陶瓷谐振…

Ubuntu 22.04安装 docker

安装过程和指令 # 1.升级 apt sudo apt update # 2.安装docker sudo apt install docker.io docker-compose # 3.将当前用户加入 docker组 sudo usermod -aG docker ${USER} # 4. 重启 # 5. 查看镜像 docker ps -a 或者 docker images # 6. 下载镜像 docker pull hello-world …

动态创建接口地址

和SpringBoot版本有关系 这里用的boot 2.2.2

嵌入式学习——数据结构(队列)——day49

1. 队列 1. 先进先出 2. 缓冲区——先进先出的队列 高速设备和低速设备利用缓冲区进行协调匹配 3. 串口数据的通信利用队列进行协调 4. 顺序队列——循环队列(非重点) 5. 链式队列 5.1 创建队列 5.2 入队 5.3 出队 5.4 清空队列 5.5 销毁指针 6.…

[FlareOn5]Ultimate Minesweeper

一切题目,可以运行的,首先就要自己运行一次 运行完毕你会发现这是个扫雷游戏 net dnspy打开 一般没有特别的 我们都是点这花括号 这有个getkey 一眼加加密 然后可以三个方向:动调,改文件,静态找数据写加密脚本 简…

Web渗透:XSS-DOM-based XSS

DOM-based XSS(基于DOM的跨站脚本攻击)是一种XSS攻击类型,其特点是恶意脚本通过操作文档对象模型(DOM)直接在客户端执行,而无需经过服务器的处理。这种攻击主要利用客户端JavaScript代码中的漏洞&#xff0…

C++入门超详细解释

C入门 文章目录 C入门框架命名空间 namespace &#xff08;不常用&#xff09;命名空间的使用方式&#xff08;三种&#xff09;using namespace std;\<iostream>coutendlcincout的使用命名冲突缺省参数&#xff08;省钱的省&#xff09;缺省参数分类全缺省参数半缺省参数…

使用阿里开源的Spring Cloud Alibaba AI开发第一个大模型应用

背景 前段时间看到Spring推出了SpringAI&#xff0c;可以方便快速的接入ChatGPT等国外的大模型&#xff0c;现在阿里巴巴也紧追脚步推出了Spring Cloud Alibaba AI&#xff0c;Spring Cloud Alibaba AI 目前基于 Spring AI 0.8.1 版本 API 完成通义系列大模型的接入。通义接入…

Golang | Leetcode Golang题解之第172题阶乘后的零

题目&#xff1a; 题解&#xff1a; func trailingZeroes(n int) (ans int) {for n > 0 {n / 5ans n}return }