echarts-2.2.7柱状图隐藏y轴和x轴
来源:互联网 发布:淘宝店铺logo分辨率 编辑:程序博客网 时间:2024/06/05 02:20
var dataNum = ["100","200","300","400","500","600"];
var myChartfour = ec.init(document.getElementById('box-four'));
myChartfour.setOption({
title : {
text: '',
subtext: ''
},
tooltip : {
trigger: 'item',
formatter: function(data){
var txt =data.name+": "+dataNum[data.dataIndex]+"人 ("+data.value+"%)";
return txt;
}
},
x:'10%',
y:'15%',
x2:'15%',
y2:'15%',
},
xAxis: [{
type: 'value',
max:100,
show:false,
boundaryGap:true,
axisLabel:{
margin:0
},
splitLine:{
show:false, //不显示分割线
},
}
],
yAxis: [
{
type: 'category',
position:'right',
boundaryGap:false,
axisTick:{
show:false
},
// y 轴线
axisLine:{
show:false,
},
// 分割线设置
splitLine:{
lineStyle:{
width:2,
color:"red",
}
},
axisLabel:{
},
//show:false,
data: ['8:00-9:00','11:00-12:00','15:00-16:00','12:00-13:00','14:00-15:00','13:00-14:00',]
}
],
series : [
{
name:'',
type:'bar',
itemStyle : {
normal: {
color: function(params) {
var colorList = [
'#ee4065','#2196f4','#6ccc00','#f9cb00','#c065ff',
'#41daea'
];
return colorList[params.dataIndex]
},
label : {
show: true,
position: 'left',
formatter:function(params){
return params.value+'%';
}
}
},
emphasis:{
label : {
show: true,
textStyle:{
fontSize:12
}
}
}
},
data:[10,20,30,40,50,60]
}
]
var myChartfour = ec.init(document.getElementById('box-four'));
myChartfour.setOption({
title : {
text: '',
subtext: ''
},
tooltip : {
trigger: 'item',
formatter: function(data){
var txt =data.name+": "+dataNum[data.dataIndex]+"人 ("+data.value+"%)";
return txt;
}
},
grid:{
borderWidth:0,x:'10%',
y:'15%',
x2:'15%',
y2:'15%',
},
xAxis: [{
type: 'value',
max:100,
show:false,
boundaryGap:true,
axisLabel:{
margin:0
},
splitLine:{
show:false, //不显示分割线
},
}
],
yAxis: [
{
type: 'category',
position:'right',
boundaryGap:false,
axisTick:{
show:false
},
// y 轴线
axisLine:{
show:false,
},
// 分割线设置
splitLine:{
lineStyle:{
width:2,
color:"red",
}
},
axisLabel:{
},
//show:false,
data: ['8:00-9:00','11:00-12:00','15:00-16:00','12:00-13:00','14:00-15:00','13:00-14:00',]
}
],
series : [
{
name:'',
type:'bar',
itemStyle : {
normal: {
color: function(params) {
var colorList = [
'#ee4065','#2196f4','#6ccc00','#f9cb00','#c065ff',
'#41daea'
];
return colorList[params.dataIndex]
},
label : {
show: true,
position: 'left',
formatter:function(params){
return params.value+'%';
}
}
},
emphasis:{
label : {
show: true,
textStyle:{
fontSize:12
}
}
}
},
data:[10,20,30,40,50,60]
}
]
});
阅读全文
0 0
- echarts-2.2.7柱状图隐藏y轴和x轴
- ECharts3.0柱状图隐藏y轴和x轴
- echarts 隐藏x轴 y轴 网格线
- echarts柱状图的X轴Y轴加单位的写法
- echarts-去掉X轴、Y轴和网格线
- echarts-去掉X轴、Y轴和网格线
- Echarts去掉柱状图后的分割线和格式化y轴的数值
- Echarts去掉柱状图后的分割线和格式化y轴的数值
- Echarts 柱状图x轴显示全部类目
- echarts 柱状图异常-第一个柱超出y轴
- echarts-设置折线样式和X轴和Y轴的分割线样式
- echarts-设置折线样式和X轴和Y轴的分割线样式
- echarts-设置折线样式和X轴和Y轴的分割线样式
- ECharts Y 轴 倒置
- echarts y 轴百分比
- Echarts--单个Y轴
- Echarts学习记录——如何修改x轴和y轴的颜色
- js 获取echarts点击点的X轴和Y轴值
- ArcGIS for Android 离线数据空间分析--叠加分析
- springboot【8】数据访问之JdbcTemplate访问数据库
- Mabatis学习所碰到的问题(1)
- 使用Eclipse的maven构建一个web项目
- 【Tomcat】-- 小程序开发 tomcat 申请阿里云HTTPS配置
- echarts-2.2.7柱状图隐藏y轴和x轴
- CodeForces
- Android中服务器端与客户端交互
- 面试知识点总结
- 一个能在线处理json等程序员常用功能的网站
- HDU
- 卷积神经网络残差计算
- 微信视频直播如何做收费直播(如何做付费的微信直播)图文教程
- 数据库知识总结