数据可视化——饼状图

最新推荐文章于 2024-07-07 15:37:01 发布

zcm645500

最新推荐文章于 2024-07-07 15:37:01 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/qq_46028841/article/details/105086019

版权

数据可视化——饼状图

在这里插入图片描述

<body>
   <div id="main" style="width:800px;height:600px;border:1px solid black;margin:0 auto;">

  </div>
  <script src="js/echarts.min.js"></script>
  <script>
    var myChart=echarts.init(document.getElementById("main"))
	var option={
	    title:{text:"学生来源",
		       link:"www.baidu.com",
		       subtext:"来自不确定数据",
				 x:"center",
				 textStyle:{color:"#3333ee"},
				 subtextStyle:{color:"#333333"}},
	    series:[{name:"学生来源省份",
		  type:"pie",
		  //center:["20%","50%"],
		  radius:"30%",
		  label:{show:false},
		  data:[
		    {name:"浙江",value:200},
			{name:"江西",value:40},
			{name:"湖南",value:60},
			{name:"广西",value:50},
			{name:"广东",value:220},
			{name:"福建",value:70}]
			},
			{name:"学生来源学校",
		  type:"pie",
		  //center:["70%","50%"],
		  radius:["40%","70%"],
		  label:{
			  show:true,
			  color:"#445566",
			  formatter:"{b}:{c}名同学 占总学生人数{d}%" },
		  data:[
		    {name:"浙江农林大学",value:200},
			{name:"江西元培学院",value:40},
			{name:"湖南张家界学院",value:60},
			{name:"广西桂林",value:50},
			{name:"广东中山",value:220},
			{name:"福建永华学院",value:70}]
			}],
		tooltip:{
			formatter:"{a} {b}:{c}名同学 占总学生人数{d}%"   //方法1,法二看折线图的列子

			},
		legend:[{
		    orient:"vertical",
			x:"left",
			data:["浙江","江西","湖南","广西","广东","福建"]
			},
			{
			orient:"vertical",
			x:"right",
			data:["浙江农林大学","江西元培学院","湖南张家界学院","广西桂林","广东中山","福建永华学院"]
			}
			]

	};
  //把图表放入实例中
  myChart.setOption(option);
  </script>
 </body>

笔记

series:{
name:
type:“pie”
center:["",""]//调整圆心位置[x,y]
radius: //调整半径的大小数字代表 +px； “百分比”
data:[
{name: , value: } //数据名称，数据的值
]
}
legend：{
orient:“vertical” //布局方式：垂直布局
“horizontal” //水平布局，默认值
}
title:{
subtext: //副标题
link: //主标题链接
sublink: //副标题链接
}
饼状图
radius:["%",数字] //可以通过数组给半径值，将饼状图变成圆环状
label:{
show:true/false //默认显示true
color:
}
labelLine:{
show:true/false //默认显示true
color:
}

formatter属性：文本格式化
1.字符串操作：{a} {b} {c} {d}
trigger：“item”
饼状图
{a} 代表 series 中 name
{b} 代表 series 中 data 中 name
{c} 代表 series 中 data 中 value
{d} 代表 value 占总值的百分比
折线图
{a} 代表 series 中 name
{b} 代表主轴坐标中 data
{c} 代表 series 中 data
trigger：“axis”
多个图表
{a0} {a1}

2.回调函数
function(parames){
return (parames) //代表不同数据
}
注意：trigger：item --> parames是一个对象
trigger: axis --> parames是多个对象数组
什么情况用：
1.不仅仅只是要字符串的值
2.需要对数据进行复杂操作

zcm645500

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
数据可视化——饼状图

数据可视化——饼状图<body> <div id="main" style="width:800px;height:600px;border:1px solid black;margin:0 auto;"> </div> <script src="js/echarts.min.js"></script> <sc...
复制链接

扫一扫