柱形图，折线图，条形图的实现-程序员宅基地

技术标签： vscode spark scala echarts 大数据

这个插件可以实现预览

编辑

1.柱形图

1.柱形图

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 步骤1：引入echarts.js文件 -->
  <script src="js/echarts.min.js"></script>
  <!-- 
  步骤1：引入echarts.js文件
  步骤2：准备一个呈现图表的盒子
  步骤3：初始化echarts实例对象
  步骤4：准备配置项
  步骤5：将配置项设置给echarts实例对象
   -->
</head>

<body>
  <!-- 步骤2：准备一个呈现图表的盒子 -->
  <div style="width: 600px;height: 400px"></div>
  <script>
    // 步骤3：初始化echarts实例对象
    // 参数, dom,决定图表最终呈现的位置
    var mCharts = echarts.init(document.querySelector('div'))
    // 步骤4：准备配置项
    var option = {
      xAxis: {
        type: 'category',
        data: ['小明', '小红', '小王']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '语文',
          type: 'bar',
          data: [70, 92, 87]
        }
      ]
    }
    // 步骤5：将配置项设置给echarts实例对象
    mCharts.setOption(option)
  </script>
</body>

2.折线图

1.设置数据的标题

2.效果的设置

3.x.y轴的数据设置

完整代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="js/echarts.js"></script>
</head>

<body>
    <div id="main" style="width: 800px; height: 400px"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"));
        var option = {
            title: {
                text: '成绩表',
                subtext: '成绩来源',
            },
            tooltip: {
                trigger: 'axis',
            },
            legend: {
                data: ['2023年', '2024年'],
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true },
                },
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',  
                    data:['2月','4月','6月','9月','11月','1月']
                },
            ],
            yAxis: [
                {
                    type: 'value',
                    data: ['等于号'],
                },
            ],
            series: [
                {
                    name: '2023年',
                    type: 'line',
                    data: [65,75,66,80,90,73],
                },
                {
                    name: '2024年',
                    type: 'line',
                    data: [65,88,75,40,60,72],
                },
            ],
        };

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

</html>

3.条形图

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <script src="js/echarts.js"></script>
</head>
 
<body>
 
    <div id="main" style="width: 800px; height: 400px"></div>
    <script type="text/javascript">
 
        var myChart = echarts.init(document.getElementById("main"));
 
        var option = {
            title: {
                text: '3班成绩表',
                subtext: '数据来自辅导员',
            },
            legend: {
                data: ['计算机基础','数据可视化'],
            },
            calculable: true,
            xAxis: [
                {
                    type: 'value',  //设置柱状图
                    boundaryGap: ['20%','20%'],
                },
            ],//xAxis：设置X轴的类型为“value”（数值轴），并设置柱状图的间隙（boundaryGap）。
            yAxis: [
                {
                    type: 'category',
                    data: ['明明','红红','高高'],
                },
            ],//yAxis：设置Y轴的类型为“category”（类别轴），并设置其数据为“明明”、“红红”和“高高”。
            series: [
                {
                    name: '计算机基础',
                    type: 'bar',
                    data: [80,88,70],
                    markPoint: { // 标记点
          },
 
                },
                {
                    name: '数据可视化',
                    type: 'bar',
                    data: [60,90,80,],
                    markPoint: { // 标记点
          },
                },//series：设置图表的系列数据。

            ]
        };
 
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
 
</html>
————————————————

本文链接：https://blog.csdn.net/Doryh1010/article/details/136685107

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

http隧道 java_使用java语言实现http隧道技术-程序员宅基地

文章浏览阅读119次。该楼层疑似违规已被系统折叠隐藏此楼查看此楼/***Getaparametervalue**@paramkeyString*@paramdefString*@returnString*/publicStringgetParameter(Stringkey,Stringdef){returnisStandalone?System.getProperty(ke..._java http隧道

Keepalived高可用+邮件告警_keepalived sendmail-程序员宅基地

文章浏览阅读913次。IP主机名备注192.168.117.14keepalived-master主节点192.168.117.15keepalived-slaver备节点192.168.117.100VIP1.主备节点均安装keepalived# yum install -y keepalived httpd2.主备节点均修改keepalived日志存放路径..._keepalived sendmail

SPFILE 错误导致数据库无法启动(ORA-01565)_ora01565 ora27046-程序员宅基地

文章浏览阅读469次。--==========================================--SPFILE错误导致数据库无法启动(ORA-01565)--========================================== SPFILE错误导致数据库无法启动 SQL> startup ORA-01078: failurein proce_ora01565 ora27046

功能测试基础知识（1）-程序员宅基地

文章浏览阅读6.1k次，点赞2次，收藏54次。功能测试基础知识总结_功能测试

postgresql 中文排序_pg中文排序-程序员宅基地

文章浏览阅读3.2k次，点赞3次，收藏2次。pg 中文首字母排序_pg中文排序

[Mysql] CONVERT函数_mysql convert-程序员宅基地

文章浏览阅读3.1w次，点赞23次，收藏109次。本文主要讲解CONVERT函数_mysql convert

随便推点

HTML5与微信开发（2）-视频播放事件及API属性_微信开发者工具视频快进-程序员宅基地

文章浏览阅读8.6k次，点赞2次，收藏2次。HTML5 的视频播放事件想必大家已经期待很久了吧，在HTML4.1、4.0之前我们如果在网页上播放视频无外乎两种方法：第一种：安装FLASH插件或者微软发布的插件第二种：在本地安装播放器，在线播放组件之类的因为并不是所有的浏览器都安装了FLASH插件，就算安装也不一定所有的都能安装成功。像苹果系统就是默认禁用FLASH的，安卓虽然一开始的时候支持FLASH，但是在安卓4.0以后也开始不_微信开发者工具视频快进

JedisConnectionException Connection Reset_jedisconnectionexception: java.net.socketexception-程序员宅基地

文章浏览阅读5.4k次，点赞3次，收藏4次。在使用redis的过程常见错误总结1.JedisConnectionException Connection Reset参考这边文章：Connection reset原因分析和解决方案https://blog.csdn.net/cwclw/article/details/527971311.1问题描述Exception in thread "main" redis.clients...._jedisconnectionexception: java.net.socketexception: connection reset

Lua5.3版GC机制理解_lua5.3 gc-程序员宅基地

文章浏览阅读8.3k次，点赞8次，收藏42次。目录1.Lua垃圾回收算法原理简述2.Lua垃圾回收中的三种颜色3.Lua垃圾回收详细过程4.步骤源码详解4.1新建对象阶段4.2触发条件4.3 GC函数状态机4.4标记阶段4.5清除阶段5.总结参考资料lua垃圾回收(Garbage Collect)是lua中一个比较重要的部分。由于lua源码版本变迁，目前大多数有关这个方面的文章都还是基于lua5.1版本，有一定的滞后性。因此本文通过参考当前..._lua5.3 gc

手机能打开的表白代码_能远程打开，各种手机电脑进行监控操作，最新黑科技...-程序员宅基地

文章浏览阅读511次。最近家中的潮人，老妈闲着没事干，开始学玩电脑，引起他的各种好奇心。如看看新闻，上上微信或做做其他的事情。但意料之中的是电脑上会莫名出现各种问题？不翼而飞的图标？照片又不见了？文件被删了，卡机或者黑屏，无声音了，等等问题。常常让她束手无策，求助于我，可惜在电话中说不清，往往只能苦等我回家后才能解决，那种开心乐趣一下子消失了。想想，这样也不是办法啊，于是，我潜心寻找了两款优秀的远程控制软件。两款软件...

成功Ubuntu18.04 ROS melodic安装Cartograhper+Ceres1.13.0，以及错误总结_ros18.04 安装ca-程序员宅基地

文章浏览阅读1.8k次。二.初始化工作空间三.设置下载地址四.下载功能包此处可能会报错，请看：rosdep update遇到ERROR: error loading sources list: The read operation timed out问题_DD᭄ꦿng的博客-程序员宅基地接下来一次安装所有功能包，注意对应ROS版本五.编译功能包isolated：单独编译各个功能包，每个功能包之间不产生依赖。编译过程时间比较长，可能需要几分钟时间。此处可能会报错：缺少absl依赖包_ros18.04 安装ca

Harbor2.2.1配置（trivy扫描器、镜像签名）_init error: db error: failed to download vulnerabi-程序员宅基地

文章浏览阅读4.1k次，点赞3次，收藏7次。Haobor2.2.1配置（trivy扫描器、镜像签名）docker-compose下载https://github.com/docker/compose/releases安装cp docker-compose /usr/local/binchmod +x /usr/local/bin/docker-composeharbor下载https://github.com/goharbor/harbor/releases解压tar xf xxx.tgx配置harbor根下建立:mkd_init error: db error: failed to download vulnerability db: database download