ECharts Y轴倒置+DataSet

参考资料:
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>


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
使用 ECharts 雷达图绑定 dataset 数据源可以实现方便的数据管理和展示。下面是一个简单的例子: ```javascript // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { dataset: { source: [ ['score', 'amount', 'product'], [89.3, 58212, 'Matcha Latte'], [57.1, 78254, 'Milk Tea'], [74.4, 41032, 'Cheese Cocoa'], [50.1, 12755, 'Cheese Brownie'], [89.7, 20145, 'Matcha Cocoa'], [68.1, 79146, 'Tea'], [19.6, 91852, 'Orange Juice'], [10.6, 101852, 'Lemon Juice'], [32.7, 20112, 'Walnut Brownie'] ] }, radar: { indicator: [ { name: 'score', max: 100 }, { name: 'amount', max: 100000 }, { name: 'product', max: 100 } ] }, series: [{ type: 'radar', data: { name: 'sales', type: 'radar' } }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); ``` 在上面的例子中,我们使用 `dataset` 属性来绑定数据源,数据源的格式是一个二维数组。第一行是数据的字段名,后面的每一行是一个数据项。 在 `radar` 属性中,我们设置了雷达图的指示器。每一个指示器代表一个维度,包括 `name` 和 `max` 两个属性,用来表示这个维度的名称和最大值。 在 `series` 属性中,我们设置了雷达图的系列数据。其中 `data` 中的 `name` 表示这个系列的名称,`type` 表示这个系列的类型。本例中,我们使用的是雷达图类型。 最后,我们通过 `setOption` 函数将图表的配置项和数据应用到图表中,即可显示出雷达图。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值