echarts柱状图添加白色柱状图背景+滚动+柱状顶部添加横线

最新推荐文章于 2024-05-07 16:51:02 发布
最新推荐文章于 2024-05-07 16:51:02 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： css 前端 echarts 文章标签： echarts javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Aa12364567/article/details/135864689
版权
文章介绍了如何使用ECharts库在Vue组件中创建一个带有白色背景的柱状图，并实现数据滚动功能，通过设置选项和事件监听器来动态更新背景和显示当前数据区间。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

echarts柱状图添加白色柱状图背景+滚动
在这里插入图片描述

<template>
  <div class="stream-water-wrapper">

    <div id="biologybgchart" class="bck-chart"></div>

    <div id="biologychart" class="biology-chart"></div>

  </div>
</template>

<script>
export default {
  name: 'streamwater',
  data() {
    return {
      biologyChart: '',
      bckchart: '',
      data: [23, 32, 41, 16, 27, 25, 35],
      xAxis: [],
      currentArr: []
    }
  },
  mounted() {
    // this.initBiologyChart()
    this.getData()
  },
  methods: {
    getData() {
      this.axios.post(this.api.getRiverFlow)
        .then((response) => {
          let res = response.data;
          if (res.code == 1) {
            this.data = Object.values(res.result)
            this.xAxis = Object.keys(res.result)
            this.currentArr.push(this.data[0])
            this.currentArr.push(this.data[1])
            this.currentArr.push(this.data[2])
            this.currentArr.push(this.data[3])

          } else {
            this.$message.error(res.message)
          }
        }).finally(() => {
          this.initBiologyChart()
          this.initBiologyBck()
        })
    },
    // 初始化
    initBiologyChart() {
      this.biologyChart = this.$echarts.init(document.getElementById('biologychart'))
      var option = {
        xAxis: {
          type: 'category',
          data: this.xAxis,
          axisLine: {       //x轴显示
            "show": true,
          },
          axisTick: {
            "show": false   //去掉x轴刻度线
          },
          //坐标轴颜色
          axisLine: {
            lineStyle: {
              // background: rgba(186,231,255,0.4);
              color: 'rgba(186,231,255,0.4)',
              width: 2
            }
          },
          // x轴文字旋转
          axisLabel: {
            rotate: 0,
            interval: 0,
            interval: 0,  //设置 X 轴数据间隔几个显示一个，为0表示都显示 
            color: "rgba(230,247,255,0.5)"  //坐标轴的文本颜色
          },
        },
        yAxis: {
          name: 'ind/m³',
          type: 'value',
          // interval: 10,
          min: 0, // 配置 Y 轴刻度最小值
          // max: 400,  // 配置 Y 轴刻度最大值
          // splitNumber:10,  // 配置 Y 轴数值间隔
          nameTextStyle: {
            color: 'rgba(230,247,255,0.5)', //  字体颜色
            fontSize: 12, //  字体大小
            fontWeight: '400',
            //关键代码
            padding: [0, 0, -20, -30] //标题位置调整 上 右 下 左
          },
          splitLine: {           //分割线
            show: true,     //控制分割线是否显示
            lineStyle: {       //分割线的样式
              color: ['rgba(230,247,255,0.2)'],
              width: 1,
              type: 'dashed'
            }
          },
          axisLine: {       //y轴不显示
            "show": false
          },
          axisTick: {       //y轴刻度线不显示
            "show": false
          },
          axisLabel: {
            showMaxLabel: false,
            color: "rgba(230,247,255,0.5)", //刻度线标签颜色
            fontSize: 14,
            // formatter: function (value) {
            //   if (value / 100 % 2 === 1) {
            //     return value;
            //   } else {
            //     return ''
            //   }
            // }
          },

        },
        grid: {          //设置图表显示在区域的哪个位置，控制图表的位置，可以是具体数值或者百分比
          left: '20px',
          right: '0px',
          bottom: '10px',
          top: '20px',
          containLabel: true,   //containLabel(grid 区域是否包含坐标轴的刻度标签,默认不包含)为true的情况下,无法使图表紧贴着画布显示,但可以防止标签标签长度动态变化时溢出容器或者覆盖其他组件,将containLabel设置为false即可解决
        },
        //滚动条样式
        dataZoom: [

          {

            id: 'biologychart',

            type: 'slider',

            show: true,

            // start: 0,//默认为0

            // end: 50,//默认为100

            startValue: 0, // 从头开始。

            endValue: 3, // 一次性展示6个。

            xAxisIndex: [0],

            handleSize: 0,//滑动条的 左右2个滑动条的大小

            height: 4,//组件高度

            bottom: 0,//右边的距离

            borderColor: "#e3e3e3",

            fillerColor: '#51B7F9',

            borderRadius: 10,

            backgroundColor: '#e3e3e3',//两边未选中的滑动条区域的颜色

            showDataShadow: false,//是否显示数据阴影 默认auto

            showDetail: false,//即拖拽时候是否显示详细数值信息 默认true

            realtime: true, //是否实时更新

            filterMode: 'filter',

            // zlevel: 10,

          },
          //以下重点： 让鼠标滚动从缩放变成移动
          {

            type: 'inside',

            xAxisIndex: [0],

            zoomOnMouseWheel: false, //滚轮不触发缩放

            moveOnMouseMove: true,   //鼠标移动触发平移

            moveOnMouseWheel: true,  //鼠标滚轮触发平移

          },

        ],
        series: [
          {
            data: this.data,
            type: 'bar',
            hoverAnimation: false,
            animation: false,
            emphasis: {
              disabled: true,
            },
            barWidth: 12, //设置柱子宽度
            color: 'blue',
            // showBackground: true,
            // backgroundStyle: {
            //   color: 'rgba(255,255,255,0.1)',
            // },
            label: {  //在柱状图上显示数据
              show: true,
              position: 'top',
              color: '#fff',
              fontWeight: 500,
              fontSize: 10,
            },
            markPoint: {
              symbol: 'rect',
              symbolSize: '15',
            },
            itemStyle: {  // 柱状图渐变
              color: {
                type: 'linear',
                x: 0,  //右
                y: 0,  //下
                x2: 0,  //左
                y2: 1,  //上
                colorStops: [
                  {
                    offset: 0,
                    color: '#1A96F9' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#4CECFF' // 100% 处的颜色
                  }
                ]
              },

            },
          },
          {		//顶部的白色横杠
            type: 'pictorialBar',
            symbol: 'rect',
            symbolSize: [12, 2],
            symbolOffset: [0, -2],
            symbolPosition: 'end',
            data: this.data,
            itemStyle: {
              color: '#00BBFF',
            },
          },
        ],

      };
      this.biologyChart.setOption(option);

      let that = this;
      // 当滑动条变化时触发
      this.biologyChart.on('datazoom', function (params) {
        that.currentArr = []
        that.$nextTick(() => {
          let xAxis = that.biologyChart.getModel().option.dataZoom[0];
          let startrang = xAxis.startValue
          let endrang = xAxis.endValue
          let i = 0
          for (i; i++; i < 4) {
            that.currentArr.push(that.data[startrang + i])
          }
          that.currentArr.push(that.data[startrang])
          that.currentArr.push(that.data[startrang + 1])
          that.currentArr.push(that.data[startrang + 2])
          that.currentArr.push(that.data[startrang + 3])

          var bckOptions = {
            xAxis: {
              data: this.xAxis
            },
            yAxis: {
              max: Math.ceil(Math.max(...that.currentArr)),
            },
            series: [0, 0, 0, 0]
          }
          that.bckchart.setOption(bckOptions);
        })
      });
    },
    // 初始化生物多样性背景图
    initBiologyBck() {
      this.bckchart = this.$echarts.init(document.getElementById('biologybgchart'))
      var option = {
        xAxis: {
          type: 'category',
          data: this.xAxis,
          axisPointer: {
            // 设置为 dataZoom，并指定 dataZoom 的 id
            type: 'dataZoom',
            dataZoomId: 'biologychart'
          },
          axisLine: {       //x轴显示
            "show": false,
          },
          axisTick: {
            "show": false   //去掉x轴刻度线
          },
          // x轴文字旋转
          axisLabel: {
            rotate: 0,
            interval: 0,
            interval: 0,  //设置 X 轴数据间隔几个显示一个，为0表示都显示 
            color: "rgba(0,0,0,0)"  //坐标轴的文本颜色
          },
          //坐标轴颜色
          axisLine: {
            show: false,
            lineStyle: {
              color: '#00bbff',
              width: 2
            }
          },
        },
        yAxis: {
          name: 'ind/m³',
          type: 'value',
          // minInterval: 1,
          min: 0, // 配置 Y 轴刻度最小值
          // this.isShowScroll
          // max: Math.ceil(Math.max(...this.option.series[0].data)),  // 配置 Y 轴刻度最大值
          max: Math.ceil(Math.max(...this.currentArr)),
          // splitNumber:10,  // 配置 Y 轴数值间隔
          nameTextStyle: {
            color: 'rgba(230,247,255,0)',
            fontSize: 16, //  字体大小
            fontWeight: 'bolder',
            //关键代码
            padding: [0, 0, 0, -30] //标题位置调整 上 右 下 左
          },
          splitLine: {           //分割线
            show: false,     //控制分割线是否显示
            lineStyle: {       //分割线的样式
              color: ['rgba(255,255,255,0.3)'],
              width: 2,
              type: 'dashed'
            }
          },
          axisLine: {       //y轴不显示
            "show": false
          },
          axisTick: {       //y轴刻度线不显示
            "show": false
          },
          axisLabel: {
            color: "rgba(255,0,0,0)", //刻度线标签颜色
            fontSize: 14,
          },
        },
        grid: {          //设置图表显示在区域的哪个位置，控制图表的位置，可以是具体数值或者百分比
          left: '20px',
          right: '0px',
          bottom: '10px',
          top: '20px',
          containLabel: true,   //containLabel(grid 区域是否包含坐标轴的刻度标签,默认不包含)为true的情况下,无法使图表紧贴着画布显示,但可以防止标签标签长度动态变化时溢出容器或者覆盖其他组件,将containLabel设置为false即可解决
        },
        //滚动条样式
        dataZoom: [

          {

            id: 'biologychart',

            type: 'slider',

            show: false,

            // start: 0,//默认为0

            // end: 50,//默认为100

            startValue: 0, // 从头开始。

            endValue: 3, // 一次性展示6个。

            xAxisIndex: [0],

            handleSize: 0,//滑动条的 左右2个滑动条的大小

            height: 4,//组件高度

            bottom: 0,//右边的距离

            borderColor: "#e3e3e3",

            fillerColor: '#51B7F9',

            borderRadius: 10,

            backgroundColor: '#e3e3e3',//两边未选中的滑动条区域的颜色

            showDataShadow: false,//是否显示数据阴影 默认auto

            showDetail: false,//即拖拽时候是否显示详细数值信息 默认true

            realtime: true, //是否实时更新

            filterMode: 'filter',

            // zlevel: 10,

          },
          //以下重点： 让鼠标滚动从缩放变成移动
          // {

          //   type: 'inside',

          //   xAxisIndex: [0],

          //   zoomOnMouseWheel: false, //滚轮不触发缩放

          //   moveOnMouseMove: true,   //鼠标移动触发平移

          //   moveOnMouseWheel: true,  //鼠标滚轮触发平移

          // },

        ],
        series: [
          {
            data: [0, 0, 0, 0, 0],
            type: 'bar',
            barWidth: 40, //设置柱子宽度
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(190,216,240,0.06)'
            }
          },

        ]
      };

      this.bckchart.setOption(option);

    },
  }
}
</script>

<style scoped>
.stream-water-wrapper {
  width: 100%;
  height: 300px;
}

.bck-chart {
  width: 90%;
  height: 250px;
  position: absolute;
}

.biology-chart {
  width: 90%;
  height: 250px;
}
</style>
echarts画立体圆柱形图表
裤兜的博客
11-15 3037
option = { xAxis: { type: 'category', data: ['A区', 'B区', 'C区', 'D区', 'E区', 'F区', 'G区'], axisLine: { lineStyle: { color: '#2063A8' } }, axisTick: { show: false }, axisLabel: { color: '#EFF2F9',
ECharts实现带有顶部横杠的柱状图
包子脸爱学习的博客
04-02 2848
【代码】ECharts实现带有顶部横杠的柱状图。
Echarts图表柱状图 - 多条柱状图添加背景
工作中遇到问题记录
04-03 6930
Echarts图表柱状图 - 多条柱状图添加背景
echarts 柱状图加背景
give it a try
05-26 5615
下定决心，好好过一天 ~ var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; option = { xAxis: { type: 'category', //类目轴 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']//类目标签 }, yAxis
echarts柱状图的背景色设置
热门推荐
灰太狼-铜豌豆的博客
09-17 2万+
echarts柱状图的背景色设置方法，官方推荐的例子中是又添加一组最大值来当背景（不建议），设置backgroundStyle即可： series:{ name:'违法违规国家排行', type:'bar', barWidth:'15', showBackground:true, back...
解决echarts 一条柱状图显示两个值,类似进度条的问题
10-15
在ECharts图表库中，创建一个柱状图来同时显示两个值，通常是为了展示数据的对比或者进度。这里的问题是需要让柱状图看起来像一个进度条，展示两个不同的数值，一个代表整体进度，另一个代表特定阶段的进度。通过...
Echarts混合图（柱状图、折线图）倒立对比展示
03-13
该文档是用于介绍echarts图形中的柱状图和折线图混合示例，因为官方文档事例中有，这里介绍的是柱状图与折线图Y轴上下对应，折线图正常显示，柱状图倒立展示，共用一个X轴的比较图例情况。
echarts柱状图配置
weixin_51689252的博客
09-29 1190
1.x轴横坐标值字体加深，去掉x轴，去掉x轴坐标，x轴类型type:'category'. xAxis: { type: 'category', data: xAxis_data, // x轴值字体加深 axisLabel:{ fontWeight: 'bold' }, // 去掉x轴刻度 axisTick: {
Echarts柱状图横坐标不显示
最新发布
zlloveyouforever的博客
05-07 953
本人遇到的问题：折线图横坐标可以正常显示 柱状图接收一样的数据在横坐标却显示不了
echarts 柱状图给y轴最大值加横线
jiaonizuoren的博客
12-19 2434
option = { color: ['#3398DB'], tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' ...
echarts 柱状图渐变色背景
05-14
该案例设置 echarts 柱状图渐变色，同样也可以应用折线图、圆形图等。效果说明：https://blog.youkuaiyun.com/qq_36437172/article/details/106115048
记录echarts 饼图1 内圆外圆中心圆
努力中的小曾
06-26 933
echarts 饼图记录 内圆 外圆 中心圆
【大前端】EChart 多系列柱状图绘制背景图
朝拜者
03-05 4619
自定义图标适用于任何坐标系，且显示样式可根据需要自定义实现，所以更适用于多系列柱状图绘制背景图的需求自定义图标，起始坐标都是在左上角开始option = {tooltip: {},grid: {},xAxis: [],yAxis: [],series: [},//获取对应类目的axisTick中心点坐标//通过坐标系的宽度和类目数，计算单个类目的背景return {shape: {// 相对左上角坐标},},},name: '直接访问',},
echart柱状图背景色
天空影
12-20 1万+
关键 barGap:不同系列的柱间距离，为百分比（如 ‘30%’，表示柱子宽度的 30%）。如果想要两个系列的柱子重叠，可以设置 barGap 为 ‘-100%’。这在用柱子做背景的时候有用。在同一坐标系上，此属性会被多个 ‘bar’ 系列共享。此属性应设置于此坐标系中最后一个 ‘bar’ 系列上才会生效，并且是对此坐标系中所有 ‘bar’ 系列生效。 代码 option = { xAxi...
echart 柱状图加横线
HotGirlYmj的博客
08-25 1629
echart绘制
Echarts柱状图背景的两种实现方法
JqejDeveloper的博客
09-18 3371
在Echarts中，我们可以通过两种方法来实现柱状图的背景效果，以增强图表的可读性和美观性。下面将介绍这两种方法，并提供相应的源代码示例。综上所述，我们介绍了Echarts柱状图背景的两种实现方法：使用渐变色背景和使用背景图片。在这个示例中，我们使用了蓝色作为渐变色，起始颜色的透明度为0.3，结束颜色的透明度为0。要实现这种效果，我们可以使用Echarts中的背景色配置项，并设置为一个渐变色对象。需要注意的是，使用背景图片时，可能需要根据实际情况调整柱状图的样式，以确保图表和背景图片之间的对比度和可读性。
Echarts 在柱形图上加横线，设置基准线，自定义tooltip
Merryhyl的专栏
11-12 8416
1.效果图 2.配置参数 option = { title: { text: '世界人口总量', subtext: '数据来自网络' }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow', axis :'y', Z:10 }, forma.
echarts 柱状图加背景加渐变
liuxi_happy的博客
11-07 583
【代码】echarts 柱状图加背景加渐变。
echarts动态渲染柱状图背景颜色以及顶部数值
notagoodwriter的博客
12-07 6731
echarts动态渲染柱状图背景颜色以及顶部数值
vue echarts柱状图横线自动滚动
12-05
为了实现vue echarts柱状图横线自动滚动，可以使用echarts的dataZoom组件。dataZoom组件提供了数据区域缩放、拖动条、滑动条等功能，可以帮助用户更好地浏览数据。具体实现步骤如下： 1.在模板中引入echarts组件，并设置一个div容器来放置echarts图表。 2.在script标签中引入echarts，并在mounted钩子函数中初始化echarts图表。 3.在option中添加dataZoom组件，并设置type为slider，表示使用滑动条来缩放数据。同时，设置startValue和endValue为0和100，表示初始时显示全部数据。设置zoomLock为true，表示在缩放时锁定滑动条的位置。设置showDetail为false，表示不显示缩放条上的详细信息。 4.为了实现横向滚动，需要设置xAxis的boundaryGap为false，表示坐标轴两端的留白策略。同时，设置dataZoom的orient为'horizontal'，表示滑动条的方向为水平方向。 下面是一个示例代码，可以帮助你更好地理解如何实现vue echarts柱状图横线自动滚动： ```html <template> <div class="chart-container"> <div ref="chart" class="chart"></div> </div> </template> <script> import echarts from 'echarts' export default { mounted() { this.initChart() }, methods: { initChart() { const chartDom = this.$refs.chart const myChart = echarts.init(chartDom) const option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], boundaryGap: false // 设置坐标轴两端的留白策略 }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }], dataZoom: [{ // 添加dataZoom组件 type: 'slider', // 使用滑动条来缩放数据 startValue: 0, // 初始时显示全部数据 endValue: 100, zoomLock: true, // 在缩放时锁定滑动条的位置 showDetail: false // 不显示缩放条上的详细信息 }], tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } } } myChart.setOption(option) } } } </script> <style> .chart-container { width: 100%; height: 500px; display: flex; justify-content: center; align-items: center; } .chart { width: 80%; height: 80%; } </style> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值