dataset数据到图形的映射

最新推荐文章于 2024-06-03 23:02:52 发布

八宝粥大朋友

最新推荐文章于 2024-06-03 23:02:52 发布

阅读量463

点赞数

分类专栏： echarts 文章标签： dataset

本文链接：https://blog.csdn.net/long_24k_os/article/details/101110733

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

dataset数据到图形的映射

效果图：

源码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>dataset数据到图形的映射</title>
        <!-- 引入echarts支持库 -->
        <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    </head>
    <body style="height: 700px; margin: 0">
        <!-- echarts DOM 容器 -->
        <div id="container" style="height: 100%; margin: 0"></div>
    </body>
    <script type="text/javascript">
        let chart = echarts.init(document.getElementById("container"));
        let option = {
            legend: {},
            tooltip: {},
            dataset: {
                source: [
                    ['product', '2012', '2013', '2014', '2015'],
                    ['banana', 41.1, 30.4, 65.1, 53.3],
                    ['apple', 86.5, 92.1, 85.7, 83.1],
                    ['mango', 24.1, 67.2, 79.5, 86.4]
                ],
            },
            xAxis: [
                {
                    type: 'category', //坐标轴类型。[ default: 'category' ] ['value'(数值轴) | 'category'(类目轴) | 'time'(时间轴) | 'log'(对数轴)]
                    gridIndex: 0//x 轴所在的 grid 的索引，默认位于第一个 grid。
                },
                {type: 'category', gridIndex: 1}
            ],
            yAxis:[
                {gridIndex: 0},//y 轴所在的 grid 的索引，默认位于第一个 grid。
                {gridIndex: 1}
            ],
            grid: [//直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。
                {bottom: '55%'},//grid 组件离容器下侧的距离。
                {top: '55%'}//grid 组件离容器上侧的距离。
            ],
            series: [
                // 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行。
                {
                    type: 'bar',//柱状/条形图
                    seriesLayoutBy: 'row'//系列“排布”到 dataset 行/列。[ default: 'column' ] [column' | 'row']
                },
                {type: 'bar', seriesLayoutBy: 'row'},
                {type: 'bar', seriesLayoutBy: 'row'},
                // 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列。
                {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
                {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
                {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
                {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
            ]
        };
        if(option && typeof option === 'object') {
          chart.setOption(option, null);
        }
    </script>
</html>

八宝粥大朋友

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
dataset数据到图形的映射

dataset数据到图形的映射效果图：源码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>dataset数据到图形的映射</title> <!-- 引...
复制链接

扫一扫

专栏目录