echarts Y轴刻度和数据对不上,使用了左侧刻度,双Y轴坐标系中,希望其中一个折现对着右边的Y轴刻度

原创于 2022-01-10 15:46:23 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

本文介绍了在Echarts图表中遇到的Y轴刻度与数据不匹配的问题，特别是当设置双Y轴坐标系时，如何确保一条折线对应右侧Y轴的刻度。通过调整配置项，实现折线图正确映射到对应的Y轴刻度，确保数据展示的准确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   series: [
                {// 第一组数据显示数据(y轴左侧刻度)
                    name: '风电发电量',
                    type: 'bar',
                    barWidth: '8%',
                    data: yValue7,
                    label: {
                        show: true, // 开启显示
                        position: 'top', // 在上方显示
                        verticalAlign: 'middle',
                        textStyle: { // 数值样式
                            color: 'black',
                            fontSize: 12
                        }
                    }
                },
                {//第二组显示数据(以y轴右侧刻度)
                    name: '占比',
                    type: 'line',
                    yAxisIndex: 1,    -------------------------->(添加这个属性即可!!!!)
                    data: yValue8,
                    symbol: "none", // 不显示小圆点
                    smooth: true,// true为曲线  false为直线
                    label: {
                        show: true, // 开启显示
                        position: 'top', // 在上方显示
                        verticalAlign: 'middle',
                        textStyle: { // 数值样式
                            color: 'black',
                            fontSize: 12
                        }
                    },
                    itemStyle : {
                        normal: {
                            color:'#71C470', //改变折线点的颜色
                            lineStyle: {
                                color: '#71C470' //改变折线颜色
                            }
                        }
                    }
                }
            ]