ECharts 维度图绘制教程：示例代码与解析 - 数据可视化 - 常规

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 维度图示例</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 用于展示图表的容器 -->
    <div id="chart" style="width: 600px; height: 400px;"></div>
<pre><code>&lt;script&gt;
    // 初始化图表容器
    var chartContainer = document.getElementById('chart');
    // 创建图表实例
    var chart = echarts.init(chartContainer);

    // 定义维度数据
    var dimensions = ['维度1', '维度2', '维度3', '维度4'];

    // 定义维度图数据
    var data = [
        [10, 20, 30, 40],
        [50, 60, 70, 80],
        [90, 100, 110, 120],
        [130, 140, 150, 160]
    ];

    // 定义系列
    var series = [];
    for (var i = 0; i &lt; dimensions.length; i++) {
        series.push({
            name: dimensions[i],
            type: 'bar',
            data: data[i]
        });
    }

    // 配置图表
    var option = {
        legend: {},
        tooltip: {},
        dataset: {
            dimensions: dimensions,
            source: data
        },
        xAxis: { type: 'category' },
        yAxis: {},
        series: series
    };

    // 使用刚指定的配置项和数据显示图表
    chart.setOption(option);
&lt;/script&gt;
</code></pre>
</body>
</html>
<p>上述代码中，我们使用<code>echarts.init()</code>方法初始化了一个图表实例，然后定义了维度数据<code>dimensions</code>和维度图数据<code>data</code>，接着根据维度数据和维度图数据生成了系列<code>series</code>，最后通过配置项<code>option</code>设置了图表的样式和数据。最后使用<code>chart.setOption(option)</code>方法将配置项应用到图表实例上，就可以在页面上显示出维度图了。</p>
<p>注意：在使用ECharts之前，需要先引入ECharts的文件，可以通过CDN方式引入，也可以下载到本地并引入。上述示例中使用了CDN方式引入ECharts文件。</p>