数据可视化——饼状图
数据可视化——饼状图
<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.需要对数据进行复杂操作