ECharts Y轴倒置+DataSet

最新推荐文章于 2024-07-04 09:28:19 发布

chelen_jak

最新推荐文章于 2024-07-04 09:28:19 发布

阅读量1.4k

点赞数

分类专栏： ECharts

本文链接：https://blog.csdn.net/chelen_jak/article/details/81065556

版权

ECharts 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

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

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ECharts Y轴倒置+DataSet</title>
    <!-- 引入 ECharts 文件 -->
    <script src="js/echarts.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <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>