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 +"&nbsp;&nbsp;" + 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}&nbsp; &nbsp;<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 +"&nbsp;&nbsp;" +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",},},],});

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

安全加密框架图——Oracle安全开发者

安全加密框架图——Oracle安全开发者

Oracle安全开发者 ACLs 设计 ACLs&#xff08;访问控制列表&#xff09;时&#xff0c;可以根据以下思路进行设计&#xff1a; 所有者文件权限&#xff1a;确定文件的所有者能够对文件执行哪些操作&#xff0c;如读取、写入、执行等。这可以根据文件的性质和拥有者的职责来决…
阅读更多...
k8s集群部署vmalert和prometheusalert实现钉钉告警

k8s集群部署vmalert和prometheusalert实现钉钉告警

先决条件 安装以下软件包&#xff1a;git, kubectl, helm, helm-docs&#xff0c;请参阅本教程。 1、安装 helm wget https://xxx-xx.oss-cn-xxx.aliyuncs.com/helm-v3.8.1-linux-amd64.tar.gz tar xvzf helm-v3.8.1-linux-amd64.tar.gz mv linux-amd64/helm /usr/local/bin…
阅读更多...
12 注册登录

12 注册登录

12 注册登录 整体概述 使用数据库连接池实现服务器访问数据库的功能&#xff0c;使用POST请求完成注册和登录的校验工作。 本文内容 介绍同步实现注册登录功能&#xff0c;具体涉及到流程图、载入数据库表、提取用户名和密码、注册登录流程与页面跳转的代码实现。 流程图&a…
阅读更多...
六、Linux系统下，文件操作命令都有哪些？

六、Linux系统下，文件操作命令都有哪些？

总括&#xff1a; 创建文件/文件夹&#xff1a;touch&#xff1b; 查看&#xff1a;cat/more&#xff1b; 复制&#xff1a;copy&#xff1b; 移动文件/文件夹&#xff1a;mv&#xff1b; 删除&#xff1a;rm&#xff1b; 1、创建文件 &#xff08;1&#xff09;语法&#x…
阅读更多...
阿里云与中国中医科学院合作，推动中医药行业数字化和智能化发展

阿里云与中国中医科学院合作，推动中医药行业数字化和智能化发展

据相关媒体消息&#xff0c;阿里云与中国中医科学院的合作旨在推动中医药行业的数字化和智能化发展。随着互联网的进步和相关政策的支持&#xff0c;中医药产业受到了国家的高度关注。这次合作将以“互联网 中医药”为载体&#xff0c;致力于推进中医药文化的传承和创新发展。…
阅读更多...
AIGC绘画：基于Stable Diffusion进行AI绘图

AIGC绘画：基于Stable Diffusion进行AI绘图

文章目录 AIGC深度学习模型绘画系统stable diffusion简介stable diffusion应用现状在线网站云端部署本地部署Stable Diffusion AIGC深度学习模型绘画系统 stable diffusion简介 Stable Diffusion是2022年发布的深度学习文本到图像生成模型&#xff0c;它主要用于根据文本的描述…
阅读更多...
通俗讲解-动量梯度下降法原理与代码实例

通俗讲解-动量梯度下降法原理与代码实例

本站原创文章&#xff0c;转载请说明来自《老饼讲解-BP神经网络》bp.bbbdata.com 目录 一.动量梯度下降法介绍 1.1 动量梯度下降法简介与思想 1.2 动量梯度下降法的算法流程 二.动量梯度下降法代码实例 2.1 动量梯度下降法实例代码 一.动量梯度下降法介绍…
阅读更多...
2023年上半年数学建模竞赛题目汇总与难度分析

2023年上半年数学建模竞赛题目汇总与难度分析

2023年上半年数学建模竞赛题目汇总与难度分析 ​由于近年来国赛ABC题出题方式漂浮不定&#xff0c;没有太大的定性&#xff0c;目前总体的命题方向为&#xff0c;由之前的单一模型问题变为数据分析评价优化或者预测类题目是B、C题的主要命题方向。为了更好地把握今年命题的主方…
阅读更多...
vue3-vuex

vue3-vuex

一、概念 &#xff08;1&#xff09;Vuex 是一个状态和数据管理的框架&#xff0c;负责管理项目中多个组件和多个页面共享的数据。 &#xff08;2&#xff09;在开发项目的时候&#xff0c;我们就会把数据分成两个部分&#xff0c;一种数据是在某个组件内部使用&#xff0c;我…
阅读更多...
【C++】STL案例1-评委打分

【C++】STL案例1-评委打分

0.前言 1.系统自动生成的评委评分代码&#xff1a; #include <iostream> using namespace std; #include <deque> #include <vector> #include <algorithm> #include <string>//选手类 class Player { public:Player(string name, float score)…
阅读更多...
机器学习深度学习——机器翻译（序列生成策略）

机器学习深度学习——机器翻译（序列生成策略）

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位即将上大四&#xff0c;正专攻机器学习的保研er &#x1f30c;上期文章&#xff1a;机器学习&&深度学习——seq2seq实现机器翻译&#xff08;详细实现与原理推导&#xff09; &#x1f4da;订阅专栏&#xff1a;机…
阅读更多...
最新AI系统ChatGPT网站程序源码+搭建教程/公众号/H5端/安装配置教程/完整知识库

最新AI系统ChatGPT网站程序源码+搭建教程/公众号/H5端/安装配置教程/完整知识库

1、前言 SparkAi系统是基于国外很火的ChatGPT进行开发的Ai智能问答系统。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。 那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧&#xff01;…
阅读更多...
基于IDE Eval Resetter延长IntelliJ IDEA等软件试用期的方法（包含新版本软件的操作方法）

基于IDE Eval Resetter延长IntelliJ IDEA等软件试用期的方法（包含新版本软件的操作方法）

本文介绍基于IDE Eval Resetter插件&#xff0c;对集成开发环境IntelliJ IDEA等JetBrains公司下属的多个开发软件&#xff0c;加以试用期延长的方法。 我们这里就以IntelliJ IDEA为例&#xff0c;来介绍这一插件发挥作用的具体方式。不过&#xff0c;需要说明使用IDE Eval Rese…
阅读更多...
Hlang社区-社区主页实现

Hlang社区-社区主页实现

文章目录 前言首页结构固定导航栏左侧导航itemitem标志头部推荐文章展示ITEM实现ToolTip完整实现首页完整实现前言 废话不多说，直接看到效果，这里的话是我们社区主页，不是产品宣传主页哈： 是的也许你已经发现了这个页面和某个网站长得贼像。没错是这样的，这个布局我确实…
阅读更多...
vue3+vite+pinia

vue3+vite+pinia

目录 一、项目准备 1.1、Vite搭建项目 1.2、vue_cli创建项目 二、组合式API(基于setup) 2.1、ref 2.2、reactive 2.3、toRefs 2.4、watch和watchEffect 2.5、computed 2.6、生命周期钩子函数 2.7、setup(子组件)的第一个参数-props 2.8、setup(子组件)的第二个参数…
阅读更多...
STM32 CubeMX （Freertos任务：创建、删除、挂起、恢复）

STM32 CubeMX （Freertos任务：创建、删除、挂起、恢复）

STM32 CubeMX Freertos STM32 CubeMX &#xff08;Freertos任务&#xff1a;创建、删除、挂起、恢复&#xff09; STM32 CubeMX Freertos前言一、STM32 CubeMX 配置时钟树配置使能串口&#xff0c;用于用于检查实验现象使用STM32 CubeMX 库&#xff0c;配置Freertos创建任务 二…
阅读更多...
概念解析 | 长尾分布：从无处不在的‘少数派’中挖掘价值

概念解析 | 长尾分布：从无处不在的‘少数派’中挖掘价值

注1：本文系“概念解析”系列之一，致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是：长尾分布(Long-Tail Distribution)。 揭秘长尾分布：从无处不在的‘少数派’中挖掘价值 What is a Long Tail Distribution? (Definition & Example) - Statology 一、背…
阅读更多...
神经网络基础-神经网络补充概念-02-逻辑回归

神经网络基础-神经网络补充概念-02-逻辑回归

概念 逻辑回归是一种用于二分分类问题的统计学习方法&#xff0c;尽管名字中带有"回归"一词&#xff0c;但实际上它用于分类任务。逻辑回归的目标是根据输入特征来预测数据点属于某个类别的概率&#xff0c;然后将概率映射到一个离散的类别标签。 逻辑回归模型的核…
阅读更多...
多主题自适应知识变现博客论坛，支持docker一键部署

多主题自适应知识变现博客论坛，支持docker一键部署

iblog 给大家推荐一个多主题自适应&#xff0c;支持付费收款的博客论坛系统&#xff0c;支持docker一键部署&#xff0c;支持企业微信通知。 前端 多主题 自适应 个人页 后端 H2 console 运行命令 docker run -d --name iblog --restartalways -p 8080:8080 -e consoletrue …
阅读更多...
RabbitMQ简单使用

RabbitMQ简单使用

RabbitMq是一个消息中间件&#xff1a;它接收消息、转发消息。你可以把它理解为一个邮局&#xff1a;当你向邮箱里寄出一封信后&#xff0c;邮递员们就能最终将信送到收信人手中。 RabbitMq、消息相关术语如下&#xff1a; 生产者&#xff1a;生产者只发送消息&#xff0c;发…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023