ECharts图表图例6

ops/2024/12/22 21:46:55/

java

用eclipse软件

代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<!-- 引入ECharts脚本 -->

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

</script>

<title>Insert title here

</title>

</head>

<body>

<!-- 为ECharts准备一个指定大小的DOM --> <div id="main" style="width:900px; height:600px">

</div>

<script type="text/javascript">

var myChart=echarts.init(document.getElementById("main"));

var option={

title:

{ backgroudColor:'yellow',

text:'某大学三大学院的专业分布',

textStyle:{ color:'green',

fontFamily:'黑体',

fontSize:28

},

x:'center' },

tooltip:{ trigger:'item',

formatter:"{a}<br/>{b}:{c}({d}%)" },

legend:{

orient:'vertical', x:32, y:74,

data:['1-软件技术','1-移动应用开发','2-大数据应用与技术','2-移动互联网应用技术','2-云计算技术与应用','3-投资与理财','3-财务管理'] }, toolbox:{ show:true, x:555, y:74,

feature:{ mark:{show:true}, dataView:{show:true,readOnly:false}, // magicType:{ // show:type, // type:['pie','funnel'] //},

restore:{show:true}, saveAsImage:{show:true} } },

calculable:false, series:[

{ name:'专业名称', type:'pie', selectedMode:'single',

radius:['10%','30%'], label:{ position:'inner' },

labelLine:{ show:false },

data:[

{value:1200,

name:'计算机学院'},

{value:900,name:'大数据学院'}, {value:600,name:'财金学院',selected:true} ] }, { name:'专业名称', type:'pie', selectedMode:'single',

radius:['40%','55%'],

data:[ {value:800,name:'1-软件技术'}, {value:400,name:'1-移动应用开发'}, {value:500,name:'2-大数据应用与技术'}, {value:200,name:'2-移动互联网应用技术'}, {value:200,name:'2-云计算技术与应用'}, {value:400,name:'3-投资与理财'}, {value:200,name:'3-财务管理'},

]

}

]

};

myChart.setOption(option);

</script>

</body>

</html>

45518f6b289c447a9f7e7cff470998af.jpg

 代码结果:

7935b905bce049b89a8ef9772e583bfa.jpg

 

 


http://www.ppmy.cn/ops/124066.html

相关文章

代码随想录 (三)—— 哈希表部分刷题

当我们想使用哈希法来解决问题的时候&#xff0c;我们一般会选择如下三种数据结构。 数组set &#xff08;集合&#xff09;map(映射) 在java中有就是&#xff0c;hashmap, LinkedHashMap, TreeMap &#xff0c;HashTable 等 总结一下&#xff0c;当我们遇到了要快速判断一个…

npm、yarn、pnpm之间的区别

文章目录 npm、yarn、pnpm之间的区别一、引言二、安装速度1、第一步&#xff1a;速度对比 三、磁盘空间利用2、第二步&#xff1a;磁盘空间利用 四、依赖管理3、第三步&#xff1a;依赖管理方式 五、安全性4、第四步&#xff1a;安全性对比 六、日常使用5、第五步&#xff1a;日…

讯飞星火与昇腾AI双向奔赴:本土化技术创新应对全球化挑战的一次成功验证

文 | 智能相对论 作者 | 陈泊丞 2019年&#xff0c;彼时的AI赛道还不像今天这么热。 这一年&#xff0c;人工智能连续第三年出现在政府工作报告中&#xff0c;政策关键词从“加快”“加强”转变为“深化”&#xff0c;开始进入行业需求快速增长的应用探索期。而华为也在这个…

IO,进程线程面试题

1.标准IO和文件IO的区别 标准IO&#xff1a;调用封装好的相关库函数&#xff0c;来实现数据的输入输出 文件IO&#xff1a;调用系统&#xff08;内核&#xff09;提供的相关函数&#xff0c;来实现数据的输入输出 1、标准IO属于库函数&#xff0c;文件IO属于系统调用 2、标准…

go 的 timer reset

在 Go 语言 1.23 版本之前&#xff0c;与Timer&#xff08;定时器&#xff09;关联的通道是异步的&#xff08;有缓冲&#xff0c;容量为 1&#xff09;。这意味着即使在调用Timer.Stop&#xff08;停止定时器&#xff09;或Timer.Reset&#xff08;重置定时器&#xff09;并返…

基于Arduino的宠物食物分配器

创作本文的初衷是本人的一个养宠物的梦想&#xff08;因为家里人对宠物过敏&#xff0c;因此养宠物的action一直没有落实&#xff09;&#xff0c;但是梦想总是要有的哈哈哈哈哈。上周正好是和一个很好的朋友见面&#xff0c;聊到了养宠物的事情&#xff0c;她大概是讲到了喂宠…

详解RTL design的 CDC和RDC

一、CDC(跨时钟域处理,Clock Domain Crossing) (一)基本原理 时钟域的概念 在芯片设计中,时钟域是由一个时钟信号及其相关逻辑组成的区域。每个时钟域内的电路元件(如寄存器、组合逻辑等)都由同一个时钟信号来同步操作。例如,一个微处理器芯片可能有多个时钟域,如用…

垃圾回收器

一、垃圾回收器的三种类型 1.串行 单线程执行&#xff1a;所有的垃圾回收工作都由单个线程完成&#xff0c;即在进行垃圾回收时&#xff0c;应用程序的其他所有线程都会停止。简单而高效&#xff1a;由于单线程执行&#xff0c;实现上相对简单&#xff0c;适用于小型或中小型…