ECharts-饼状图使用
ECharts可视化图表-饼状图总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script> // 引入echarts-cdn
</head>
<body>
<div id="main" style="width: 600px;height:400px;margin:20px auto"></div>
</body>
</html>
<script>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 饼状图-指定图表的配置项和数据
var option = {
backgroundColor: '#fff', // 图表背景色
title: {
text: '{a|饼}{b|状图}', // 标题(采用了自定义富文本样式)
subtext:'{c|副标题}', // 副标题
left: 'center', // 离容器左侧的距离数值可以为具体数值20,百分比20%,'left','center','right'
itemGap:5, // 主副标题之间间距
top: 0, // 离容器上侧的距离
textStyle: {
// 标题样式 rich属性为自定义富文本样式(可以不使用)
fontSize:30,
color:'red',
rich:{
a:{
fontSize:30,
color:'red',
},
b:{
color:'skyblue',
},
}
},
subtextStyle:{
// 副标题样式
rich:{
c:{
fontSize:20,
color:'black',
padding:[30,10]
},
}
},
},
tooltip: {
// 提示框
show:true, // 默认
trigger: 'item', // 触发类型 item>饼图,散点图等,axis>柱状图,折线图等
backgroundColor:'rgba(50,50,50,0.7)', // 提示框背景颜色
borderColor:'#333', // 提示框浮层的边框颜色
formatter: "{a}
{b}: {c} ({d}%)", // 注意，换行仍是使用 '\n'。模板变量有 {a}, {b}，{c}，{d}，
// 分别表示系列名，数据名，数据值等 formatter 1, 字符串模板 2,回调函数自定义
},
legend: {
// 图例
orient: 'vertical', // 图例列表的布局朝向 horizontal(默认)
left: 'left',
// width: // 图例组件宽度自适应
// formatter:function(name){ // 也可以使用回调展示自定义名称
// },
textStyle:{
// 图例文本样式
color:'#333',
fontStyle: 12
},
itemGap:10, // 图例每项的间隔
selectedMode:true, // 图例选择的模式 禁用/启用
icon:"rect", // 图例项的 icon。
data:['直接访问','邮件营销','联盟广告','视频广告'], // 图例数据
},
color:[ // 渐变色
new echarts.graphic.LinearGradient(0,0,1,0,[{
offset:0,color:'#2D87F6' },{
offset:1,color:"#64C1FC" }]),
new echarts.graphic.LinearGradient(0,0,1,0,[{
offset:0,color:'#FFC67B' },{
offset:1,color:"#FF9445" }]),
new echarts.graphic.LinearGradient(0,0,1,0,[{
offset:0,color:'#AC8FF5' },{
offset:1,color:"#7456E8" }]),
new echarts.graphic.LinearGradient(0,0,1,0,[{
offset:0,color:'#DF83FA' },{
offset:1,color:"#BE69EB" }]),
],
series: [
{
name:'访问来源', // 系列名称，用于tooltip的显示
type:'pie', // 图表类型
radius: ['50%', '70%'], // 圆环的内径-外径
center:['50%','55%'], // 上-下距离
roseType:false, // 是否展示成南丁格尔图radius/area
avoidLabelOverlap: false, // 解决标签的重叠
label: {
// 饼图图形上的文本标签
normal: {
show: true, // 显示 隐藏
position: 'outside', // 标签的位置
formatter: '{b} {c}', // 标签回调自定义函数
color:'#000'
},
emphasis: {
// 高亮的扇区和标签样式。
show: false,
textStyle: {
fontSize: '20',
fontWeight: 'bold'
}
}
},
labelLine: {
// 标签的视觉引导线样式
normal: {
show: true,
length:20, // 引导线长度1
length2:30 // 引导线长度2
}
},
itemStyle:{
// 图形样式。
// color:'red' // 默认从全局调色盘 option.color 获取颜色
},
data:[ // 数据源
{
value:335, name:'直接访问'},
{
value:310, name:'邮件营销'},
{
value:234, name:'联盟广告'},
{
value:135, name:'视频广告'},
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
效果图
