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

技术标签： 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

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

智能推荐

Centos7搭建hadoop的错误（datanode）和（nodeManager）没启动的解决方法_hadoop集群部署时datenode,nodemanger-程序员宅基地

文章浏览阅读3.1k次，点赞4次，收藏14次。1.datanode没有启动,就要到slaves节点去找错误。解决方法：前提是配置文档没错，删除datanode的格式化信息，再重新格式化#注意：在datanode节点上删除[hadoop@node2 ~]$ cd /home/hadoop/dfs/data/current[hadoop@node2 current]$rm VERSION[hadoop@node3 ~]$ cd ..._hadoop集群部署时datenode,nodemanger

安卓-ListView基本使用_使用listview需要下载什么软件吗-程序员宅基地

文章浏览阅读1k次。今天的目标是使用ListView控件完成一个布局，左边一个图标，右边分为上线两部分：标题和内容;ListView在使用时要考虑内存优化，就是使用ViewHolder(自己定义的一个内部类，存储布局中的控件的索引)适配器使用继承自ArrayAdapter的适配器，也可以继承自BaseAdapter(要多写几个方法)目前虽然还有公司在使用，但是后面大家陆续都会转向RecyclerView,_使用listview需要下载什么软件吗

摩斯密码_摩斯密码是通用的吗-程序员宅基地

文章浏览阅读1.6k次。摩斯密码_摩斯密码是通用的吗

物联网架构-程序员宅基地

文章浏览阅读797次，点赞13次，收藏18次。物联网架构。

已安装对应模块，但报无法找到模块“XXX”的声明文件的解决方案_找不到模块“qs”或其相应的类型声明-程序员宅基地

文章浏览阅读1.7k次。在一次做项目的时候，我封装一个axios的文件，想引入qs组件，因为axios已经自带qs组件了，所以直接。好了，工作忙，不吹了，直接在src文件目录下创建一个 shime-vue.d.ts文件，在里面写入。但是，它居然给我报了如下的提示（这张图片是我写博客的时候找的类似的一张图片，当成qs就好）保存，就可以了，qs可以正常引入了，不会再报找不到模块了。_找不到模块“qs”或其相应的类型声明

C# 静态代码块（静态构造函数）_java static块 c#-程序员宅基地

文章浏览阅读1.2w次。本来以为是和java一样写法。结果找了半天也没找到。原来有静态构造函数一样的功能。class SimpleClass{ // Static constructor static SimpleClass() { //... }}静态构造函数具有以下特点：静态构造函数既没有访问修饰符，也没有参数_java static块 c#

随便推点

Web安全工具大集合-程序员宅基地

文章浏览阅读4.3k次。Test sites / testing groundsSPI Dynamics (live) – http://zero.webappsecurity.com/Cenzic (live) – http://crackme.cenzic.com/Watchfire (live) – http://demo.testfire.net/Acunetix (live) – http:

MySQL开发技巧 - 分页和索引_本关任务:能分页读取表中数据,针对大数据量进行简单优化。-程序员宅基地

文章浏览阅读2.6k次，点赞2次，收藏3次。第1关：MySQL 分页查询本关任务：能分页读取表中数据，针对大数据量进行简单优化。USE Products;#请在此处添加实现代码########## Begin ###########1.分页查询select prod_id from products limit 5,5;#2.用子查询优化分页查询语句select prod_id from products where prod_id >=(select prod_id from products limit 10,1) l_本关任务:能分页读取表中数据,针对大数据量进行简单优化。