echart 折线图设置y轴单位_echarts折线图有两个图例时如何实现分别采用两个不同单位的y轴...
(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'
}
}
}
},
}
]
};
echart 折线图设置y轴单位_echarts折线图有两个图例时如何实现分别采用两个不同单位的y轴...相关推荐
- echarts折线图不显示y轴值_Echarts 折线图y轴标签值太长时显示不全的解决办法
问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全的情况. 分析 先贴一 ...
- Revit中窗族的立面出图设置和构件显隐
一.窗族的立面出图设置 Revit中,除了平面的出图设置以外还有立面的出图设置. 例如:如何在立面中,使窗户在精细详细程度显示的是窗的全部主体结构而在粗略/中等详细程度下是显示这样的样式呢? 在窗 ...
- 天创速盈:运营核心之测图测款, 拼多多测图测款怎么操作?
在拼多多开店的商家应该知道,主图很重要.如果你建立了一个优秀的主图,你可以吸引很多商家的注意.主图设置好后,需要进行测图操作,看是否能满足要求.那么,拼多多测图测款是如何操作的呢?有哪些事项? 拼多多 ...
- echart 折线图设置y轴单位_如何让echarts中y轴的单位位于数值的右上角
请问:如何让echarts中y轴的单位位于数值的右上角 1.创建折线图的数据区(包括年份和数据). 2.仅选择数据区创建折线图(插入选项卡/图表工具组/折线图). 3.得到的折线图x坐标不满足要求,在 ...
- js折线图设置y轴刻度_手绘风格的 JS 图表库:Chart.xkcd
本文作者:HelloGitHub-kalifun 图表库千万个今天 HelloGitHub 给大家推荐个很有"特色"的图表库:一个手绘风格的 JS 图表库 -- Chart.xkc ...
- echarts 折线图 设置y轴最小刻度_用plotly和plt画图的基本设置(标题、坐标轴、图例、注释、图像)...
参考链接:用plotly和plt画图的基本设置(标题.坐标轴.图例.注释.图像) - weixin_41670527的博客 - CSDN博客 非常好的文章,值得推荐. 一 用matplotlib.py ...
- echarts 折线图 设置y轴最小刻度_数据可视化—Echarts图表应用
<错误>郑愁予 我打江南走过, 那等在季节里的容颜如莲花的开落,东风不来,三月的柳絮不飞.你的心如小小寂寞的城,恰若青石的街道向晚.蛩音不响,三月的春帷不揭,你的心是小小的窗扉紧掩.我达达 ...
- echarts切换折线图变大_Echarts折线图属性设置大全
Echarts折线图属性设置大全 var option = { backgroundColor: '#FFF0F5', title: { text: '折线图', subtext: '模拟数据', x ...
- echarts折线图怎么从y轴开始_基于echarts的双y轴实时更新折线图
一款基于echarts的双y轴实时更新折线图效果,页面加载后开始自动更新数据并绘制对应的折线图,可以点击右上角的按钮:显示数据视图.刷新数据和将数据存储为png的图片. 查看演示 下载资源: 46 次 ...
最新文章
- AI 八数码A_star算法问题-实验报告
- antd 函数组件_react函数组件中引用antd<Form/>组件demo
- 网络推广外包——网络推广外包指出新站上线前一定要做好自我检测
- mybatis不使用动态代理查询时设计与实现
- 王道计算机考研 计算机组成原理 第二章、数据的表示和运算
- 计算机电子表格公式应用和操作,计算机电子表格公式应用常见错误及处理
- 服务器共享文件监控,服务器共享文件监控
- 公安部计算机信息安全产品质量监督检验中心的质量责任和权限
- 在windows 2003系统上安装诺基亚pc套件的方法
- 最新图解 FileZilla Server + FlashFXP 快速傻瓜式搭建FTP服务 1
- iOS 最新AppStore申请加急审核 以及 apple联系方式大全
- 【Python】 使用 xlwt 保存 excel 文件无效 解决
- 51单片机c语言数组怎么用,51单片机之C语言-4.2数组
- 如何调试手机网页页面
- Unity SKFramework框架(一)、Audio音频管理器
- 程序员情人节防止割韭菜
- 基于李雅普诺夫函数的跟踪控制(一)
- 单片机MCU学习方法总结
- 一步一步理解Docker
- qt websocket android,QT使用websocket进行长连接
热门文章
- 如果有人把支付宝的服务器炸了,你的两毛五是不是就没了?
- 使用Oauth2实现微服务的安全保护
- 死磕Java并发:J.U.C之并发工具类:CyclicBarrier
- php抓取新浪微博数据抓取,php利用curl抓取新浪微博内容示例
- 华为mate 20pro升级鸿蒙,华为放大招!华为Mate20系列也能拍月亮,以后还能升级鸿蒙...
- kmeans实际应用例子 java_k-means聚类JAVA实例
- 如何将oracle数据库中的表结构导入到sqlserver中,Oracle转换成SqlServer数据库的步骤...
- C#机房重构-总结(一)
- python 调用c++ boost
- pip Can't connect to HTTPS URL because the SSL module is not available