Echarts数据可视化第3章 Echarts组件详解 3.1 标题

忘是亡心i 2024-03-26 16:52 27阅读 0赞

#### Echarts数据可视化 ####

#### 文章目录 ####

*   *   *  Echarts数据可视化
         *  第3章 Echarts组件详解
         *   *  3.1 标题

> Echarts数据可视化：入门、实战与进阶

#### 第3章 Echarts组件详解 ####

##### 3.1 标题 #####

在Echarts 中，标题一般包括主标题和副标题。标题的相关参数可以在option 的title 内配置。

一些常用参数：

*  text：主标题文本，支持\\n换行
 *  subtext：副标题文本，支持\\n换行
 *  left：与左侧容器的距离
 *  show：是否显示

举个栗子，在之前代码的基础上进行小小修改

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>标题组件</title>
        
        <script src="../js/echarts.js"></script>
    </head>
    <body>
    
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
    
        // 指定图表的配置项和数据
        var option = {
          
            title: {
          
                text: '这是主标题',
                subtext: '这是副标题',
                left: 'center' // 居中对齐
            },
            tooltip: {
          },
            legend: {
          
                data: ['各产品销量情况']
            },
            xAxis: {
          
                data: ["产品A", "产品B", "产品C", "产品D", "产品E"]
            },
            yAxis: {
          },
            series: [{
          
                name: '销量',
                type: 'bar',
                data: [900, 700, 550, 1000, 200]
            }]
        };
    
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    </body>
    </html>

渲染效果

![在这里插入图片描述][84dfa99810c149cf958bd5db05b8bd23.png_pic_center]

没毛病。

[84dfa99810c149cf958bd5db05b8bd23.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/9ee32b36cfaf48f6bdca680c9cf1c58a.png