echarts 折线图怎么设置左侧是数值，右侧是百分比

最近项目才开始使用 echarts 遇到了一些问题，记录下，先看下效果图(请忽略数据)：

问题一：怎么设置y轴左边的数值，右侧是百分比？

解决方案

先说一下如何实现双y轴，echarts中有个控制y轴的属性叫yAxis，这个属性当我们里面只设置一个需求时，它可以为对象，当我们要设置很多需求时，它还可以是个数组，所以我们要设置双y轴，它就需要为数组，看代码：

yAxis: [
	{
	    type: "value",
	    name: "对话/访问",
	    ....
	},
	{
	    type: "value",
	    name: "对话率%",
	    ....
	}
],

这时候就有两个y轴了，一个为 访问/对话 另一个为 对话率，在series中我们要不同数据对应不同y轴显示，我们要通过 yAxisIndex 来控制要对应显示的y轴在yAxis数组中的下标，如：

{
	name: "对话率",
	yAxisIndex:1,
}

这个数据对应的就是下标为0的次数y轴，那么我们怎么才能让概率轴以百分比数显示呢，既然是控制y轴当然得在yAxis的对应对象里操作：

{
     type: "value",
     name: "对话率%",
     min: 0,
     max: 200,
     axisLabel: {
         show: true,
         interval: "auto",
         formatter: "{value}%"
     },
 }

问题二：echarts 折线图数据对应不上y轴是怎么回事？

解决方案

如果上面你设置了还是不行，那么可能是 stack 的值问题，需要修改每个 stack 都不一样，就不会叠加y轴，如下：

series: [
	{
	    name: "访问次数",
	    stack: "访问次数",
	    ...
	},
	{
	    name: "对话量",
	    stack: "对话量",
	    ...
	},
	{
	    name: "对话率",
	    stack: "对话率",
	    ...
	}
]

完整代码demo

myChart.setOption({
    title: {
        text: "浏览-对话趋势",
        left: "center"
    },
    tooltip: {
        trigger: "axis"
    },
    legend: {
        data: ["访问次数", "对话量", "对话率"],
        bottom: "5%"
    },
    grid: {
        left: "2%",
        right: "4%",
        bottom: "15%",
        containLabel: true
    },
    toolbox: {
        feature: {
            // 去掉图片下载
            // saveAsImage: {}
        }
    },
    xAxis: {
        type: "category",
        boundaryGap: false,
        data: [
            "08-30",
            "08-31",
            "09-01",
            "09-02",
            "09-03",
            "09-04",
            "09-05",
        ]
    },
    yAxis: [
        {
            type: "value",
            name: "对话/访问",
            // nameLocation:'center',
            nameTextStyle: {
                color: "#89A54E"
            },
            axisLabel: {
                textStyle: {
                    color: "#89A54E"
                }
            },
            axisLine: {
                show: false
            },
            axisTick: { show: false }
        },
        {
            nameTextStyle: {
                color: "#4572A7"
            },
            type: "value",
            name: "对话率%",
            position: "right",
            axisLine: {
                show: false
            },
            axisTick: { show: false },
            min: 0,
            max: 200,
            axisLabel: {
                textStyle: {
                    color: "#4572A7"
                },
                show: true,
                interval: "auto",
                formatter: "{value}%"
            },
            show: true
        }
    ],
    series: [
        {
            name: "访问次数",
            type: "line",
            stack: "访问次数",
            smooth:true,
            icon: "line",
            itemStyle: {
                normal: {
                    color: "#88e5ff",
                    lineStyle: {
                        color: "#88e5ff"
                    }
                }
            },
            areaStyle: { normal: { color: "#88e5ff" } }, // 添加颜色区域
            data: [0, 0, 0, 134, 0, 0, 0]
        },
        {
            name: "对话量",
            type: "line",
            stack: "对话量",
            smooth:true,
            itemStyle: {
                normal: {
                    color: "#a8f5a1",
                    lineStyle: {
                        color: "#a8f5a1"
                    }
                }
            },
            areaStyle: { normal: { color: "#a8f5a1" } },
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: "对话率",
            yAxisIndex:1,
            type: "line",
            stack: "对话率",
            smooth:true,
            itemStyle: {
                normal: {
                    color: "#b78ffc",
                    lineStyle: {
                        color: "#b78ffc"
                    }
                }
            },
            areaStyle: { normal: { color: "#b78ffc" } },
            data: [50, 100, 120, 55, 23, 78, 200]
        }
    ]
});