Echarts数据可视化第5章色彩搭配 5.1 色彩主题

╰+攻爆jí腚メ 2024-03-25 20:19 43阅读 0赞

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

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

*   *   *  Echarts数据可视化
         *  第5章 色彩搭配
         *   *  5.1 色彩主题

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

#### 第5章 色彩搭配 ####

##### 5.1 色彩主题 #####

Echarts 官网界面为我们提供了主题下载页面

![在这里插入图片描述][599d3cefb46845a4beabd617634a04f7.png_pic_center]

地址：[https://echarts.apache.org/zh/download-theme.html][https_echarts.apache.org_zh_download-theme.html]

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

Echarts 官方提供了多种可选的主题，包括 vintage、dark、macarons、infographic等

所谓的色彩主题就是在该主题下的一系列可视化图的色彩都遵循的主题配色，它可以帮助我们统一可视化图的色彩样式。

以macarons 主题为例

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

直接点它

![在这里插入图片描述][99793eac39154a54aee9fdc01b3763b4.png_pic_center]

可以看到是一个js 文件。下载下来

![在这里插入图片描述][7a39da9f1787421a9edcfed4a0d65d3f.png_pic_center]

来实战一下

<!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: '产品一周销量情况（未加入色彩主题）'
            },
            xAxis: {
          
                type: 'value'
            },
            yAxis: {
          
                type: 'category',
                data: ['A商场', 'B商场', 'C商场', 'D商场', 'E商场', 'F商场', 'G商场']
            },
            legend: {
          
                data: ['A产品', 'B产品'],
                left: 'right'
            },
            series: [{
          
                name: 'A产品',
                data: [100, 150, 120, 90, 50, 130, 110],
                type: 'bar',
                label: {
          
                    show: true,
                    position: 'right'
                }
            },
                {
          
                    name: 'B产品',
                    data: [120, 130, 110, 70, 60, 110, 140],
                    type: 'bar',
                    label: {
          
                        show: true,
                        position: 'right'
                    }
                }]
        };
    
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    </body>
    </html>

现在是没有加入我们刚刚下载的那个主题js 文件，效果如下

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

这下引入下载的macarons 色彩主题，

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>加入了色彩主题的可视化</title>
        
        <script src="../js/echarts.js"></script>
        <script src="../js/macarons.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'), 'macarons');
    
        // 指定图表的配置项和数据
        var option = {
          
            title: {
          
                text: '产品一周销量情况（加入了色彩主题）'
            },
            xAxis: {
          
                type: 'value'
            },
            yAxis: {
          
                type: 'category',
                data: ['A商场', 'B商场', 'C商场', 'D商场', 'E商场', 'F商场', 'G商场']
            },
            legend: {
          
                data: ['A产品', 'B产品'],
                left: 'right'
            },
            series: [{
          
                name: 'A产品',
                data: [100, 150, 120, 90, 50, 130, 110],
                type: 'bar',
                label: {
          
                    show: true,
                    position: 'right'
                }
            },
                {
          
                    name: 'B产品',
                    data: [120, 130, 110, 70, 60, 110, 140],
                    type: 'bar',
                    label: {
          
                        show: true,
                        position: 'right'
                    }
                }]
        };
    
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    </body>
    </html>

渲染效果

![在这里插入图片描述][90539f545fb746a2ac93888ec7907ad4.png_pic_center]

这样就完成了我们色彩主题的配置。

[599d3cefb46845a4beabd617634a04f7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/35a60940425c41518c9779a3f3c95580.png
[https_echarts.apache.org_zh_download-theme.html]: https://echarts.apache.org/zh/download-theme.html
[eb5072a380624d4eb6365c074468b56a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/625e36f43eae42cc97ff0ea28920609f.png
[ef38f12829904d77a6aa73f21c0056a6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/60199d1a30c1438d8ddae88e0fdeda45.png
[99793eac39154a54aee9fdc01b3763b4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/f0396f6fd20e414d80cd81642e761bb5.png
[7a39da9f1787421a9edcfed4a0d65d3f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/276e6aca9a3444b99fa7ce2ce27ac247.png
[fd6c5c69864c4a2cbd5573dc56770c0f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/cd4361acdb804cb69178be8f4b7e7888.png
[90539f545fb746a2ac93888ec7907ad4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/3b60c8e544b9480d8cf3cafb38368829.png