当前位置: 首页 > news >正文

python饼图显示百分比_解决echarts饼图显示百分比,和显示内容字体及大小

//基于准备好的dom,初始化echarts实例

var pieEchart = echarts.init(document.getElementById('pieEchart'));//指定图表的配置项和数据

var pieoption ={

title : {

text:'公里总里程',

x:'left',

textStyle:{

color:'#FFFFFF',

fontSize:25}

},

tooltip : {

trigger:'item',

formatter:"{a}
{b} : {c} KM"},

legend: {

orient :'vertical',

x :'left',

top:40,

itemWidth:70,

itemHeight:30,

formatter:'{name}',

textStyle:{

color:'#FFFFFF'},

data:[{name:'高速50KM',icon:'rect'},{name:'一级150KM',icon:'rect'},{name:'二级150KM',icon:'rect'},{name:'三级100KM',icon:'rect'},{name:'四级50KM',icon:'rect'}] }

,

calculable :true,

series : [

{

name:'公里总里程',

type:'pie',

radius :'70%',//饼图的半径大小

center: ['60%', '60%'],//饼图的位置

label:{ //饼图图形上的文本标签

normal:{

show:true,

position:'inner', //标签的位置

textStyle : {

fontWeight :300,

fontSize :16 //文字的字体大小

},

formatter:'{d}%'}

},

data:[

{value:50,name:'高速50KM',itemStyle:{normal:{color:'#FE0000'}}},

{value:150,name:'一级150KM',itemStyle:{normal:{color:'#F29700'}}},

{value:150,name:'二级150KM',itemStyle:{normal:{color:'#02B0ED'}}},

{value:100,name:'三级100KM',itemStyle:{normal:{color:'#55E87D'}}},

{value:50,name:'四级50KM',itemStyle:{normal:{color:'#FFE200'}}},

]

}

]

};//使用刚指定的配置项和数据显示图表。

pieEchart.setOption(pieoption);

相关文章:

  • java 二维数组定义长方体_47.二维数组的定义
  • zap 自定义日志格式_Go 每日一库之 zap
  • python接管已经打开ie浏览器_Python Webdriver 重新使用已经打开的浏览器实例
  • python 单例 多线程_python 单例模式
  • echarts绘制大数量折线图导致浏览器崩溃_现代浏览器内部机制
  • filestream读取文件_ASP.NET Core WebAPI文件下载
  • python怎么循环合并数组_python数组循环合并python执行系统命令四种方法比较
  • git pull 强制覆盖本地_用git简单粗暴地完成本地、服务器同步
  • github可视化工具_深度学习训练过程可视化(附github源码)
  • grep 与条件_【125】Linux 中 ps ef|grep和ps、grep详解
  • linux搜索文件_学习+使用Linux的最佳姿势,收录近600条Linux系统命令
  • onblur事件怎么触发_JavaScript第十三章节 事件
  • html一个页面中切换多个页面_前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第2章HTML基础知识...
  • window.location.href 设置请求头_常见的http响应的返回头
  • java逆向工程_图书推荐安卓高级逆向工程师技能树
  • 【140天】尚学堂高淇Java300集视频精华笔记(86-87)
  • canvas 高仿 Apple Watch 表盘
  • ES6--对象的扩展
  • gcc介绍及安装
  • IP路由与转发
  • Mithril.js 入门介绍
  • passportjs 源码分析
  • PHP那些事儿
  • QQ浏览器x5内核的兼容性问题
  • spring boot 整合mybatis 无法输出sql的问题
  • supervisor 永不挂掉的进程 安装以及使用
  • ucore操作系统实验笔记 - 重新理解中断
  • win10下安装mysql5.7
  • 大快搜索数据爬虫技术实例安装教学篇
  • 工作中总结前端开发流程--vue项目
  • 简单实现一个textarea自适应高度
  • 你真的知道 == 和 equals 的区别吗?
  • 前端每日实战:61# 视频演示如何用纯 CSS 创作一只咖啡壶
  • 浅谈web中前端模板引擎的使用
  • 系统认识JavaScript正则表达式
  • 终端用户监控:真实用户监控还是模拟监控?
  • 宾利慕尚创始人典藏版国内首秀,2025年前实现全系车型电动化 | 2019上海车展 ...
  • ​软考-高级-信息系统项目管理师教程 第四版【第14章-项目沟通管理-思维导图】​
  • ​总结MySQL 的一些知识点:MySQL 选择数据库​
  • !! 2.对十份论文和报告中的关于OpenCV和Android NDK开发的总结
  • # 飞书APP集成平台-数字化落地
  • (day6) 319. 灯泡开关
  • (DFS + 剪枝)【洛谷P1731】 [NOI1999] 生日蛋糕
  • (done) ROC曲线 和 AUC值 分别是什么?
  • (python)数据结构---字典
  • (八)光盘的挂载与解挂、挂载CentOS镜像、rpm安装软件详细学习笔记
  • (多级缓存)缓存同步
  • (附源码)ssm教师工作量核算统计系统 毕业设计 162307
  • (强烈推荐)移动端音视频从零到上手(下)
  • (一)appium-desktop定位元素原理
  • (转)视频码率,帧率和分辨率的联系与区别
  • .NET Conf 2023 回顾 – 庆祝社区、创新和 .NET 8 的发布
  • .NET HttpWebRequest、WebClient、HttpClient
  • .NET 使用配置文件
  • .NET多线程执行函数