echarts折线图有两个图例时如何实现分别采用两个不同单位的y轴
2017-10-19 14:25
423 查看
(1)做法为在series中添加yAxisIndex: 1,这个就可以,默认为yAxisIndex: 0,
(2)下面贴出来完整的代码option = {
backgroundColor : 'rgba(43, 62, 75, 0.5)',//背景颜色
title : {
text : '引流实体',
x : 'center',
textStyle : {
color : '#FFF'
}
},
dataZoom: [//给x轴设置滚动条
{
start:dataZoom_end,
end: 100,
type: 'slider',
show: true,
xAxisIndex: [0],
height: 15,//组件高度
showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
},
//下面这个属性是里面拖到
{
type: 'inside',
show: true,
xAxisIndex: [0],
start:dataZoom_end,
end: 100,
},
],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'line' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid : {//间距距离左右下
//top: '50',
bottom: '45',
left : '1%',
right : '1%',
containLabel : true
},
legend: {
data:['掌上营业厅相关内容点击量','环比增幅'],
textStyle : {
color : '#FFF',
fontSize : 14
},
top:30
},
calculable : true,
xAxis : [
{
type : 'category',
data : dates,
splitLine : {//去掉网格线
show : false
},
axisLine : {//坐标轴轴线相关设置。
show : false,
lineStyle : {
color : '#FFF'
}
},
axisTick : {//坐标轴刻度相关设置
lineStyle : {
color : '#FFF'
}
},
axisLabel: {//x轴文字显示不全并将文字倾斜
interval:0,
rotate:40
}
}
],
yAxis : [
{
type : 'value',
name : '点击量(次)',
axisLabel : {
formatter: '{value}'
},
/*splitLine : {//去掉网格线
show : false
},*/
axisLine : {//坐标轴轴线相关设置。
show : false,
lineStyle : {
color : '#FFF'
}
},
axisTick : {//坐标轴刻度相关设置
show : false,
lineStyle : {
color : '#FFF'
}
},
},
{
type : 'value',
name: '环比增幅(pp%)',
axisLabel : {
formatter: '{value}%'
},
splitLine : {//去掉网格线
show : false
},
axisLine : {//坐标轴轴线相关设置。
show : false,
lineStyle : {
color : '#FFF'
}
},
axisTick : {//坐标轴刻度相关设置
show : false,
lineStyle : {
color : '#FFF'
}
},
}
],
series : [
{
name:'掌上营业厅相关内容点击量',
type:'bar',
data:values,
itemStyle : {
normal : {
color:'#ccecff',
label : {
textStyle : {
fontSize : '15',//柱状上的显示的文字
color:'#0fdc97'
}
}
}
},
},
{
name:'环比增幅',
type:'line',
yAxisIndex: 1,
data:val_float,
itemStyle : {
normal : {
color:'#fe9484',
label : {
textStyle : {
fontSize : '15',//柱状上的显示的文字
color:'#0fdc97'
}
}
}
},
}
]
};
(2)下面贴出来完整的代码option = {
backgroundColor : 'rgba(43, 62, 75, 0.5)',//背景颜色
title : {
text : '引流实体',
x : 'center',
textStyle : {
color : '#FFF'
}
},
dataZoom: [//给x轴设置滚动条
{
start:dataZoom_end,
end: 100,
type: 'slider',
show: true,
xAxisIndex: [0],
height: 15,//组件高度
showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
},
//下面这个属性是里面拖到
{
type: 'inside',
show: true,
xAxisIndex: [0],
start:dataZoom_end,
end: 100,
},
],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'line' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid : {//间距距离左右下
//top: '50',
bottom: '45',
left : '1%',
right : '1%',
containLabel : true
},
legend: {
data:['掌上营业厅相关内容点击量','环比增幅'],
textStyle : {
color : '#FFF',
fontSize : 14
},
top:30
},
calculable : true,
xAxis : [
{
type : 'category',
data : dates,
splitLine : {//去掉网格线
show : false
},
axisLine : {//坐标轴轴线相关设置。
show : false,
lineStyle : {
color : '#FFF'
}
},
axisTick : {//坐标轴刻度相关设置
lineStyle : {
color : '#FFF'
}
},
axisLabel: {//x轴文字显示不全并将文字倾斜
interval:0,
rotate:40
}
}
],
yAxis : [
{
type : 'value',
name : '点击量(次)',
axisLabel : {
formatter: '{value}'
},
/*splitLine : {//去掉网格线
show : false
},*/
axisLine : {//坐标轴轴线相关设置。
show : false,
lineStyle : {
color : '#FFF'
}
},
axisTick : {//坐标轴刻度相关设置
show : false,
lineStyle : {
color : '#FFF'
}
},
},
{
type : 'value',
name: '环比增幅(pp%)',
axisLabel : {
formatter: '{value}%'
},
splitLine : {//去掉网格线
show : false
},
axisLine : {//坐标轴轴线相关设置。
show : false,
lineStyle : {
color : '#FFF'
}
},
axisTick : {//坐标轴刻度相关设置
show : false,
lineStyle : {
color : '#FFF'
}
},
}
],
series : [
{
name:'掌上营业厅相关内容点击量',
type:'bar',
data:values,
itemStyle : {
normal : {
color:'#ccecff',
label : {
textStyle : {
fontSize : '15',//柱状上的显示的文字
color:'#0fdc97'
}
}
}
},
},
{
name:'环比增幅',
type:'line',
yAxisIndex: 1,
data:val_float,
itemStyle : {
normal : {
color:'#fe9484',
label : {
textStyle : {
fontSize : '15',//柱状上的显示的文字
color:'#0fdc97'
}
}
}
},
}
]
};
相关文章推荐
- 如何实现一个IIS服务器绑定两个国际域名(一个IP绑定多个不同域名)
- 一个类如何实现两个接口中同名同参数不同返回值的函数
- echarts实现图例的图标和文字响应不同的事件
- 交换两个数据的值而不采用新的存储单位(C++实现)
- 如何实现一个IIS服务器绑定两个国际域名(一个IP绑定多个不同域名)
- 1个POST表单里面有两个submit分别提交不同的内容,后天如何区分呢?(jung)
- java里如何实现两个等长度的字符串数组有多少个元素相同(从最左边开始,一旦遇到不同元素则跳出计数)
- 如何實現审核的灵活化,即同一单位不同的客户可以实现单级审核,二级审核,多级审核呢?
- 如何实现 两个视图不同速率的平移
- 如何实现:两个int(32位)整数m和n的二进制表达中,有多少个位(bit)不同?
- 一个类如何实现两个接口中同名同参数不同返回值的函数
- 100分!!!如何实现两个不同手机不同APP之间的实时的数据传递
- 如何用同一个工程创建两个不同版本的应用
- 如何用vsftpd实现用户不同权限:只能下载,可上传,管理权限等
- Echarts如何实现在地图上画饼图
- 实现上面两个角和下面两个角不同的xml drawable
- 如何用一维数组实现两个栈的基本操作
- 如何打包生成App的两个不同名字,不同图标
- VS下如何实现一个工程具有两个项目, 测试项目B 调用 A项目生成的dll文件