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

相关文章

如何使用Lombok进行spring 注入

《如何使用Lombok进行spring注入》本文介绍如何用Lombok简化Spring注入,推荐优先使用setter注入,通过注解自动生成getter/setter及构造器,减少冗余代码,提升开发效... Lombok为了开发环境简化代码,好处不用多说。spring 注入方式为2种,构造器注入和setter

MySQL中比较运算符的具体使用

《MySQL中比较运算符的具体使用》本文介绍了SQL中常用的符号类型和非符号类型运算符,符号类型运算符包括等于(=)、安全等于(=)、不等于(/!=)、大小比较(,=,,=)等,感兴趣的可以了解一下... 目录符号类型运算符1. 等于运算符=2. 安全等于运算符<=>3. 不等于运算符<>或!=4. 小于运

使用zip4j实现Java中的ZIP文件加密压缩的操作方法

《使用zip4j实现Java中的ZIP文件加密压缩的操作方法》本文介绍如何通过Maven集成zip4j1.3.2库创建带密码保护的ZIP文件,涵盖依赖配置、代码示例及加密原理,确保数据安全性,感兴趣的... 目录1. zip4j库介绍和版本1.1 zip4j库概述1.2 zip4j的版本演变1.3 zip4

Python 字典 (Dictionary)使用详解

《Python字典(Dictionary)使用详解》字典是python中最重要,最常用的数据结构之一,它提供了高效的键值对存储和查找能力,:本文主要介绍Python字典(Dictionary)... 目录字典1.基本特性2.创建字典3.访问元素4.修改字典5.删除元素6.字典遍历7.字典的高级特性默认字典

使用Python构建一个高效的日志处理系统

《使用Python构建一个高效的日志处理系统》这篇文章主要为大家详细讲解了如何使用Python开发一个专业的日志分析工具,能够自动化处理、分析和可视化各类日志文件,大幅提升运维效率,需要的可以了解下... 目录环境准备工具功能概述完整代码实现代码深度解析1. 类设计与初始化2. 日志解析核心逻辑3. 文件处

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸(宽高)四、获取页面旋转角度五、判断

C++中assign函数的使用

《C++中assign函数的使用》在C++标准模板库中,std::list等容器都提供了assign成员函数,它比操作符更灵活,支持多种初始化方式,下面就来介绍一下assign的用法,具有一定的参考价... 目录​1.assign的基本功能​​语法​2. 具体用法示例​​​(1) 填充n个相同值​​(2)

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​,用于描述对象在其生命

使用Python删除Excel中的行列和单元格示例详解

《使用Python删除Excel中的行列和单元格示例详解》在处理Excel数据时,删除不需要的行、列或单元格是一项常见且必要的操作,本文将使用Python脚本实现对Excel表格的高效自动化处理,感兴... 目录开发环境准备使用 python 删除 Excphpel 表格中的行删除特定行删除空白行删除含指定

深入理解Go语言中二维切片的使用

《深入理解Go语言中二维切片的使用》本文深入讲解了Go语言中二维切片的概念与应用,用于表示矩阵、表格等二维数据结构,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧... 目录引言二维切片的基本概念定义创建二维切片二维切片的操作访问元素修改元素遍历二维切片二维切片的动态调整追加行动态