echarts关于一次性绘制多个饼图 (基于vue3)

news2024/11/29 14:55:15

在echarts中,`dataset` 和 `source` 是用来配置数据的选项。

`dataset` 是一个包含数据相关配置的对象,用于指定数据的来源和格式。它可以包含多个维度的数据集,每个维度都可以有自己的名称和数据。

`source` 是 `dataset` 中的一个子项,用于指定数据的具体内容。在这个例子中,`source` 的值是一个二维数组,表示具体的数据。每一行代表一个数据条目,每一列代表一个维度。

数据格式为

dataset: {

        source: [

            ['状态', '2012', '2013', '2014', '2015', '2016', '2017'],

            ['运行', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],

            ['离线', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],

            ['待机', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],

            ['休眠', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]

        ]

    }

可以把整体理解成一个表格,第一行就是表格的标题,其次就是对应的参数,因为后面用到这个数据的时候这样理解会用起来方便些

老规矩直接上代码和注释  

<template>
  <div id="gy"></div>
</template>

<script>
import { onMounted } from 'vue';
import  echarts from "../assets/echarts";
export default {
    setup(){
    onMounted(()=>{
    let ini =   echarts.init(document.getElementById('gy'))
     ini.setOption({
    legend: {},
    tooltip: {},
    // 可以把整体理解成一个表格,第一行就是表格的标题,
    // 其次就是对应的参数,因为后面用到这个数据的时候这样理解会用起来方便些
    dataset: {
         //source为子配置项,数据源
        source: [
            ['状态', '2012', '2013', '2014', '2015', '2016', '2017'],   //数据标题
            ['运行', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],               //数据
            ['离线', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
            ['待机', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
            ['休眠', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
        ]
    },
    series: [{
        type: 'pie',
        radius: 60,        //半径,饼图的大小
        center: ['25%', '30%'],     //图表位置 center:['上下','左右']
         encode:{  
             itemName:'状态',        //数据标题名
             value:'2012'            //数据集
         }
        //  注意的是如果不设置encode对应的数据,它默认是从 itemName 取source第一行第一个,value 取source 第一行第二个
    }, {
        type: 'pie',
        radius: 60,
        center: ['75%', '30%'],      //图表位置 center:['上下','左右']
         encode: {
             itemName: '状态',         //数据标题名 
             value: '2013'             //数据集
         }
    }, {
        type: 'pie',
        radius: 60,
        center: ['25%', '75%'],          //图表位置 center:['上下','左右']
         encode: {
             itemName: '状态',          //数据标题名
             value: '2014'              //数据集
         }
    }, {
        type: 'pie',
        radius: 60,
        center: ['75%', '75%'],         //图表位置 center:['上下','左右']
         encode: {
             itemName: '状态',      //数据标题名
             value: '2015'          //数据集
         },     
        
    }
    ]
})
     
    })
    }
    
}
</script>

<style>
#gy{
    width:800px;
    height: 500px;
    border: 1px red solid;
}
</style>

 运行截图

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

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

相关文章

图计算(林子雨慕课课程)

文章目录 13. 图计算13.1 图计算简介13.2 Pregel简介13.3 Pregel图计算模型13.3.1 有向图和顶点13.3.2 Pregel的计算过程13.3.2 Pregel实例 13.4 Pregel的C API13.4.1 定义Vertex基类13.4.2 消息传递机制和Combiner13.4.3 Aggregator、拓扑改变和输入输出 13.5 Pregel的体系结构…

【通过实验带你认识linux下的源码编译】

通过实验带你认识linux下的源码编译 01 初识项目编译02 编译过程03 完整的编译过程1、创建源代码文件2、创建configure脚本3、创建Makefile.am 源代码是相对目标代码和可执行代码而言的。源代码是用汇编语言和高级语言写出来的代码。 目标代码是指源代码经过编译程序产生的能被…

qml介绍

文章目录 qml简介对象一个风车的例子 qml简介 从 Qt 4.7 开始&#xff0c;Qt 引入了一种声明式脚本语言&#xff0c;称为 QML&#xff08;Qt Meta Language 或者 Qt Modeling Language&#xff09;&#xff0c;作为 C 语言的一种替代。而 Qt Quick 就是使用 QML 构建的一套类库…

(latex中appendix附录怎么写)以及(附录里面的图片表格之类的如何重新编号)

文章目录 初级&#xff1a;怎么写进阶&#xff1a;怎么重新编号进阶&#xff1a;怎么换成单栏格式 初级&#xff1a;怎么写 这个很简单&#xff0c;我一开始以为很复杂。 \begin{document} #这里是“正文”。 #这里是“引用”。 #下面开始是附录。 \appendix \section{Proofs…

英语——分享篇——每日100词——801-900

medical——adj.医疗的——me我(熟词)di弟(拼音)cal擦了(拼音) chief——n.酋长——thief小偷——小偷拜见酋长 pork——n.猪肉——p皮鞋(编码)or偶人(拼音)k机关枪(编码)——穿着皮鞋的偶人扛着机关枪挑猪肉 pie——n.馅饼&#xff0c;派——瞥——他无意瞥见一块馅饼 saus…

GB28181平台简介

产品简介 LiveMedia视频中间件是支持部署到本地服务器或者云服务器的纯软件服务&#xff0c;也提供服务器、GPU一体机全包服务&#xff0c;提供视频设备管理、无插件、跨平台的实时视频、历史回放、语音对讲、设备控制等基础功能&#xff0c;支持视频协议有海康、大华私有协议…

Golang学习记录:基础篇练习(一)

Golang学习记录&#xff1a;基础篇练习&#xff08;一&#xff09; 1、九九乘法表2、水仙花数3、斐波那契数列4、编写一个函数&#xff0c;求100以内的质数5、统计字符串里面的字母、数字、空格以及其他字符的个数6、二维数组对角线的和7、冒泡排序算法8、选择排序算法9、二分查…

JDK 19 协程新特性学习

目录 一、协程定义 二、协程发展史 &#xff08;一&#xff09;协程的基本发展史说明 &#xff08;二&#xff09;Java协程发展说明 三、JDK 19 协程的原理细节 &#xff08;一&#xff09;Thread.ofVirtual().start() &#xff08;二&#xff09;SocketChannel.write(…

没有前端如何测试后端跨域问题

一、问题 前段时间对项目中的跨域做了相关的处理&#xff0c;网上有很多跨域的解决方案。前端解决&#xff0c;后端解决&#xff0c;nginx代理解决。我采用的是在后端中使用Cors来解决跨域的问题。但是前端项目还没有搭建起来&#xff0c;并不知道Cors的解决方案是否会生效&am…

揭秘元宇宙背后最炫科技风:数字经济时代,元宇宙发展解决方案及核心技术

文章目录 前言一、关于“元宇宙”业界趋势1.1、元宇宙的概念与发展历程1.2、行业应用体验向虚实融合和实时互动演进1.3、数字内容成为各行业 3D 数字世界入口 二、对于元宇宙发展的解决方案和实践2.1、MetaStudio 构建场景化全栈能力2.2、企业 3D 空间&#xff0c;围绕 4 类场景…

PyQt界面里如何加载本地视频以及调用摄像头实时检测(小白入门必看)

目录 1.PyQt介绍 2.代码实现 2.1实时调用摄像头 2.2 使用YOLOv5推理 2.3 代码中用到的主要函数 1.PyQt介绍 PyQt是一个用于创建桌面应用程序的Python绑定库&#xff0c;它基于Qt框架。Qt是一个跨平台的C应用程序开发框架&#xff0c;提供了丰富的图形界面、网络通信、数据…

Qt项目通过.pri文件将众多文件按功能模块分类显示,开发大型项目必备

Qt项目通过.pri文件将众多文件按功能模块分类显示&#xff0c;开发大型项目必备 Chapter1 Qt项目通过.pri文件将众多文件按功能模块分类显示&#xff0c;开发大型项目必备($$$)Chapter2 在Qt项目中添加pri文件前言创建pri文件的步骤一、创建Qt项目二、创建pri空文件三、调试 Ch…

SpringCloud学习笔记-Nacos服务分级存储模型

Nacos服务分级存储模型 一级是服务&#xff0c;例如userservice二级是集群&#xff0c;例如杭州或上海三级是实例&#xff0c;例如杭州机房的某台部署了userservice的服务器 微服务互相访问时&#xff0c;应该尽可能访问同集群实例&#xff0c;因为本地访问速度更快。当本集…

创新YOLOv8改进:结合全新可变形大核注意力(D-LKA Attention)实现多尺度目标涨点

🔥🔥🔥 提升多尺度目标检测,创新提升 🔥🔥🔥 🔥🔥🔥 捕捉图像特征和处理复杂图像特征 🔥🔥🔥 👉👉👉: 本专栏包含大量的新设计的创新想法,包含详细的代码和说明,具备有效的创新组合,可以有效应用到改进创新当中 👉👉👉: 🐤🐤�…

寻找AI时代的关键拼图,从美国橡树岭国家实验室读懂AI存力信标

超算&#xff0c;是计算产业的明珠&#xff0c;是人类探索未知的航船。超算的发展与变化&#xff0c;不仅代表着各个国家与地区间的科技竞争力&#xff0c;更将作为趋势风向标&#xff0c;影响整个数字化体系的走向。 在目前阶段&#xff0c;超算与AI计算的融合是大势所趋。为了…

C# GPEN-BFR 图像修复

效果 项目 代码 using Microsoft.ML.OnnxRuntime; using Microsoft.ML.OnnxRuntime.Tensors; using OpenCvSharp; using System; using System.Collections.Generic; using System.Drawing; using System.Drawing.Imaging; using System.Windows.Forms;namespace 图像修复 {pu…

【部署】Linux Shell脚本部署java程序 (jar包)

文章目录 前言 前言 #!/usr/bin/env bash #可变参数变量#部署磁盘路径 baseDirPath/data/apps/java/smj-exchange-upload #jar包名称 packageNamesmj-exchange-upload.jar #命令启动包名 xx.jar的xxpid #进程pid#检测pid getPid(){echo "检测状态-----------------------…

Python爬虫:某书平台的Authorization参数js逆向

⭐️⭐️⭐️⭐️⭐️欢迎来到我的博客⭐️⭐️⭐️⭐️⭐️ 🐴作者:秋无之地 🐴简介:CSDN爬虫、后端、大数据领域创作者。目前从事python爬虫、后端和大数据等相关工作,主要擅长领域有:爬虫、后端、大数据开发、数据分析等。 🐴欢迎小伙伴们点赞👍🏻、收藏⭐️、…

深势科技基于 Serverless 容器为科研人员打造高效的开发平台

作者&#xff1a;李样兵、刘杉、木环、玖宇、鼎岳 云端的科学研究&#xff0c;AI for Science 新范式 以往科学家们的科研工作需要经过大量实验的重复验证、复杂数学计算&#xff0c;以及长年累月的不断试错和苦苦探索。云计算基础服务的发展和人工智能技术 AI 的兴起&#x…

自动驾驶学习笔记(五)——绕行距离调试

#Apollo开发者# 学习课程的传送门如下&#xff0c;当您也准备学习自动驾驶时&#xff0c;可以和我一同前往&#xff1a; 《自动驾驶新人之旅》免费课程—> 传送门 《2023星火培训【感知专项营】》免费课程—>传送门 文章目录 前言 调试内容 打开在线编辑器 打开pl…