Echarts使用笔记--饼图,柱状图

2024-09-07 09:32

本文主要是介绍Echarts使用笔记--饼图,柱状图,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

开始做前端了,感觉自己是要变成全栈工程师了。。。
今天使用了echart,用之前觉得好高大上好厉害,肯定很复杂。用了以后才发现,使用起来超简单,当然,精通很难,里面的各种配置太多了,本文记录一下自己用到的东西。

echart使用

现在直接引用js文件就可以了

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

echart组件需要在一个宽高固定的DOM里才能显示。
然后只需要两步即可:

	var option="";//初始化echart对象assetPercentChart = echarts.init(document.getElementById("demo"));//为echarts赋值assetPercentChart.setOption(option);

主要关注点在option中。

代码示例

{tooltip: {trigger: 'item',formatter: "{b}: {c} ({d}%)"},legend: {//截取字段formatter: function (name) {if (name.length > 7) {name =  name.slice(0,7) + '...';}return name;},tooltip: {show: true},//开启图例滚动条type: 'scroll',orient: 'vertical',//图例靠左展示x:'left',//图例文字颜色textStyle:{color:"#FFF",},//滚动分页颜色pageTextStyle:{color:"#FFF"},bottom: 40,//滚动按钮颜色pageIconColor:"#FFF"},series : [{name: '时间来源分布',type: 'pie',radius: '65%',avoidLabelOverlap: false,label: {show:false},itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}},data:[{"name":"a","value":2824637},{"name":"b","value":179},{"name":"c","value":1270},{"name":"d","value":7},{"name":"e","value":14005},{"name":"f","value":168067},{"name":"g","value":1042442},{"name":"h","value":1},{"name":"i","value":2338823},{"name":"j","value":41422}],}]}
achieveOption:function(data){return {xAxis: {// show:true,type: 'category',axisLabel: {interval:0,//文字偏转角度rotate:40,//x坐标文字颜色textStyle:{color:'#fff'},formatter:function(name){if(name.length > 6){name = name.slice(0,6) + "...";}return name;}},},yAxis: {axisLabel: {textStyle:{color:'#fff'},// formatter:function(value){// 	if (value > 1000) {// 		value = value/1000 + 'K';// 	}// 	if(value > 1000000){// 		value = value/1000000 + 'M';// 	}// 	return value;// }formatter: function (value) {var res = value.toString();var numN1 = 0;var numN2 = 1;var num1=0;var num2=0;var t1 = 1;for(var k=0;k<res.length;k++){if(res[k]==".")t1 = 0;if(t1)num1++;elsenum2++;}if(Math.abs(value)<1 && res.length>4){for(var i=2; i<res.length; i++){if(res[i]=="0"){numN2++;}else if(res[i]==".")continue;elsebreak;}var v = parseFloat(value);v = v * Math.pow(10,numN2);return v.toString() + "e-" + numN2;}else if(num1>4){if(res[0]=="-")numN1 = num1 - 2;elsenumN1 = num1 - 1;var v = parseFloat(value);v = v / Math.pow(10,numN1);if(num2 > 4)v = v.toFixed(4);return v.toString() + "e" + numN1;}elsereturn parseFloat(value);}},},//数据,格式为[[],[],[]]dataset: {source: data,},//开启图例legend: {},tooltip: {},series: [{// data: [120, 200, 150, 80, 70, 110, 130],type: 'bar',radius:"50%",itemStyle: {normal: {// 随机显示// color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}// 定制显示(按顺序)color: function(params) {var colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB' ];return colorList[params.dataIndex]}},},}]}}

这篇关于Echarts使用笔记--饼图,柱状图的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1144690

相关文章

使用Python实现图像LBP特征提取的操作方法

《使用Python实现图像LBP特征提取的操作方法》LBP特征叫做局部二值模式,常用于纹理特征提取,并在纹理分类中具有较强的区分能力,本文给大家介绍了如何使用Python实现图像LBP特征提取的操作方... 目录一、LBP特征介绍二、LBP特征描述三、一些改进版本的LBP1.圆形LBP算子2.旋转不变的LB

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H

Python中__init__方法使用的深度解析

《Python中__init__方法使用的深度解析》在Python的面向对象编程(OOP)体系中,__init__方法如同建造房屋时的奠基仪式——它定义了对象诞生时的初始状态,下面我们就来深入了解下_... 目录一、__init__的基因图谱二、初始化过程的魔法时刻继承链中的初始化顺序self参数的奥秘默认

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr

Spring Boot 集成 Quartz并使用Cron 表达式实现定时任务

《SpringBoot集成Quartz并使用Cron表达式实现定时任务》本篇文章介绍了如何在SpringBoot中集成Quartz进行定时任务调度,并通过Cron表达式控制任务... 目录前言1. 添加 Quartz 依赖2. 创建 Quartz 任务3. 配置 Quartz 任务调度4. 启动 Sprin

Linux下如何使用C++获取硬件信息

《Linux下如何使用C++获取硬件信息》这篇文章主要为大家详细介绍了如何使用C++实现获取CPU,主板,磁盘,BIOS信息等硬件信息,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录方法获取CPU信息:读取"/proc/cpuinfo"文件获取磁盘信息:读取"/proc/diskstats"文

Java使用SLF4J记录不同级别日志的示例详解

《Java使用SLF4J记录不同级别日志的示例详解》SLF4J是一个简单的日志门面,它允许在运行时选择不同的日志实现,这篇文章主要为大家详细介绍了如何使用SLF4J记录不同级别日志,感兴趣的可以了解下... 目录一、SLF4J简介二、添加依赖三、配置Logback四、记录不同级别的日志五、总结一、SLF4J

使用Python实现一个优雅的异步定时器

《使用Python实现一个优雅的异步定时器》在Python中实现定时器功能是一个常见需求,尤其是在需要周期性执行任务的场景下,本文给大家介绍了基于asyncio和threading模块,可扩展的异步定... 目录需求背景代码1. 单例事件循环的实现2. 事件循环的运行与关闭3. 定时器核心逻辑4. 启动与停

如何使用Nginx配置将80端口重定向到443端口

《如何使用Nginx配置将80端口重定向到443端口》这篇文章主要为大家详细介绍了如何将Nginx配置为将HTTP(80端口)请求重定向到HTTPS(443端口),文中的示例代码讲解详细,有需要的小伙... 目录1. 创建或编辑Nginx配置文件2. 配置HTTP重定向到HTTPS3. 配置HTTPS服务器

Java使用ANTLR4对Lua脚本语法校验详解

《Java使用ANTLR4对Lua脚本语法校验详解》ANTLR是一个强大的解析器生成器,用于读取、处理、执行或翻译结构化文本或二进制文件,下面就跟随小编一起看看Java如何使用ANTLR4对Lua脚本... 目录什么是ANTLR?第一个例子ANTLR4 的工作流程Lua脚本语法校验准备一个Lua Gramm