Echarts(1)

news2025/7/11 11:48:13

Echarts官方文档----快速上手 - Handbook - Apache ECharts

1.1ECharts的快速上手

ECharts 的入门使用特别简单, 5分钟就能够上手. 他大体分为这几个步骤

步骤1引入 echarts.js 文件

该文件获取方式可通过:在 https://www.jsdelivr.com/package/npm/echarts 选择 dist/echarts.js,点击并保存为 echarts.js 文件。

<script src="./echarts.js"></script>

步骤2准备一个呈现图表的盒子

这个盒子通常来说就是我们熟悉的 div ,这个 div 决定了图表显示在哪里

<body>
     <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    
</body>

步骤3:初始化 echarts 实例对象

在这个步骤中, 需要指明图表最终显示在哪里的DOM元素

 //初始化 echarts 实例对象 
  var myChart = echarts.init(document.getElementById('main'));

步骤4准备配置项

这步很关键,我们最终的效果,到底是显示饼图还是折线图,基本上都是由配置项决定的

 // 指定图表的配置项和数据
    var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

步骤5将配置项设置给 echarts 实例对象

// 使用刚指定的配置项和数据显示图表。
 myChart.setOption(option);

最终效果和完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./echarts.js"></script>

<body>
     <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    
</body>

<script>
    //初始化 echarts 实例对象 
    var myChart = echarts.init(document.getElementById('main'));
    
    // 指定图表的配置项和数据
    var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);


    
</script>
</html>

1.2 相关配置讲解

xAxis:直角坐标系 中的 x 轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的呈现

yAxis:直角坐标系 中的 y 轴, 如果 type 属性配置为 value , 那么无需配置 data , 此时 y 轴会自动去series 下找数据进行图表的绘制

series:系列列表。每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据

配置项都是以键值对的形式存在, 并且配置项有很多, ECharts 的学习大多是针对于这些配置项的, 对于配置项的学习, 大家可以不用死记硬背, 需要的时候查一查官方文档即可。

网址: https://echarts.apache.org/zh/option.html  
 

2.ECharts常用图表

2.1 柱状图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./echarts.js"></script>

<body>
    <div id="main" style="width: 600px;height:400px"></div>
    <script>
        var myCharts = echarts.init(document.getElementById('main'))

        var xDataArr = [' 张三 ', ' 李四 ', ' 王五 ', ' 闰土 ', ' 小明 ', ' 茅台 ', ' 二妞 ', ' 大强 ']
        var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
        var option = {

            title: {
                text: "ECharts 入门示例",
                textStyle: { color: 'red' }
            },
            tooltip: {},
            legend: {
                data: ['销量1']
            },
            xAxis: {
                type: 'category',
                data: xDataArr
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '销量1',
                    type: 'bar',
                    data: yDataArr
                }
            ]
        }
        var option = myCharts.setOption(option);
    </script>

</body>

</html>

注意 :

坐标轴 xAxis 或者 yAxis 中的配置 , type 的值主要有两种 : category 和 value

(1)如果 type属性的值为 category , 那么需要配置 data 数据 , 代表在 x 轴的呈现 ;

(2)如果 type 属性配置为 value ,那么无需配置 data , 此时 y 轴会自动去 series下找数据进行图表的绘制 。

2.1.1 柱状图常见效果

  • markPoint标记
 series: [
                {
                    name: '销量1',
                    type: 'bar',
                    data: yDataArr,
                    markPoint:{
                        data:[
                            {type:'max',name:'最大值'},
                            {type:'min',name:'最小值'},
                            {type:'average',name:'平均值'}
                        ]
                    }
                }
            ]

  • 数值显示 label
label:{
         show:true, //是否可见
         rotate:50  //旋转角度
   }

  • 柱宽度 barWidth

 

barWidth:'40%'  //柱的宽度

  • 横向柱状图

所谓的横向柱状图, 只需要让x轴的角色和y轴的角色互换一下即可. 既 xAxis 的 type 设置为 value , yAxis 的 type 设置为 category , 并且设置 data 即可 

  • 标题title
       var option = {
            title: {
                text: "ECharts 入门示例",//标题文字
                textStyle: { color: 'blue' },//文字颜色
                left:20,//标题位置
                top:10,//标题位置
                borderWidth:2,//标题边框宽度
                borderColor:'red'//标题边框颜色
            },

  • 提示框:tooltip

tooltip 指的是当鼠标移入到图表或者点击图表时 , 展示出的提示框

式化显示 : formatter

 tooltip: {
     formatter : '{b}:{c}' 
  },

 

 

  • 工具按钮toolbox

toolbox 是 ECharts 提供的工具栏 , 内置有 导出图片,数据视图 , 重置 , 数据区域缩放 , 动态类型切换五个工具。

工具栏的按钮是配置在 feature 的节点之下

  var option = {
            toolbox:{
                feature:{
                    saveAsImage:{},//将图表下载为图片
                    dataView:{},//是否显示出原始数据
                    restore:{},//刷新图表
                    magicType:{  //将图表在不同类型之间切换,图表的转换需要数据的支持
                        type:['bar','line'] 
                    }

                }
            },

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue3学习源码笔记(小白入门系列)------KeepAlive 原理

目录 说明组件是如何被缓存的&#xff0c;什么时候被激活对于KeepAlive 中组件 如何完成激活的对于KeepAlive 中组件 如何完成休眠的 总结 说明 Vue 内置了 KeepAlive 组件&#xff0c;实现缓存多个组件实例切换时&#xff0c;完成对卸载组件实例的缓存&#xff0c;从而使得组…

idea-配置不显示某个文件

例如, 在编辑处末尾添加 target; (注意使用分号分割) 则不会在项目位置出现该目录

每天五分钟机器学习:如何解决过拟合问题?

本文重点 过拟合是机器学习中常见的问题之一,它指的是模型在训练集上表现良好,但在测试集或新数据上表现不佳的情况。过拟合的原因是模型过于复杂,过度拟合了训练集的噪声和细节,导致泛化能力下降。 解决方案 1. 数据集扩充:增加更多的训练样本可以减少过拟合的风险。通…

详解软件测试的项目职责、分工、测试流程

一、项目职责与分工 1、产品经理 ------> 负责设计产品的原型图和PRD。 2、项目经理 ------>负责并保证高质量的产品按时完成和发布的专职管理人员。 3、开发人员 ------> 负责完成公司新产品开发计划&#xff1b;开发人员主要分为 前端开发、后端开发、IOS开发和安…

【下载器篇】获取微软应用商店应用安装包的方法

【下载器篇】获取微软应用商店应用安装包的方法 微软应用商店历史版本应用下载方法&#xff0c;部分历史版本无法搜索到—【蘇小沐】 文章目录 【下载器篇】获取微软应用商店应用安装包的方法1.实验环境 &#xff08;一&#xff09;微软商店的在线链接生成器1、复制该应用的在…

论文阅读-可泛化深度伪造检测的关键

一、论文信息 论文名称&#xff1a;Learning Features of Intra-Consistency and Inter-Diversity: Keys Toward Generalizable Deepfake Detection 作者团队&#xff1a;Chen H, Lin Y, Li B, et al. &#xff08;广东省智能信息处理重点实验室、深圳市媒体安全重点实验室和深…

大模型LLM相关面试题整理-位置编码-tokenizer-激活函数-layernorm

10 LLMs 位置编码篇 10.1.1 什么是位置编码&#xff1f; 位置编码是一种用于在序列数据中为每个位置添加位置信息的技术。在自然语言处理中&#xff0c;位置编码通常用于处理文本序列。由于传统的神经网络无法直接捕捉输入序列中的位置信息&#xff0c;位置编码的引入可以帮助…

Kotlin中的算数运算符

在Kotlin中&#xff0c;我们可以使用各种算术运算符来进行数值计算和操作。下面对这些运算符进行详细描述&#xff0c;并提供示例代码。 正号&#xff08;正数&#xff09;和负号&#xff08;负数&#xff09;&#xff1a; 正号用于表示一个正数&#xff0c;不对数值进行任何…

电脑照片如何打包发送微信?三种方法随心选!

微信是我们沟通交流的主要工具&#xff0c;外出游玩拍的风景照还是办公会议保存的重要照片&#xff0c;大部分时候都是通过微信进行发送的&#xff0c;常常会遇到特别多的照片在电脑上需要发送&#xff0c;那么如何一次打包发送给微信好友呢&#xff1f;下面是三种常用的方法介…

2022最新版-李宏毅机器学习深度学习课程-P15 自动调整学习速率(learning rate)

一、使用场合 当loss函数表面崎岖不平时&#xff0c;可以采用这招。 被困住时不一定是小梯度&#xff0c;还有可能在峡谷两端来回跳跃&#xff0c;下不去了 例子 当误差表面是凸函数&#xff08;可以想成长轴很大的椭圆&#xff09;时&#xff0c;可能在峡谷两端交替&#x…

关于SparkRdd和SparkSql的几个指标统计,scala语言,打包上传到spark集群,yarn模式运行

需求&#xff1a; ❖ 要求:分别用SparkRDD, SparkSQL两种编程方式完成下列数据分析,结合webUI监控比较性能优劣并给出结果的合理化解释. 1、分别统计用户&#xff0c;性别&#xff0c;职业的个数&#xff1a; 2、查看统计年龄分布情况&#xff08;按照年龄分段为7段&#xff0…

QML自定义可长按短按的SpinBox

默认长按10.短按1 主要难点在区分长按和短按,以1s为界限.这里我使用了四个定时器用于实现加和减的长短按操作. shortClickTimer定时器用来在鼠标松开的时候判断是否是短按: 如果是短按的话我们需要借助forbidClickTimer定时器短暂禁用Click事件,否则会出现长按松开的时候10后…

2022最新版-李宏毅机器学习深度学习课程-P22 卷积神经网络CNN

零、吴恩达专项课程引入 概念导入&#xff1a;边缘检测 假如有一张如下的图像&#xff0c;想让计算机搞清楚图像上有什么物体&#xff0c;有两种方法&#xff1a;检测图像的 垂直边缘 和 水平边缘。 如下图所示&#xff0c;一个 6 * 6 的灰度图像&#xff0c;构造一个 3 * 3 …

基于类电磁机制优化的BP神经网络(分类应用) - 附代码

基于类电磁机制优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于类电磁机制优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.类电磁机制优化BP神经网络3.1 BP神经网络参数设置3.2 类电磁机制算法应用 4…

AI绘画使用Stable Diffusion(SDXL)绘制中国古代神兽

一、引言 说到神奇异兽&#xff0c;脑海中首先就会跳出我国古代神话传说中的各种神兽。比如青龙、白虎、朱雀、玄武&#xff0c;再比如麒麟、凤凰、毕方、饕餮等等&#xff0c;这些都是大家耳熟能详的的神兽。 这些神兽不仅体现了人们丰富的创造力和想象力&#xff0c;更是我…

day07_oop

今日内存 1.作业 2.成员变量局部变量 3.构造方法 4.对象创建过程 5.重载 零、复习 昨天 介绍面向对象编程类,属性,方法,对象定义类,设置属性,设置方法,创建对象使用对象,调用属性,调用方法内存图(创建对象,创建多个对象,多个引用指向一个对象) 类和属性,方法的关系 类是模板,其…

CUDA学习笔记3——图像卷积实现

分别采用GPU、CPU对图像进行sobel滤波处理 #include <stdio.h> #include "cuda_runtime.h" #include "device_launch_parameters.h" #include<math.h> #include <malloc.h> #include <opencv2/opencv.hpp>#include <stdlib.h…

DevEco Studio的安装和开发环境配置(详细)

记录一下这段时间备赛金砖职赛的鸿蒙应用开发 下载与安装 下载网址华为开发者联盟-智能终端能力开放,共建开发者生态 (huawei.com) 单击下载 然后跳转到下载的具体版本型号 这里我们选择window版本 下载完解压后 双击运行安装 我们需要找到一个不包含中文的地方&…

文件操作和IO详解

文件操作 和 IO 文件,File 这个概念,在计算机里,也是“一词多用”. 文件的狭义和广义 狭义的文件: 指的是硬盘上的文件和目录(文件夹) 广义的文件: 泛指计算机中很多的软硬件资源.操作系统中,把很多的硬件设备和软件设备都抽象成了文件.按照文件的方式来统一管理.例如网卡,操…

薪资27k,从华为外包测试“跳”入字节,说说我转行做测试的这5年.....

转行测试5年了 当时因为家里催促就业&#xff0c;在其中一个室友的内推下进入了一家英语教培机构&#xff0c;前期上班和工资都还算满意&#xff0c;甚至觉得自己找到了一份很稳定的工作了&#xff0c;可是好景不长&#xff0c;“双减政策”的到来&#xff0c;让公司的经济遭受…