echarts使用之柱状图（一）

史学娇

已于 2024-02-04 18:54:37 修改

阅读量437

点赞数 2

分类专栏：可视化文章标签： echarts 前端 javascript

于 2024-02-04 18:15:21 首次发布

本文链接：https://blog.csdn.net/weixin_46151381/article/details/136029914

版权

可视化专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了ECharts库中如何进行基本配置，包括x轴、y轴和系列的设置，以及通用配置如标题、提示框、工具按钮和图例的使用。还探讨了直角坐标系的配置，如网格和数据Zoom功能。

摘要由CSDN通过智能技术生成

1 基本使用

核心配置主要是xAxis/yAxis/series

<!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>
  <script src="lib/echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div")) // echarts实例对象
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强'] // x轴数据
    var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86] // y轴数据
    var option = {
      xAxis: {
        type: 'value'
      },
      yAxis: {
        type: 'category',
        data: xDataArr
      },
      series: [
        {
          name: '语文',
          type: 'bar',
          markPoint: { // 标记点
            data: [
              {
                type: 'max', name: '最大值'
              },{
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: { // 标记线
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
          label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 60, // 旋转角度
            position: 'top' // 显示位置
          },
          barWidth: '30%', // 柱的宽度
          data: yDataArr
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>

2 通用配置

主要包括标题title/提示框tooltip/工具按钮toolbox/图例legend

<!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>
  <script src="lib/echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    var yDataArr1 = [88, 92, 63, 77, 94, 80, 72, 86]
    var yDataArr2 = [93, 60, 61, 62, 85, 79, 92, 30]
    var option = {
      title: {//标题
        text: '成绩展示',
        textStyle: {
          color: 'red'
        },
        borderWidth: 5,
        borderColor: 'blue',
        borderRadius: 5,
        left: 50,
        top: 10
      },
      tooltip: {//提示框
        // trigger: 'item'
        trigger: 'axis',
        triggerOn: 'click',
        // formatter: '{b} 的成绩是 {c}'
        formatter: function(arg){
          return arg[0].name + '的分数是:' + arg[0].data
        }
      },
      toolbox: {//工具按钮
        feature: {
          saveAsImage: {}, // 导出图片
          dataView: {}, // 数据视图
          restore: {}, // 重置
          dataZoom: {}, // 区域缩放
          magicType: {
            type: ['bar', 'line']
          } // 动态图表类型的切换
        }
      },
      legend: { // 图例, 图例中的data数据来源于series中每个对象的name, 图例可以帮助我们对图表进行筛选
        data: ['语文', '数学']
      },
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '语文',
          type: 'bar',
          data: yDataArr1
        },
        {
          name: '数学',
          type: 'bar',
          data: yDataArr2
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>

3 直角坐标系配置

直角坐标系的图表指的是带有x轴和y轴的图表, 常见的图表有: 柱状图折线图散点图。

1.网格grid是用来控制直角坐标系的布局和大小

2.坐标轴分为 xAxis 轴和y Axis 轴。数值轴value , 自动会从目标数据中读取数据。类目轴category, 该类型必须通过 data 设置类目数据

3.dataZoom 用于区域缩放 , 对数据范围过滤 , x 轴和 y 轴都可以拥有。

<!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>
  <script src="lib/echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
    var option = {
      grid: { // 坐标轴容器
        show: true, // 是否可见
        borderWidth: 10, // 边框的宽度
        borderColor: 'pink', // 边框的颜色
        left: 120, // 边框的位置
        top: 120,
        // width: 300, // 边框的大小
        // height: 150
      },
      dataZoom: [ // 控制区域缩放效果的实现
        {
          type: 'slider', // 缩放的类型  slide代表滑块  inside代表依靠鼠标滚轮
          // type: 'inside'
          xAxisIndex: 0
        },
        {
          type: 'slider',
          yAxisIndex: 0,
          start: 0, // 渲染完成后, 数据筛选的初始值, 百分比
          end: 100 // 渲染完成后, 数据筛选的结束值, 百分比
        }
      ],
      xAxis: {
        type: 'category',
        data: xDataArr,
        position: 'top' // 控制坐标轴的位置
      },
      yAxis: {
        type: 'value',
        position: 'right' // 控制坐标轴的位置
      },
      series: [
        {
          name: '语文',
          type: 'bar',
          label: {
            show: true,
            rotate: 60,
            position: 'top'
          },
          barWidth: '30%',
          data: yDataArr
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>