一、导入Echarts.js文件

1、在编写前我们需要用到Echarts.js文件导入

这里直接给你们提供网盘

链接：https://pan.baidu.com/s/1OmNWBTHuuxPZfo-QE7b0ng 
提取码：efde

2、 然后在当目录下新建 scc和js，image文件夹

3、把下载好的.js文件放入到js目录下

4、在同一目录下新建html文件

然后命名为柱状图.html的文件（文件后缀为.html）

二、柱状图的演练

1、引入ECharts脚本

<script src ="js/echarts.js" ></script>

2、为ECharts准备一个具备大小（宽高）的DOM

 <div id="main" style="width: 900px; height: 600px"></div>

3、基于准备好的DOM，初始化ECharts图表，结构要弄清楚哦

 var myChart = echarts.init(document.getElementById("main"));

4、指定图表的配置项和数据

         //指定图表的配置项和数据
        var option ={
            title:{
                backgroundColor:'yellow', //设置标题的背景颜色
                text:'这里是绘制的图表的标题',
                subtext:'这里是副标题'
            },
            legend:{
                data:['销量']
            },
            xAxis: { // x的坐标轴
                data: ['红枣', '草莓', '柠檬', '香蕉', '车厘子', '雪梨'] //数据
                        },
                yAxis: {
                    type:'value'
                }, //y的坐标轴
            series: [{
                name:'销量',
                data: [5, 12, 18, 10, 15, 9],
                type: 'bar' //柱状图
            }]

主要分为三块，标题和x轴，y轴

5、最后使用刚指定的配置项和数据

  //使用刚指定的配置项和数据显示图表
    myChart.setOption(option);

6、然后启动html文件

右击启动

可以看到数据，最后就完成啦！！！

三、最后给你们全部的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  
        <!--引入ECharts脚本-->
      <script src ="js/echarts.js" ></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的DOM -->
    <div id="main" style="width: 900px; height: 600px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
         //指定图表的配置项和数据
        var option ={
            title:{
                backgroundColor:'yellow', //设置标题的背景颜色
                text:'这里是绘制的图表的标题',
                subtext:'这里是副标题'
            },
            legend:{
                data:['销量']
            },
            xAxis: { // x的坐标轴
                data: ['红枣', '草莓', '柠檬', '香蕉', '车厘子', '雪梨'] //数据
                        },
                yAxis: {
                    type:'value'
                }, //y的坐标轴
            series: [{
                name:'销量',
                data: [5, 12, 18, 10, 15, 9],
                type: 'bar' //柱状图
            }]
    }
     //使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
    </script>

</body>
</html>

# javascript # 信息可视化 # echarts
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

avatar 腾讯云开发者社区

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

avatar 腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git

avatar 腾讯云开发者社区