Echarts数据可视化第2章搭建开发环境 2.3 完成一份简单的Echart作品

蔚落 2024-03-26 16:52 37阅读 0赞

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

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

*   *   *  Echarts数据可视化
         *  第2章 搭建开发环境
         *   *  2.3 完成一份简单的Echart作品

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

#### 第2章 搭建开发环境 ####

##### 2.3 完成一份简单的Echart作品 #####

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</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: '我的第一幅ECharts可视化图'
            },
            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>

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

浏览器渲染效果

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

没啥问题，就这样。

[525c833c117548dc97059bd6a80bc950.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1905755d92bc4fbd80c924f4f8b0562d.png
[6d30ddf84fb74cc3b8a65f0f3bbdf668.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f9e800d9e4214a1fac03f756dc791f9c.png