关于echarts的饼状体
来源:互联网 发布:淘宝购物车营销不见了 编辑:程序博客网 时间:2024/05/21 04:43
function showPieChart3(){
var pieChart=echarts.init(document.getElementById('tu1'));
var option = {
title : { //设置标题
text: '某站点用户访问来源22',
subtext: '纯属虚构',
x:'center',//标题的x轴位置,可选为left,right,center,还可以用left来代替x
y:'top',//标题的y轴位置,可选top,center,bottom,还可以用top来代替y
textStyle: {
color: '#c2c6cf',//设置字体颜色
fontSize:'20',//设置字体的大小
fontFamily:'宋体'//设置字体样式
}
},
//backgroundColor:'red',//不设置渐变色
backgroundColor://第一个(0.5)参数是x轴位置,第二个参数(0.5)是y轴位置,第三个参数(0.5)是半径的大小
new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [{
offset: 0, color: 'white' // 开始的颜色,offset为透明度,1表示不透明,0代表完全透明
}, {
offset: 1, color: 'red' // 结束的颜色,100% 处的颜色
}], false),//这个false表示使这个渐变色生效,可以不写,如果写成true则渐变颜色失效
legend: {
show:true,//是否显示,默认为true
orient: 'horizontal',//这两个小图标是水平显示(horizontal),还是垂直显示(vertical),默认为水平显示horizontal
data: ['本地车', '外地车'],
x:'center',//水平安放位置,默认为全图右对齐,可选值为center,left,right;还可以用left来代替x
y:'bottom',//垂直安放位置,默认为全图顶端,可选为top,bottom,center;还可以用top来代替y
padding:100,//工具箱内边距,单位px,现在可使这个标签距离最近的两个间距为100px
itemWidth: 10, // 图例图形宽度
itemHeight: 10,// 图例图形高度
textStyle: {
color: '#c2c6cf',//设置字体颜色
fontSize:'15',//设置字体的大小
fontFamily:'华文琥珀'//设置字体样式
}
},
tooltip : {
show:true,//当鼠标放在饼图上时,是否需要显示提示信息,默认为true
trigger: 'item',//触发类型,默认为item(数据触发),即只显示该点的数据;还可以为axis,显示坐标轴该点下对应的所有数据
formatter: "{a}<br/> {b} : {c} ({d}%)"//a,b,c,d所表示的内容在下面已经标注出来了,a(系列名称),b(数据项名称),c(数值), d(百分比)
/* formatter:function(params) {
return params[0].name + ” : ” + params[0].value; //自定义的需要显示的东西
} */
},
series : [
{
name: '访问来源',//a
type: 'pie',//显示的类型,饼状图是pie,不同的图形不同的type
radius : '50%',//设置圆圈的大小
center: ['50%', '50%'],//距离左边和上边的间距百分比
data:[
{
value:30,//c
name:'本地车',//b
itemStyle:{
normal:{
color:'white',
/*textStyle: {
fontSize:'100'
}饼状图不支持改变饼状图内部的字体样式,即设置字体大小失效(本地车,外地车失效)*/
}
},
},
{
value:50,
name:'外地车',
itemStyle:{
normal:{
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{//这个地方的渐变和上面的渐变不同,需要注意
offset: 0, color: 'yellow' // 开始的颜色,0010从左向右渐变,0001从上向下渐变,1000从下向上渐变等等
}, {
offset: 1, color: 'red' // 结束的颜色
}], false),//这个false表示使这个渐变色生效,可以不写,如果写成true则渐变颜色失效
}
},
},
],
}
]
};
pieChart.setOption(option);
}
var pieChart=echarts.init(document.getElementById('tu1'));
var option = {
title : { //设置标题
text: '某站点用户访问来源22',
subtext: '纯属虚构',
x:'center',//标题的x轴位置,可选为left,right,center,还可以用left来代替x
y:'top',//标题的y轴位置,可选top,center,bottom,还可以用top来代替y
textStyle: {
color: '#c2c6cf',//设置字体颜色
fontSize:'20',//设置字体的大小
fontFamily:'宋体'//设置字体样式
}
},
//backgroundColor:'red',//不设置渐变色
backgroundColor://第一个(0.5)参数是x轴位置,第二个参数(0.5)是y轴位置,第三个参数(0.5)是半径的大小
new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [{
offset: 0, color: 'white' // 开始的颜色,offset为透明度,1表示不透明,0代表完全透明
}, {
offset: 1, color: 'red' // 结束的颜色,100% 处的颜色
}], false),//这个false表示使这个渐变色生效,可以不写,如果写成true则渐变颜色失效
legend: {
show:true,//是否显示,默认为true
orient: 'horizontal',//这两个小图标是水平显示(horizontal),还是垂直显示(vertical),默认为水平显示horizontal
data: ['本地车', '外地车'],
x:'center',//水平安放位置,默认为全图右对齐,可选值为center,left,right;还可以用left来代替x
y:'bottom',//垂直安放位置,默认为全图顶端,可选为top,bottom,center;还可以用top来代替y
padding:100,//工具箱内边距,单位px,现在可使这个标签距离最近的两个间距为100px
itemWidth: 10, // 图例图形宽度
itemHeight: 10,// 图例图形高度
textStyle: {
color: '#c2c6cf',//设置字体颜色
fontSize:'15',//设置字体的大小
fontFamily:'华文琥珀'//设置字体样式
}
},
tooltip : {
show:true,//当鼠标放在饼图上时,是否需要显示提示信息,默认为true
trigger: 'item',//触发类型,默认为item(数据触发),即只显示该点的数据;还可以为axis,显示坐标轴该点下对应的所有数据
formatter: "{a}<br/> {b} : {c} ({d}%)"//a,b,c,d所表示的内容在下面已经标注出来了,a(系列名称),b(数据项名称),c(数值), d(百分比)
/* formatter:function(params) {
return params[0].name + ” : ” + params[0].value; //自定义的需要显示的东西
} */
},
series : [
{
name: '访问来源',//a
type: 'pie',//显示的类型,饼状图是pie,不同的图形不同的type
radius : '50%',//设置圆圈的大小
center: ['50%', '50%'],//距离左边和上边的间距百分比
data:[
{
value:30,//c
name:'本地车',//b
itemStyle:{
normal:{
color:'white',
/*textStyle: {
fontSize:'100'
}饼状图不支持改变饼状图内部的字体样式,即设置字体大小失效(本地车,外地车失效)*/
}
},
},
{
value:50,
name:'外地车',
itemStyle:{
normal:{
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{//这个地方的渐变和上面的渐变不同,需要注意
offset: 0, color: 'yellow' // 开始的颜色,0010从左向右渐变,0001从上向下渐变,1000从下向上渐变等等
}, {
offset: 1, color: 'red' // 结束的颜色
}], false),//这个false表示使这个渐变色生效,可以不写,如果写成true则渐变颜色失效
}
},
},
],
}
]
};
pieChart.setOption(option);
}
阅读全文
0 0
- 关于echarts的饼状体
- 关于Echarts的操作
- 关于echarts的一点记录
- 关于echarts 图标的 demo
- 关于echarts的dataZoom组装
- 关于Echarts的学习使用方法的建议
- 关于echarts 跟ie的兼容性问题
- 关于Echarts柱状图实现的细节
- 关于JavaScript上ECharts的代码详解
- 关于echarts的一些使用总结(饼图);
- 关于使用ECharts时注意的问题
- 关于echarts和ajax的简单运用
- 关于echarts加载地图时好时坏的问题
- 关于echarts is not defined的问题
- echarts插件——关于echarts在默认隐藏的div中不显示的问题
- ECharts图表中级入门之formatter:夜谈关于ECharts图表内的数据格式化方法
- ECharts图表中级入门之formatter:夜谈关于ECharts图表内的数据格式化方法
- Echarts关于仪表盘
- Chapter 3
- 使用Android Studio导入源码
- zabbix使用企业微信发送告警信息
- Linux下openldap的配置的访问
- C#利用反射,遍历获得一个类的所有属性名,以及该类的实例的所有属性的值
- 关于echarts的饼状体
- c#网络编程学习的几个链接
- Cisco VPP(1) 简介
- 谈谈对Android中的消息机制的理解
- GMT5SAR--由*.grd文件生成*.ps
- activeMQ问题一初识界面
- scrapy+python爬地图参照物应该有的坑及解决办法
- Android_Sqlbrite入门使用
- Windows下SVN提交模板制作及应用