Echarts数据可视化第3章 Echarts组件详解 3.3 工具栏

川长思鸟来 2024-03-26 16:52 64阅读 0赞

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

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

*   *   *  Echarts数据可视化
         *  第3章 Echarts组件详解
         *   *  3.3 工具栏

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

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

##### 3.3 工具栏 #####

toolbox：工具栏组件，通过设置工具栏，我们可以将可视化下载到本地，或者查看可视化的底层数据等。

一些常用参数：

*  show：是否显示工具栏组件，默认为false
 *  feature：各工具配置项，其中包含很多子参数
    
     *  saveAsImage：将可视化结果保存在本地
     *  restore：将可视化还原到初识的设置
     *  dataView：可以看到可视化的底层数据视图
     *  magicType：将一种可视化转为另一种可视化

还是在之前的基础上

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>toolbox组件</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: {
          
                trigger: 'axis',
                axisPointer: {
          
                    type: 'shadow'
                }
            },
    
            toolbox: {
          
                show: true,
                feature: {
          
                    mark: {
          show: true},
                    dataView: {
          show: true, readOnly: false},
                    magicType: {
          show: true, type: ['line', 'bar']},
                    restore: {
          show: true},
                    saveAsImage: {
          show: true}
                }
            },
    
            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>

浏览器渲染效果

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

第一个工具“数据视图”

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

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

展示原始数据

第二个，转换为折线图

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

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

第三个，切换回柱状图

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

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

第四个，还原

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

第五个，下载

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

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

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

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

没毛病。

[b8700b1a3791474896315fe5563554d1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/24d05968014b4e90b095fb26c6edc553.png
[1077f3f626ea47e88d249577011288ec.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/9c2004fee52b4b129cb8427b25385eac.png
[212a0b17be04483a8258d74d8d4b9051.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/680f87aa2b024c2498bb21225c69c1cf.png
[4ada7d20f1be4aff88e9c60b76eb5da7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/364ac7f97eee45f192100a186737c232.png
[2594f9c8e21b4f87bb0a75236db542a8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/90a71801f1a74fcb943526d7b0b1442f.png
[be0b7b732b62474e94c262d081c35497.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/11eeca3e76c84072a61cdcaf7cf78175.png
[c49800d24287407a9d3fc2da29f6a52c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/726cb081cfa4450c8f1f491d11c57998.png
[b96af61123c74f8dab84f7abee5f8f07.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/71a631e56ac34bee967a0ab115521254.png
[54bbb0e842514e4e81d6049302719567.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/3a2de69c8bc74cef80d426d612bb4ab7.png
[1d09e526e56a4be6835166110f2886a9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/aafdc44494e04210986b0e4e45e0a8d1.png
[156b8b5804fe454ab85dd70adc75e46c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c65c0d4596c74cb395d3ba979a57b81b.png
[300db329278448559560e1fa1ba68876.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/30dbc44bb1af4017b0567cb2f8e30811.png