ECharts只有一条曲线的cpu使用情况曲线图下怎样设置双Y轴

来源：蜘蛛抓取(WebSpider) 时间：2017-10-25 10:12 标签： 如何设置rps曲线
2833人阅读
echarts（5）
需求：折线图实现双y轴，并实现不同的参数使用不同的y轴
1、yAxis中添加双轴
type: 'value',
name: '温度',
axisLabel: {
formatter: '{value}℃'
type: 'value',
name: '百分比',
&axisLabel: {
formatter: '{value}%'
position：y轴的位置，
默认 grid 中的第一个 y 轴在 grid 的左侧（'left'），第二个 y 轴视第一个 y 轴的位置放在另一侧。
2、series中添加参数yAxisIndex
name: '送风温度（℃）',
type: 'line',
yAxisIndex: 1,
data: ary0
name: '风机速度反馈（%）',
type: 'line',
yAxisIndex: 1,
data: ary8
yAxisIndex默认是0，即使用第一个y轴设置0，地位个y轴设置1
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：27731次
排名：千里之外
原创：35篇
(5)(5)(2)(2)(7)(4)(10)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
源码如下：
cpupie1.prototype.replace=function(id,menuName, xdata, ydata, ldata) {
//基于准备好的dom,初始化echart图表
require.config({
echarts:'/plugins/echarts'
'echarts',
'echarts/theme/green',
'echarts/chart/line',
'echarts/chart/bar',
function(ec,theme) {
var myChart = ec.init(document.getElementById(id));
//定义图表option
threatOptions = {
noDataLoadingOption:{
text :"暂无数据",
effect : 'whirling',
effectOption:{
backgroundColor:"#f7f7f7"
textStyle : {
fontSize : 20
text: menuName,
// subtext: '数据来自防火墙',
//水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
x: 'center',
//垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
//提示框，鼠标悬浮交互时的信息提示
tooltip: {
//触发类型，默认（'item'）数据触发，可选为：'item' | 'axis'
trigger: 'axis'
toolbox: {
show : true,
feature : {
mark : {show: true},// 辅助线
dataView : {show: true, readOnly: false}, //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
magicType: {show: true, type: ['line', 'bar']},
restore : {show: true}, //配置项还原。
saveAsImage : {show: true} //保存为图片。
calculable : true,
//图例，每个图表最多仅有一个图例
show: true,
x: 'left',
data: [ldata]
type: 'category',
name:'时间',
type: 'value',
data : [20,40,60,80,100]
//data : ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
series : [
name: ldata+"数量",
type: 'line',
itemStyle: {
color: '#d07e75',
if(xdata != ""){
threatOptions.xAxis[0].data=
if(ydata != ""){
threatOptions.series[0].data=
//为echarts对象加载数据
myChart.setOption(threatOptions);
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
type为value的时候不能设置data，如果要设置为[20,40,60,80,100]的话则使用min:20（最小值）,max:100（最大值）,interval:20（间隔单位），类似的自己设置就行
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
yAxis.data[i] Object类目数据，在类目轴（type: 'category'）中有效。示例：// 所有类目名称列表data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']// 每一项也可以是具体的配置项，此时取配置项中的 value 为类目名data: [{
value: '周一',
// 突出周一
textStyle: {
fontSize: 20,
color: 'red'
}, '周二', '周三', '周四', '周五', '周六', '周日']
以上是我在echarts官方配置项里面摘抄的，特别注意的是：data在类目轴（type: 'category'）中有效，然而你的yAxis的类型是value
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：2649人阅读
option = {
text: 'Step Line'
tooltip: {
trigger: 'axis'
x: 'right',
data:['NO1','NO2','NO3','NO4'],
textStyle:{
color:&#FFFFFF&,
fontsize:5
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
toolbox: {
feature: {
saveAsImage: {}
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
boundaryGap: [0, '50%'],
axisLine: {
lineStyle: {
color:'#0B438B'
type: 'value',
name:'体积 m',
position:'left',
offset:50,
splitNumber:10,
axisLabel: {
formatter: '{value}',
textStyle:{
color:'#0B438B'
splitLine:{
show:false,
boundaryGap: [0, '50%'],
axisLine: {
lineStyle: {
color:'#0B438B'
splitLine:{
show:false,
type: 'value',
name:'温度 C',
position:'left',
axisLabel: {
formatter: '{value} C'
boundaryGap: [0, '50%'],
axisLine: {
lineStyle: {
color:'#0B438B'
splitLine:{
show:false,
type: 'value',
name:'压力',
position:'right',
axisTick:{
inside:'false',
length:10,
name:'NO1',
type:'line',
step: 'middle',
data:[120, 132, 101, 134, 90, 230, 210],
yAxisIndex:0,
name:'NO2',
type:'line',
step: 'start',
data:[30, 28, 20, 23, 29, 43, 41],
yAxisIndex:1,
name:'NO3',
type:'line',
step: 'end',
data:[450, 432, 401, 454, 590, 530, 510],
yAxisIndex:2,
yAxisIndex ：表示数据对应的y轴
可参考链接内容
/editor.html?c=xSkm36n7--
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：4627次
排名：千里之外
(4)(1)(1)(1)(1)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'echarts如何让折线图的每个折点都显示数值？ - 知乎15被浏览21036分享邀请回答181 条评论分享收藏感谢收起itemStyle : { normal: {label : {show: true}}},
4添加评论分享收藏感谢收起查看更多回答

我要回帖

更多关于 如何设置rps曲线 的文章

 

随机推荐