echarts 横向柱状图示例

最新推荐文章于 2024-04-08 10:54:14 发布
超级无敌小小小白
最新推荐文章于 2024-04-08 10:54:14 发布
阅读量1.6k
点赞数 4
分类专栏： Echarts 文章标签： echarts 前端
本文链接：https://blog.csdn.net/SM_Cute/article/details/134467085
版权
Echarts 专栏收录该内容
13 篇文章 0 订阅
订阅专栏
该示例有如下几个特点：
①实现tooltip自定义样式（echarts 实现tooltip提示框样式自定义-CSDN博客）
②实现数据过多时滚动展示（echarts 数据过多时展示滚动条-CSDN博客）
③柱状图首尾展示文字，文字内容嵌入图片
④柱状图终点处图片展示
代码如下：
this.options = {
  // 设置图表的位置
  grid: {
    x: 24, // 左间距
    y: 20, // 上间距
    x2: 24, // 右间距
    y2: 5, // 下间距
    containLabel: true, // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
  },
  // 提示框组件
  tooltip: {
    trigger: "axis", // 触发类型, axis: 坐标轴触发
    axisPointer: {
      // 指示器类型  'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。
      // 其实是种简写，表示启用两个正交的轴的 axisPointer。
      type: "none",
    },
    // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
    // 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
    // formatter: "{b}: {c}件",
    className: 'custom-tooltip-box',
    formatter: function(params) {
      return `<div class='custom-tooltip-style'><span>${params[0].name}</span></br><div class="span"><span>库存数：</span><span>${params[0].value}</span></div></div>`
    },
  },
  // X轴
  xAxis: {
    type: "value", // 坐标轴类型,   'value' 数值轴，适用于连续数据
    // 坐标轴刻度
    axisTick: {
      show: false, // 是否显示坐标轴刻度 默认显示
    },
    // 坐标轴轴线
    axisLine: {
      // 是否显示坐标轴轴线 默认显示
      show: false, // 是否显示坐标轴轴线 默认显示
    },
    // 坐标轴在图表区域中的分隔线
    splitLine: {
      show: false, // 是否显示分隔线。默认数值轴显示
    },
    // 坐标轴刻度标签
    axisLabel: {
      show: false, // 是否显示刻度标签 默认显示
    },
  },
  yAxis: [
    // 左侧Y轴
    {
      type: "category", // 坐标轴类型,  'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据
      // 坐标轴刻度
      axisTick: {
        show: false, // 是否显示坐标轴刻度 默认显示
      },
      // 坐标轴轴线
      axisLine: {
        // 是否显示坐标轴轴线 默认显示
        show: false, // 是否显示坐标轴轴线 默认显示
        lineStyle: {
          // 坐标轴线线的颜色
          color: "#fff",
        },
      },
      // 坐标轴在图表区域中的分隔线
      splitLine: {
        show: false, // 是否显示分隔线。默认数值轴显示
      },
      // 坐标轴刻度标签
      axisLabel: {
        show: true, // 是否显示刻度标签 默认显示
        fontSize: 16, // 文字的字体大小
        color: "#ffffff", // 刻度标签文字的颜色
        // 使用字符串模板，模板变量为刻度默认标签 {value}
        formatter: function(value) {
          return `{img|}{name|${value}}`
        },
        rich: {
          img:{
            backgroundColor: {
              image: "data:image/webp;base64,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"
            },
            width: 20,
            height: 20
          }
        },
        inside: true,
        textStyle: {
          verticalAlign: "top",
          padding: [-26, 0, 0, 0],
        },
      },
      data: this.echartData, // 类目数据，在类目轴（type: 'category'）中有效
    },
    // 右侧Y轴
    {
      type: "category", // 坐标轴类型,  'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据
      // 坐标轴轴线
      axisLine: {
        show: false,
      },
      // 坐标轴刻度
      axisTick: {
        show: false,
      },
      // 坐标轴刻度标签
      axisLabel: {
        show: true, // 是否显示刻度标签 默认显示
        fontSize: 18, // 文字的字体大小
        fontWeight: 600,
        color: "#ffffffcc", // 刻度标签文字的颜色
        // margin: 10, // 刻度标签与轴线之间的距离
        // 使用字符串模板，模板变量为刻度默认标签 {value}
        formatter: "{value}",
        inside: true,
        textStyle: {
          verticalAlign: "top",
          padding: [-26, 0, 0, 0],
        },
      },
      data: this.xAxisData, // 类目数据，在类目轴（type: 'category'）中有效
    },
    // 右侧Y轴 图形
    {
      // 坐标轴轴线
      axisLine: {
        show: false,
      },
      // 坐标轴刻度
      axisTick: {
        show: false,
      },
      // 坐标轴刻度标签
      axisLabel: {
        show: false
      },
      data: this.xAxisData, // 类目数据，在类目轴（type: 'category'）中有效
    },
  ],
  // 系列列表
  series: [
    {
      type: "bar", // 系列类型
      name: "订单转化率", // 系列名称, 用于tooltip的显示, legend 的图例筛选
      barMaxWidth: 12, // 柱条的最大宽度，不设时自适应
      showBackground: true, // 是否显示背景色
      backgroundStyle: {
        color: 'rgba(0,194,255,0.2)'
      },
      // 图形上的文本标签
      label: {
        show: false,
        // 标签的位置 left right bottom top inside，绝对的像素值 position: [10, 10]，相对的百分比 position: ['50%', '50%']
        position: "inside",
      },
      // 图形样式
      itemStyle: {
        normal: {
          //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "rgba(0,133,255,0)" // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#0085FF" // 100% 处的颜色
            }
          ])
        },
      },
      data: this.xAxisData, // 系列中的数据内容数组
    },
    {
      type: "pictorialBar", // 系列类型
      symbol: function(value) {
        if (value) {
          return "image://data:image/webp;base64,UklGRmYGAABXRUJQVlA4WAoAAAAwAAAAHwAAJwAASUNDUMgBAAAAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADZWUDhMeAQAAC8fwAkQdwextq3j0T0vtm3VnxZsJw1gpgZ7JioBbmzbqpt7dK6YmRkrYGapCxXCETtldhVOIbV7mn8CQchUFvAA0bSNnGr2hoT28uSh2uPpT0//Ig/VCl438hCtMNpYa8K7kUqL05eW2kxuxWkhGCFZxukgWmD/ZA4TpRFuxeXQxa24LASCmJ1oBreNSIbHXz18S2NGrspg76WeeOxka0wv6nHi9eB2Es3gsuP14baz/zSBxhRMrJ/MYycYx2UnGMVlJxzDbPTWVp9gSqHO8GAuG9Esbgc+H04b8RwomxdtLHj4kfqC2Y2a4jAjgAAxBQKAmGJEAIKAggARMIKCAAGgIKBAAEauMCAoCEYEIACIEYEzy78BQaCzEgEEyNkS+Q2cEwAyIIAAQRCAIAhg4N/2a/n/ZOQbIEDOdP+gX8wdwMvAme0aAOEbIAggCICitm1nJClj217bts1B27Ztu1PcLWTaLlfStpVqprSTrdppFLbxz5xE5sp/ChH9V9i2bSPAUbp7B4IgCIIgCIIgCHISAAB2QRWzD4BHoAJ8A+EVACp3QcVjAEDFoypQBXZfgPDLDgAVzH4AmFIBwFH2XKwATwwrAQCPn/jCFxC/s1VevlNevrX1/9b21tbW7tbuMxB+tjucdkep02F32u12e5m9FDI+bbPZbJu24uLiDVtJsa3YZvsc4rfXCgsL1x6ura09LFpfW1srXLsG4Q+L1WK1Wq0W638FFqulwGLdx56rNJ33gH6QR9P/0nn5+TRNfwDx+7lmEzMymXPN5n/MJrP5Cnv2GfXGbL3BmGM06o16vdGY/RvET1MURWVRqxSVxZzLpKi3IHy2tLS8tLS0srS0tJSxnLGUvnSBPUd0ujSdbiFNp9Mt6BbSFhcXf4L4KZIkSZIkU0lyniTnUlLJNyF8OpOcnJw8kzQzk5ScPDMzMztznj2HJ6enExMnEycTExMnp5j6I8TPJ4yPT8RPTCTEj4/Hx48njMe/DOHruJHR0dHRsdG4uFjm3NjYCfYcHx4cihkeHh6OGRpm6vDwVxC/1N/fHzXQ398/MDAQ3T/Q39f3LIQfInt6enoie5lzvb29vZGRh9hzKjy8O6IzvLuzu5P5QXhE1ycQv0EQoWFhBEEQBEEQRChB3ILwfQiOh+A4HozjOB4SEhKM72fPOa1WrdGoNVq1Vhuk0aiDgj6G+HWVMlCpDFAqVSqVMoDZdxPC735+/n5+cn+FXCGXy/38FPK97LncIfPx9ZF1yDo6ZDIfX5lM9h7E77a2e3t5t3q1ere1trW1erd6X2LPnpamJs/mlpbmlqZmT+YLTb9CfKPRw6OxobHBo76xsbGR+cRrED5yr62tra2trXVzc6utdautrTvLnoPY/RoMwzBXDHOtwbCa+67fQXxdLHWRurhIXKRiqdRFKnGRvgrhwzsikeguM7onuiv6W3RXdIY9BwQCoVAgFPwlYM4JBALBtxA/x7vN4/O4t3k8HpfH49/m8l+E8CUH/ZNTjaIoyuFwUJSDosfYQQA="
        } else {
          return ""
        }
      }, // 标记的图形
      symbolSize: [15, 15], // 标记的大小
      symbolOffset: [10, 0], // 标记的偏移
      symbolPosition: "end", // 标记的位置
      // 图形的样式
      itemStyle: {
        normal: {
          //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
          color: function(params) {
            if(params.value == 0) {
              return "rgba(255,255,255,0)"
            }
          }
        },
      },
      z: 12, // 控制图形的前后顺序。z 值小的图形会被 z 值大的图形覆盖
      data: this.xAxisData, // 系列中的数据内容数组
    },
  ],
  dataZoom: [
    {
      // 设置滚动条的隐藏与显示
      show: this.xAxisData.length > 12 ? true : false,
      // 设置滚动条类型
      type: "slider",
      // 设置背景颜色
      backgroundColor: "#fff",
      // 设置选中范围的填充颜色
      fillerColor: "#027FFF",
      // 设置边框颜色
      borderColor: "#027FFF",
      // 是否显示detail，即拖拽时候显示详细数值信息
      showDetail: false,
      // 数据窗口范围的起始数值
      startValue: this.xAxisData.length - 1,
      // 数据窗口范围的结束数值（一页显示多少条数据，从0开始）
      endValue: this.xAxisData.length - 11,
      // empty：当前数据窗口外的数据，被设置为空。
      // 即不会影响其他轴的数据范围
      filterMode: "empty",
      // 设置滚动条宽度，相对于盒子宽度
      width: 6,
      // 设置滚动条高度
      height: '100%',
      // bottom: 4,
      // 设置滚动条显示位置
      // left: 20,
      // right: 10, //右边的距离
      // 是否锁定选择区域（或叫做数据窗口）的大小
      zoomLoxk: true,
      // 控制手柄的尺寸
      // handleSize: 0,
      // dataZoom-slider组件离容器下侧的距离
      // xAxisIndex: [0],
      // 控制哪个轴，如果是number表示控制一个轴，
      // 如果是Array表示控制多个轴。此处控制第二根轴
      yAxisIndex: [0, 1],
      // start: 50,
      // end: 50,
      // zoomLock: true, //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
      brushSelect: false, //刷选功能
      borderRadius: 3,
      showDataShadow: false, //是否显示数据阴影 默认auto
      // filterMode: "filter",
    },
    {
      // 没有下面这块的话，只能拖动滚动条，
      // 鼠标滚轮在区域内不能控制外部滚动条
      type: "inside",
      yAxisIndex: [0, 1],
      // 滚轮是否触发缩放
      zoomOnMouseWheel: false,
      // 鼠标滚轮触发滚动
      moveOnMouseMove: true,
      moveOnMouseWheel: true,
    },
  ]
}
效果图如下：