Echarts学习笔记一：柱状图基础最大最小值平均值显示数值

最新推荐文章于 2024-06-07 15:05:33 发布

Akimoto Hiroshi

最新推荐文章于 2024-06-07 15:05:33 发布

阅读量4.6k

点赞数 4

分类专栏： echarts 文章标签： echarts 数据可视化数据分析

本文链接：https://blog.csdn.net/dyw3390199/article/details/115362050

版权

echarts 专栏收录该内容

15 篇文章 3 订阅

订阅专栏

Echarts常用图表

在这里插入图片描述

1.柱状图

在这里插入图片描述
先上代码：

<!-- 这里通过cdn引入echarts-->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.common.min.js"></script>

<body>
  <div style="width: 600px; height: 400px"></div>
  <script>
    let mCharts = echarts.init(document.querySelector('div'))
    // x轴数据
    let xDataArr = ['Jing','Dean','Amy','Susan','Rebbeca','Tom']
    // y轴数据
    let yDataArr = [99, 90, 87, 89, 68, 52]
    // 配置项
    let option = {
      // 配置x轴的类型和数据源
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      // 配置y轴的类型
      yAxis: {
        type: 'value'
      },
      series: [
        {
          // 配置name,表示是关于什么的数据
          name: 'Javascript Grades',
          // bar类型的图标
          type: 'bar',
          // type为value的轴的数据源
          data: yDataArr
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

看下效果：
在这里插入图片描述
再看看其他配置：

要实现这个效果，只要在series中配置markPoint就可以了，markPoint的值是一个对象，里面有个data属性，它的值是一个数组，里面配置最大值和最小值：

看看现在的效果：

再配置一下平均值：
在这里插入图片描述
效果：

再配置一下数值可见：

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Echarts尝鲜</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.common.min.js"></script>
</head>
<body>
  <div style="width: 600px; height: 400px"></div>
  <script>
    let mCharts = echarts.init(document.querySelector('div'))
    let xDataArr = ['Jing','Dean','Amy','Susan','Rebbeca','Tom']
    let yDataArr = [99, 90, 87, 89, 68, 52]
    let option = {
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: 'Javascript Grades',
          type: 'bar',
          data: yDataArr,
          markPoint: {
            data: [
              {
                type: 'max',
                name: '最大值'
              }, {
                type: 'min',
                name: '最小值'
              }
            ]
          },
          markLine: {
            data: [
              {
                type: 'average',
                name: '平均值'
              }
            ]
          },
          label: {
            show: true,
            rotate: -30
          },
          barWidth: '40%'
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>
</html>

最终效果：
在这里插入图片描述

在这里插入图片描述

Akimoto Hiroshi

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
Echarts学习笔记一：柱状图基础最大最小值平均值显示数值

Echarts常用图表1.柱状图先上代码：<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.common.min.js"></script><body> <div style="width: 600px; height: 400px"></div> <script>
复制链接

扫一扫