ECharts Y轴倒置+DataSet

待我称王封你为后i 2022-05-20 09:10 322阅读 0赞

参考资料：  
1.  [https://blog.csdn.net/u013402515/article/details/49149265][https_blog.csdn.net_u013402515_article_details_49149265]  
2.   [http://echarts.baidu.com/doc/example/line6.html 降雨图][http_echarts.baidu.com_doc_example_line6.html]  
3. [https://www.cnblogs.com/goloving/p/9114048.html Echarts使用dataset数据集管理数据][https_www.cnblogs.com_goloving_p_9114048.html Echarts_dataset]  
  
![70][]

<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>ECharts Y轴倒置+DataSet</title>
        
        <script src="js/echarts.js"></script>
    </head>
    <body>
        
        <div id="main" style="width: 800px; height: 400px;"></div>
    
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
    
            // 指定图表的配置项和数据
            option = {
                title:
                {
                    text: '成绩+排名'
                },
    
                legend:
                {
                    x: '200',
                    data: ['最高分', '最低分', '平均分', '级部排名']
                },
    
                tooltip:
                {
                    trigger: 'axis',
                    textStyle:
                    {
                        fontSize: 10,
                        fontStyle: 'consolas'
                    },
                    formatter: function (params) {
                        var text = params[0].name + '<br/>';
    
                        if (params[0]) {
                            text = text + params[0].seriesName + ' : ' + params[0].value["最高分"] + '<br/>'
                        }
                        if (params[1]) {
                            text = text + params[1].seriesName + ' : ' + params[1].value["最低分"] + '<br/>'
                        }
                        if (params[2]) {
                            text = text + params[2].seriesName + ' : ' + params[2].value["平均分"] + '<br/>'
                        }
                        if (params[3]) {
                            text = text + params[3].seriesName + ' : ' + params[3].value["级部排名"] * -1 + '<br/>';           // 负数转正数
                        }
    
                        return text;
                    }
                },
    
                toolbox: {
                    left: 600,
                    feature: {//各工具配置项。
                        dataView: {//数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
                            show: true,//是否显示组件。
                            readOnly: false
                        },
                        magicType: {//动态类型切换 示例：feature: { magicType: {type: ['line', 'bar', 'stack', 'tiled']}}
                            show: true,
                        },
                        restore: {  //配置项还原。
                            show: true
                        },
                        saveAsImage: {//保存为图片。
                            show: true
                        }
                    }
                },
    
                dataset: {
                    // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
                    // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。
                    dimensions: ['product', '最高分', '最低分', '平均分', '级部排名'],
                    source: [
                        { product: '八年级期末练习1', '最高分': 85, '最低分': 32, '平均分': 56.68, '级部排名': -3 },
                        { product: '八年级期末练习2', '最高分': 74, '最低分': 27, '平均分': 68, '级部排名': -1 },
                        { product: '八年级期末练习3', '最高分': 85, '最低分': 35, '平均分': 45, '级部排名': -4 },
                        { product: '八年级期末练习4', '最高分': 80, '最低分': 30, '平均分': 40, '级部排名': -2 },
                    ]
                },
    
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: true,
                        axisLine: {
                            onZero: false           //要点1：让Y轴下来，不加这句话，Y轴在上面 (必要)
                        },
                        axisLabel:
                        {
                            show: true,
                            interval: 0,
                        },
                    }],
    
                yAxis: [
                    {
                        type: 'value',
                        name: '分数',
                        max: 160,
                        min: 0,
                        splitNumber: 7,
                        axisLabel:
                        {
                            formatter: '{value} '
                        }
                    },
                    {
                        type: 'value',
                        name: '排名',
                        max: 0,                        //要点2：最大值 (非必要)
                        min: -8,                       //要点3：最小值 (非必要)
                        splitNumber: 7,
                        axisLabel:
                        {
                            formatter: function (v) {
                                return -v;             //要点4：取反显示(必要)
                            }
                        }
                    }],
    
                series: [
                    {
                        name: '最高分',
                        type: 'bar',
                    },
                    {
                        name: '最低分',
                        type: 'bar',
                    },
                    {
                        name: '平均分',
                        type: 'bar',
                    },
                    {
                        name: '级部排名',
                        type: 'line',
                        yAxisIndex: 1,          // 绑定1轴（右边轴)
                    }]
            };
    
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </body>
    </html>

[https_blog.csdn.net_u013402515_article_details_49149265]: https://blog.csdn.net/u013402515/article/details/49149265
[http_echarts.baidu.com_doc_example_line6.html]: http://echarts.baidu.com/doc/example/line6.html
[https_www.cnblogs.com_goloving_p_9114048.html Echarts_dataset]: https://www.cnblogs.com/goloving/p/9114048.html
[70]: /images/20220520/0001105249a345578a710c9fe17e9c88.png