echarts 柱状图-折线图-饼图的基础使用


上图示例图表展示相关配置:
var myChart = echarts.init(this.$refs.firstMain);myChart.setOption({legend: { // 图例设置top: "15%",type: "scroll",orient: "vertical",//图例列表的布局朝向。left: "right",pageIconColor: 'red', // 激活的分页按钮颜色pageIconInactiveColor: 'yellow', // 没激活的分页按钮颜色selectedMode: false,pageIconSize: 12, //当然就是按钮的大小},title: {text: "县区采集分布",left: "left",},tooltip: { // 提示框组件设置padding: [15, 15],enterable: true,// 鼠标是否可进入提示框浮层中,默认为false,如需详情内交互,如添加链接,按钮,可设置为 true。extraCssText: "max-width:60%;max-height:83%; overflow: auto; ",//额外附加到浮层的 css 样式。show: true,trigger: "item",confine: true, // 是否将 tooltip 框限制在图表的区域内。// dom: "overflow:hidden",formatter: function (params) {let htmlStr = `<span style="color:${params.color}">${params.data.value}</span>`;//圆点后面显示的名称'let res = params.marker +params.data.name +" " + htmlStr +"<br/>";for (var i = 0; i < params.data.list.length; i++) {let obj = params.data.list[i];res += `<div style="color:#999;text-indent:1em">${obj.label} <span style="color:#333333">${obj.total}</span></div>`;}return `${res}`; //最后返回拼接好的值},},grid: {left: "3%",top: "20%",right: "2%",bottom: "3%",containLabel: true,},dataset: {// 提供一份数据。dimensions: ["name", "value"],source: res.data.data,},graphic: { // 数据为空时展示为空提示type: "text", // 类型:文本left: "center",top: "middle",silent: true, // 不响应事件invisible: res.data.data.length > 0, // 有数据就隐藏style: {x: 0,y: 0,fill: "#9d9d9d",fontWeight: "bold",text: "暂无数据",fontFamily: "Microsoft YaHei",fontSize: "25px",},},series: [{name: this.emptyText,type: "pie",radius: ["35%", "45%"],roseType: "area",color: ["#4889FF", "#63C2FF", "#66E5E9", "#F478BB", "#AE8DFF"],itemStyle: {borderRadius: 8,},// 高亮样式emphasis: {label: {show: true,fontSize: 20,fontWeight: "bold",},},//label 饼图图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。label: {position: "outer", //文本标签的位置。alignTo: "labelLine", //标签的对齐方式-折现的长短bleedMargin: 5,show: true,formatter: "{@name}" + "{d}%",},},],});


上述示例图表展示相关配置:
一般来说,饼图数据要么内部展示要么外部展示,上面这个饼图表,外部有折现展示,内部有百分比展示,这里series配置两个数据对象才能达到这样的效果,详见配置
var myChart = echarts.init(this.$refs.fiveMain);myChart.setOption({legend: {bottom: 40,selectedMode: false,show: res.data.data.length > 0,},// 高亮样式emphasis: {label: {show: true,fontSize: 20,fontWeight: "bold",},},tooltip: {padding: [15, 15],show: true,trigger: "item",formatter: function (params) {let htmlStr = `<span style="color:${params.color}">${params.data.value}</span>`;let res =params.marker +params.data.name +" " +htmlStr +"<br/>";return `${res}`; //最后返回拼接好的值},},label: {alignTo: "labelLine",formatter: function (data) {return `${data.percent}%\n\n${data.name}`;},minMargin: 5,edgeDistance: 10,lineHeight: 15,},dataset: {// 提供一份数据。dimensions: ["name", "value"],source: res.data.data,},series: [{name: "暂无数据",type: "pie",radius: "55%",color: ["#4889FF", "#63C2FF", "#66E5E9", "#8E8EFE"],// avoidLabelOverlap: false, //设置为true时,当数值为0时不重叠// roseType: "area",labelLayout: function (params) { //折现长短的效果const isLeft = params.labelRect.x < myChart.getWidth() / 2;const points = params.labelLinePoints;// Update the end point.points[2][0] = isLeft? params.labelRect.x: params.labelRect.x + params.labelRect.width;return {labelLinePoints: points,};},},{name: "暂无数据",type: "pie",radius: "55%",// avoidLabelOverlap: false, //设置为true时,当数值为0时不重叠center: ["50%", "50%"],// 高亮样式emphasis: {label: {show: true,fontSize: 20,fontWeight: "bold",},},// roseType: "radius",color: ["#4889FF", "#63C2FF", "#66E5E9", "#F478BB", "#AE8DFF"],//label 饼图图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。label: {show: true,position: "inside",formatter: `{d}%`,// formatter: '{b}: {c} ({d}%)',},},],graphic: {type: "text", // 类型:文本left: "center",top: "middle",silent: true, // 不响应事件z: 5,invisible: res.data.data.length > 0, // 有数据就隐藏style: {x: 0,y: 0,fill: "#2d2c2c",fontWeight: "bold",text: "暂无数据",fontFamily: "Microsoft YaHei",fontSize: "25px",},},});
上述示例图表展示相关配置:
var myChart = echarts.init(this.$refs.threeMain);myChart.setOption({title: {text: "采集时间分布",},grid: {left: "3%",top: "25%",right: "2%",bottom: "2%",containLabel: true,},legend: {top: "10%",selectedMode: false,},tooltip: {trigger: "axis",confine: true, // 是否将 tooltip 框限制在图表的区域内。padding: [15, 15],enterable: true, // 鼠标是否可进入提示框浮层中,默认为false,如需详情内交互,如添加链接,按钮,可设置为 true。extraCssText: "max-width:60%;max-height:83%; overflow: auto; ", //额外附加到浮层的 css 样式。},xAxis: {show: true,type: "category",data: res.data.data.abscissa,// boundaryGap: false,axisLabel: {interval: 0,rotate: 25,},splitLine: {//网格线show: true,},axisTick: {show: false, // 不显示坐标轴刻度线},},yAxis: {show: true,type: "value",splitLine: {//网格线show: false,},// 坐标 轴线axisLine: {show: true,},},graphic: {type: "text", // 类型:文本left: "center",top: "middle",silent: true, // 不响应事件invisible: res.data.data.abscissa.length > 0, // 有数据就隐藏style: {x: 0,y: 0,fill: "#9d9d9d",fontWeight: "bold",text: "暂无数据",fontFamily: "Microsoft YaHei",fontSize: "25px",},},series: res.data.data.series,});

上述示例图表展示相关配置:
var myChart = echarts.init(this.$refs.fourMain);myChart.setOption({// title: {// text: "年龄分布",// },tooltip: {show: true,trigger: "axis",axisPointer: { type: "shadow" },shadowstyle: {color: "#65A3FF",opacity: 0.2,width: "auto",},},xAxis: {type: "value",axisLine: {show: true, //不显示坐标轴线},axisTick: {show: false, // 不显示坐标轴刻度线},axisLabel: {formatter: function (value, index) {if (value == 0 || (value > 0 && value < 10000)) {return value + "";} else {return value / 10000 + "万";}},},},yAxis: {type: "category",// name: "单位(人)",data: res.data.data.ordinate,axisTick: {show: false, // 不显示坐标轴刻度线},},series: [{color: "#247FFF", // 柱状条颜色barWidth: 30, //柱子宽度data: res.data.data.abscissa,type: "bar",showBackground: true,//柱状阴影backgroundStyle: { //柱状阴影颜色color: "rgba(180, 180, 180, 0.2)",},label: {formatter: "{c}" + "",show: true,position: "right",fontWeight: "bolder",fontSize: "12",color: "#4889ff",},},],graphic: {type: "text", // 类型:文本left: "center",top: "middle",silent: true, // 不响应事件invisible: res.data.data.abscissa.length > 0, // 有数据就隐藏style: {x: 0,y: 0,fill: "#9d9d9d",fontWeight: "bold",text: "暂无数据",fontFamily: "Microsoft YaHei",fontSize: "25px",},},});

上述示例图表展示相关配置:
var myChart = echarts.init(this.$refs.twoMain);myChart.setOption({title: {show: true,text: "学历分布",left: "left",top: "top",},grid: {left: "4%",top: "25%",right: "2%",bottom: "3%",containLabel: true,},tooltip: {show: true,trigger: "axis",axisPointer: { type: "shadow" },shadowstyle: {color: "#65A3FF",opacity: 0.2,width: "auto",},},xAxis: {type: "category",data: res.data.data.abscissa,axisTick: {show: false, // 不显示坐标轴刻度线},},yAxis: {show: true,type: "value",name: "数量(人)",// 坐标 轴线axisLine: {show: true,},// 坐标轴刻度线axisTick: {show: false,},//网格线splitLine: {show: true,},},graphic: {type: "text", // 类型:文本left: "center",top: "middle",silent: true, // 不响应事件invisible: res.data.data.ordinate.length > 0, // 有数据就隐藏style: {x: 0,y: 0,fill: "#9d9d9d",fontWeight: "bold",text: "暂无数据",fontFamily: "Microsoft YaHei",fontSize: "25px",},},series: [{data: res.data.data.ordinate,color: "#247FFF", // 柱状条颜色barWidth: 30, //柱子宽度type: "bar",showBackground: true,backgroundStyle: {color: "rgba(180, 180, 180, 0.2)",},label: {formatter: "{@num}" + "人",show: true,position: "top",fontWeight: "bolder",fontSize: "12",color: "#4889ff",},},],});
相关文章:
echarts 柱状图-折线图-饼图的基础使用
上图示例图表展示相关配置: var myChart echarts.init(this.$refs.firstMain);myChart.setOption({legend: { // 图例设置top: "15%",type: "scroll",orient: "vertical",//图例列表的布局朝向。left: "right",pageIconCo…...
mac电脑 node 基本操作命令
1. 查看node的版本 node -v2. 查看可安装的node版本 sudo npm view node versions3. 安装指定版本的node sudo n 18.9.04. 安装最新版本node sudo n latest5. 安装最新稳定版 sudo n stable6. 清楚node缓存 sudo npm cache clean -f7. 列举已经安装的node版本 n ls 8. 在…...
Hlang社区项目说明
文章目录 前言Hlang社区技术前端后端 前言 Hello,欢迎来到本专栏,那么这也是第一次做这种类型的专栏,如有不做多多指教。那么在这里我要隆重介绍的就是这个Hlang这个项目。 首先,这里我要说明的是,我们的这个项目其实是分为两个…...
RTC实验
一、RTC简介 RTC(Real Time Clock)即实时时钟,它是一个可以为系统提供精确的时间基准的元器件,RTC一般采用精度较高的晶振作为时钟源,有些RTC为了在主电源掉电时还可以工作,需要外加电池供电BCD码,四位二进制表示一位…...
C#多线程报错:The destination thread no longer exists.
WinForm,C#多线程报错: System.ComponentModel.InvalidAsynchronousStateException: An error occurred invoking the method. The destination thread no longer exists. 研究一番,找到了原因: 有问题的写法: ne…...
使用 Visual Studio GoogleTest编写 C/C++ 单元测试——入门篇
入门教程 Visual Studio 新建 GoogleTest项目,一路选默认参数 pch.h #pragma once#include "gtest/gtest.h"int add(int a, int b);pch.cpp #include "pch.h"int add(int a, int b) {return a b; }test.cpp #include "pch.h"TES…...
Linux下TA_Lib安装失败的问题处理
Linux下TA_Lib安装失败的问题处理 TA_Lib是python的量化指标库,其中包含了很多150多种量化指标 ,量化分析中经常使用。 This is a Python wrapper for TA-LIB based on Cython instead of SWIG. From the homepage: TA-Lib is widely used by trading …...
egg.js企业级web框架
egg与express、koa的区别 三者皆为node.js web框架,但: express适合做个人项目,灵活性太高;egg是基于koa封装的企业级框架,奉行约定优于配置,按照一套统一的约定进行应用开发,减少开发学习成本…...
小说网站第二章-关于文章的上传的实现
简述 因为最近比较忙,所以只有时间把以前的东西整理一下。前端方面,我使用了既存md5框架语法来保存数据,原谅我展示没找到好的方法。后端的话,我使用nodemongodb来保存数据。下面我就来简单介绍一下我的东西。 前端的实现 前端的…...
Java面试题01
1、以下不属于oracle的逻辑结构的是?答案:B A.段 B.数据文件 C.表空间 D.区 2、构造函数何时被调用?答案:A A.创建对象时 B.使用对象变量时 C.调用对象方法时 D.类定义时 3、下列排序…...
6.3 社会工程学攻击
数据参考:CISP官方 目录 社会工程学攻击概念社会工程学攻击利用的人性 “弱点”典型社会工程学攻击方式社会工程学攻击防护 一、社会工程学攻击概念 什么是社会工程学攻击 也被称为 "社交工程学" 攻击利用人性弱点 (本能反应、贪婪、易于信任等) 进…...
typeScript 之 Map
工具: PlayGround 源码: GitHub TypeScript Map简介 Map是ES6引入的一种新的数据结构, 它是一只用于存储**键值对(key-value)**的集合。 let map new Map(); let map_1: Map<string, number> new Map(); let map_2: Map<string…...
Apache Doris 入门教程29:文件管理器
文件管理器 Doris 中的一些功能需要使用一些用户自定义的文件。比如用于访问外部数据源的公钥、密钥文件、证书文件等等。文件管理器提供这样一个功能,能够让用户预先上传这些文件并保存在 Doris 系统中,然后可以在其他命令中引用或访问。 名词解释 …...
【佳佳怪文献分享】MVFusion: 利用语义对齐的多视角 3D 物体检测雷达和相机融合
标题:MVFusion: Multi-View 3D Object Detection with Semantic-aligned Radar and Camera Fusion 作者:Zizhang Wu , Guilian Chen , Yuanzhu Gan , Lei Wang , Jian Pu 来源:2023 IEEE International Conference on Robotics and Automat…...
word 应用 打不开 显示一直是正在启动中
word打开来显示一直正在启动中,其他调用word的应用也打不开,网上查了下以后进程关闭spoolsv.exe,就可以正常打开word了...
Flink-----Yarn应用模式作业提交流程
Yarn应用模式作业提交流程 在Yarn当中又分为Session,PerJob,Application,建议和推荐使用独立集群的,其中就包含PerJob 和Application,但是1.17版本的Flink已将PerJob标记为过时,并且Application可以解决PerJob的一些痛点,减轻客户端的一些压力,所以需要重点了解Yarn应…...
Python学习笔记_基础篇(五)_数据类型之字典
一.基本数据类型 整数:int 字符串:str(注:\t等于一个tab键) 布尔值: bool 列表:list 列表用[] 元祖:tuple 元祖用() 字典:dict 注:所有的数据类型都存在想对…...
【第三阶段】kotlin语言的安全调用操作符
?. fun main() {var name:String?"kotlin" //name是一个可空类型,发出广播,调用的地方必须补救措施namenullvar r name?.capitalize() //?. 如果namenull,那么?.的将不执行,就不会引发空指针异常prin…...
机器学习重要内容:特征工程之特征抽取
目录 1、简介 2、⭐为什么需要特征工程 3、特征抽取 3.1、简介 3.2、特征提取主要内容 3.3、字典特征提取 3.4、"one-hot"编码 3.5、文本特征提取 3.5.1、英文文本 3.5.2、结巴分词 3.5.3、中文文本 3.5.4、Tf-idf ⭐所属专栏:人工智能 文中提…...
Logic 2逻辑分析器捉到的CAN帧
代码开发环境 逻辑分析仪环境 MCU芯片环境:RH850/U2A16 逻辑分析器(LA)抓到的CAN帧 <完>...
Linux链表操作全解析
Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表?1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...
在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:
在 HarmonyOS 应用开发中,手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力,既支持点击、长按、拖拽等基础单一手势的精细控制,也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档,…...
【git】把本地更改提交远程新分支feature_g
创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...
WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)
一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解,适合用作学习或写简历项目背景说明。 🧠 一、概念简介:Solidity 合约开发 Solidity 是一种专门为 以太坊(Ethereum)平台编写智能合约的高级编…...
现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?
现有的 Redis 分布式锁库(如 Redisson)相比于开发者自己基于 Redis 命令(如 SETNX, EXPIRE, DEL)手动实现分布式锁,提供了巨大的便利性和健壮性。主要体现在以下几个方面: 原子性保证 (Atomicity)ÿ…...
NPOI操作EXCEL文件 ——CAD C# 二次开发
缺点:dll.版本容易加载错误。CAD加载插件时,没有加载所有类库。插件运行过程中用到某个类库,会从CAD的安装目录找,找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库,就用插件程序加载进…...
从 GreenPlum 到镜舟数据库:杭银消费金融湖仓一体转型实践
作者:吴岐诗,杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言:融合数据湖与数仓的创新之路 在数字金融时代,数据已成为金融机构的核心竞争力。杭银消费金…...
Vite中定义@软链接
在webpack中可以直接通过符号表示src路径,但是vite中默认不可以。 如何实现: vite中提供了resolve.alias:通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...
HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力:训练时既扩散也回归,但推理时则扩散
前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说,在叠衣服的过程中,我会带着团队对比各种模型、方法、策略,毕竟针对各个场景始终寻找更优的解决方案,是我个人和我司「七月在线」的职责之一 且个人认为,…...
Ubuntu系统多网卡多相机IP设置方法
目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机,交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息,系统版本:Ubuntu22.04.5 LTS;内核版本…...
