ECharts 多个y轴时使用series.yAxisIndex给数据指定y轴

「爱情、让人受尽委屈。」 2023-10-05 11:01 140阅读 0赞

#### 1 使用详解 ####

**yAxisIndex**

说明：使用的 y 轴 的 index，在单个图表实例中存在多个 y轴的时候有用。

默认值：0。

参数类型：number。

#### 2 原始效果图 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70][]

#### 3 实现代码（给数据指定y轴） ####

<body>
        
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
     
            // 指定图表的配置项和数据
            var option = {
                tooltip: {
    				trigger:'axis',
    				formatter: '{b0}({a0}): {c0}<br />{b1}({a1}): {c1}%'
    			},
                legend: {
                    data:['销量','占比']
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: [ {
                    type: 'value',
                    name: '销量',
                    show:true,
    				splitLine:{show:false},
                    axisLine: {
                        lineStyle: {
                            color: '#5e859e',
                            width: 2
                        }
                    }
                },
                {
                    type: 'value',
                    name: '占比',
                    min: 0,
                    max: 100,
                    interval: 10,
    				splitLine:{show:false},
                    axisLabel: {
                        formatter: '{value} %'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#5e859e',//纵坐标轴和字体颜色
                            width: 2
                        }
                    }
                }],
                series: [{
                    name: '销量',
                    type: 'bar',
    				barWidth : '50%',
                    data: [15, 30, 46, 20, 20, 30]
                },{
                    name: '占比',
                    type: 'line',
    				smooth:true,
    				yAxisIndex:1,
                    data: [5, 1, 2, 4, 9, 66]
                }]
            };
     
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </body>

#### 4 最终效果图（给数据指定y轴） ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 1][]

[旭东怪的个人空间\_哔哩哔哩\_Bilibili旭东怪，人生低谷不可怕，可怕的是坚持不到人生转折点的那一天;旭东怪的主页、动态、视频、专栏、频道、收藏、订阅等。哔哩哔哩Bilibili，你感兴趣的视频都在B站。![1d5330f89298af44e002d6b2230b47659e28c05a.jpg][]https://space.bilibili.com/484264966?spm\_id\_from=333.1007.0.0][Bilibili_Bilibili_B_1d5330f89298af44e002d6b2230b47659e28c05a.jpg_https_space.bilibili.com_484264966_spm_id_from_333.1007.0.0]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201001171904195.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201001171945591.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70
[1d5330f89298af44e002d6b2230b47659e28c05a.jpg]: https://i1.hdslb.com/bfs/face/1d5330f89298af44e002d6b2230b47659e28c05a.jpg
[Bilibili_Bilibili_B_1d5330f89298af44e002d6b2230b47659e28c05a.jpg_https_space.bilibili.com_484264966_spm_id_from_333.1007.0.0]: https://space.bilibili.com/484264966?spm_id_from=333.1007.0.0