echarts右侧数据对应

ゝ一世哀愁。 2021-12-09 02:27 265阅读 0赞

<!DOCTYPE html>
    <html style="height: 100%">
       <head>
           <meta charset="utf-8">
       </head>
       <body style="height: 60%; margin: 0 auto; width: 1000px" >
           <div id="container" style="height: 100%"></div>
           <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
           <script type="text/javascript">
            var dom = document.getElementById("container");
            var myChart = echarts.init(dom);
            var app = {};
            option = null;
            app.title = '正负条形图';
    
            option = {
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data:['数据']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'value',
                        show: false,
                    }
                ],
                yAxis : [
                    {
                        type : 'category',
                        axisTick : {show: false},
                        data : ['一','二','三','四','五','六','柒', '八']
                    },
                    {
                        type : 'category',
                        name: '百分比',
                        nameTextStyle: {
                            align: 'center',
                            verticalAlign: 'middle',
                        },
                        nameLocation: 'end',
                        position: 'right',
                        offset: 30,
                        axisLine: {
                            show: false
                        },
                        axisTick : {show: false},
                        data : ['2%','20%','30%','40%','50%','60%','70%','80%'],
                    }
                ],
                series : [
                    {
                        name:'利润',
                        type:'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'inside'
                            }
                        },
                        data:[2, 20, 30, 40, 50, 60, 70,80]
                    },
                ]
            };
            ;
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
           </script>
       </body>
    </html>

![https://img-blog.csdnimg.cn/20190716085620612.png?x-oss-process=image/watermark,type\_ZmFuZ3poZW5naGVpdGk,shadow\_10,text\_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n,size\_16,color\_FFFFFF,t\_70][https_img-blog.csdnimg.cn_20190716085620612.png_x-oss-process_image_watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n_size_16_color_FFFFFF_t_70]

[https_img-blog.csdnimg.cn_20190716085620612.png_x-oss-process_image_watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n_size_16_color_FFFFFF_t_70]: /images/20211209/eb9a2a8b2cd041439786627359929833.png