echart图表环形图(饼图)
2018-02-03 00:49
393 查看
最近由于项目需要接触了echart图表插件,由于echart表格配置项比较多,因此整理了自己遇到的一些图表并且粘贴出代码,echarts官网API http://echarts.baidu.com/option.html#title
首先,用图示解释几个配置option属性
tooltip:
legend:
labelLine:
需要实现的效果图如下,直接贴上代码,各配置项已在代码中通过注释说明清楚
代码:
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8"></meta>
<title>commonChart.js示例</title>
<scriptsrc="./echarts/echarts.min.js"charset="utf-8"></script>
<scriptsrc="./echarts/commonChart.js"charset="utf-8"></script>
</head>
<style>
.chartbox{
display:block;
width:1024px;
margin:20pxauto;
min-height:400px;
border-bottom:1pxsolid#ddd;
}
</style>
<body>
<h2>圆环</h2>
<div
class="chartbox"
id="pie"></div>
<div
class="chartbox"
id="bar"></div>
<scriptsrc="./js/jQuery/jquery-2.2.3.min.js"></script>
<scriptcharset="utf-8">
//环形图
// var data = [ {value:335, name:'直接访问',itemStyle:labelBottom}, {value:310, name:'邮件营销',itemStyle:labelTop}];
var data = [{value:335,name:'直接访问'}, {value:310,name:'邮件营销'}];
var option1 = {
//提示框组件
tooltip:{
trigger:'item',
//两种方法:字符串模板,回调函数
//饼图、仪表盘、漏斗图: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)
// formatter:'{b}:{c}
form
4000
atter:function(params){
var res =params.data.name +':' +params.data.value
+'(' +params.percent+'%)';
return res;
}
},
//图例组件
legend:{
orient:'vertical',
data:['直接访问','邮件营销'],//注意:此次的data必须为series中data的每个目录名,否则不显示
x:'left',
z:100
},
//全局的字体样式。控制全局样式,字体颜色,大小均可在此控制,此处不设置全局颜色,用默认值
textStyle:{
// color:'#000',
fontSize:28
},
//系列列表。每个系列通过 type 决定自己的图表类型
series:[{
type:'pie',
name:'访问来源',//
color:"",//控制整个图像颜色,字体跟环颜色都改变
textStyle:{
color:"#fff"
},
avoidLabelOverlap:true,//是否启用防止标签重叠策略,默认开启,在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠。如果不需要开启该策略,例如圆环图这个例子中需要强制所有标签放在中心位置,可以将该值设为 false。查看http://echarts.baidu.com/option.html#series-pie.label
//此处label文字分两种情况,normal,emphasis(http://echarts.baidu.com/option.html#series-pie.label.color?控制不到)以下均是,都得放入normal{}
label:{
normal:{
show:true,
position:'outside',//饼图扇区外侧,通过视觉引导线连到相应的扇区。
formatter:'{b}:{c}',//格式化要显示的内容
}
},
//引导线样式
labelLine:{
normal:{
lineStyle:{
color:"#000"//此处可修改引导线颜色
}
}
},
//饼图的半径,数组的第一项是内半径,第二项是外半径。支持设置成百分比,相对于容器高宽中较小的一项的一半。
radius: ['50%','60%'],//半径
center: ['50%','45%'],//圆心坐标饼图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。
//图形样式。除文字外图形样式
itemStyle:{},
//系列中的数据内容数组。数组项可以为单个数值
data:data
}]
};
var chart1 =echarts.init(document.getElementById('pie'));
chart1.setOption(option1);
//可参考http://echarts.baidu.com/examples/editor.html?c=pie-doughnut
</script>
</body>
</html>
要是想实现以下的效果呢?
只需通过data中的itemStyle进行单个样式控制,添加下面代码:
//环形图
//若不单独设置会采用默认样式
var labelBottom = {
normal:{
color:"#ddd",
label:{
show:true,
position:'center',
formatter:"{b}\n{d}%",
textStyle:{
color:'#000',//可修改单个颜色
}
},
labelLine:{
show:true,
lineStyle:'#000'
}
}
},
labelTop={
normal:{
color:"#FFB24D",
label:{
show:true,
position:'outside',
formatter: "{b}\n{d}%",
},
labelLine: {
show: true,
lineStyle: {
color:'#FFB24D'
}
}
}
}
var data = [ {value:335,name:'直接访问',itemStyle:labelBottom},
{value:310,name:'邮件营销',itemStyle:labelTop}];
首先,用图示解释几个配置option属性
tooltip:
legend:
labelLine:
需要实现的效果图如下,直接贴上代码,各配置项已在代码中通过注释说明清楚
代码:
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8"></meta>
<title>commonChart.js示例</title>
<scriptsrc="./echarts/echarts.min.js"charset="utf-8"></script>
<scriptsrc="./echarts/commonChart.js"charset="utf-8"></script>
</head>
<style>
.chartbox{
display:block;
width:1024px;
margin:20pxauto;
min-height:400px;
border-bottom:1pxsolid#ddd;
}
</style>
<body>
<h2>圆环</h2>
<div
class="chartbox"
id="pie"></div>
<div
class="chartbox"
id="bar"></div>
<scriptsrc="./js/jQuery/jquery-2.2.3.min.js"></script>
<scriptcharset="utf-8">
//环形图
// var data = [ {value:335, name:'直接访问',itemStyle:labelBottom}, {value:310, name:'邮件营销',itemStyle:labelTop}];
var data = [{value:335,name:'直接访问'}, {value:310,name:'邮件营销'}];
var option1 = {
//提示框组件
tooltip:{
trigger:'item',
//两种方法:字符串模板,回调函数
//饼图、仪表盘、漏斗图: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)
// formatter:'{b}:{c}
form
4000
atter:function(params){
var res =params.data.name +':' +params.data.value
+'(' +params.percent+'%)';
return res;
}
},
//图例组件
legend:{
orient:'vertical',
data:['直接访问','邮件营销'],//注意:此次的data必须为series中data的每个目录名,否则不显示
x:'left',
z:100
},
//全局的字体样式。控制全局样式,字体颜色,大小均可在此控制,此处不设置全局颜色,用默认值
textStyle:{
// color:'#000',
fontSize:28
},
//系列列表。每个系列通过 type 决定自己的图表类型
series:[{
type:'pie',
name:'访问来源',//
color:"",//控制整个图像颜色,字体跟环颜色都改变
textStyle:{
color:"#fff"
},
avoidLabelOverlap:true,//是否启用防止标签重叠策略,默认开启,在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠。如果不需要开启该策略,例如圆环图这个例子中需要强制所有标签放在中心位置,可以将该值设为 false。查看http://echarts.baidu.com/option.html#series-pie.label
//此处label文字分两种情况,normal,emphasis(http://echarts.baidu.com/option.html#series-pie.label.color?控制不到)以下均是,都得放入normal{}
label:{
normal:{
show:true,
position:'outside',//饼图扇区外侧,通过视觉引导线连到相应的扇区。
formatter:'{b}:{c}',//格式化要显示的内容
}
},
//引导线样式
labelLine:{
normal:{
lineStyle:{
color:"#000"//此处可修改引导线颜色
}
}
},
//饼图的半径,数组的第一项是内半径,第二项是外半径。支持设置成百分比,相对于容器高宽中较小的一项的一半。
radius: ['50%','60%'],//半径
center: ['50%','45%'],//圆心坐标饼图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。
//图形样式。除文字外图形样式
itemStyle:{},
//系列中的数据内容数组。数组项可以为单个数值
data:data
}]
};
var chart1 =echarts.init(document.getElementById('pie'));
chart1.setOption(option1);
//可参考http://echarts.baidu.com/examples/editor.html?c=pie-doughnut
</script>
</body>
</html>
要是想实现以下的效果呢?
只需通过data中的itemStyle进行单个样式控制,添加下面代码:
//环形图
//若不单独设置会采用默认样式
var labelBottom = {
normal:{
color:"#ddd",
label:{
show:true,
position:'center',
formatter:"{b}\n{d}%",
textStyle:{
color:'#000',//可修改单个颜色
}
},
labelLine:{
show:true,
lineStyle:'#000'
}
}
},
labelTop={
normal:{
color:"#FFB24D",
label:{
show:true,
position:'outside',
formatter: "{b}\n{d}%",
},
labelLine: {
show: true,
lineStyle: {
color:'#FFB24D'
}
}
}
}
var data = [ {value:335,name:'直接访问',itemStyle:labelBottom},
{value:310,name:'邮件营销',itemStyle:labelTop}];
相关文章推荐
- 菜鸟第一次写Echart图表
- echart常用基础环形图
- echart chart morisjs 图表重叠
- Android加载echart图表
- 前端Echart图表展示
- 数据输入——生成你需要的echart图(堆积柱状图、扇形图、嵌套环形图)
- echart图表的各种参数介绍
- 利用echart 做以特定数值为分界线的图表
- 【Leafletjs】7.结合echart图表展示信息
- echart图表控件配置入门(常用图表数据动态绑定)
- WPF原生环形图表
- 百度echart图表宽度自适应问题的一种解决思路
- 使用echart百度图表的一些经验(1)
- 免费而优秀的图表JS插件、js图表、html图表--百度的Echart、Highcharts、阿里的G2、Chart.js
- Echart 画图表工具
- echart图表的各种参数介绍
- leaflet + echart 图表展示信息
- echart 图表显示技术
- 在小程序中使用Echart图表的示例代码