数据可视化——饼状图

数据可视化——饼状图

在这里插入图片描述

<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.需要对数据进行复杂操作

发布了4 篇原创文章 · 获赞 0 · 访问量 17
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览