菜单 搜索
首页 前端知识 echarts柱状图自动轮播

echarts柱状图自动轮播

2024-06-16 01:06:46 前端知识 前端哥 892 629 我要收藏

 1.这边重点在datazoom，然后执行计时器，this.intime()

this.intime()复制

dataZoom: [{
  show: false, // 是否开启滚轮
  height: 22,
  xAxisIndex: [
    0
  ],
  bottom: '8%',
  start: 1,
  end: 200,
  handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
  handleSize: '100%',
  handleStyle: {
    color: '#d3dee5'

  },
  textStyle: {
    color: '#fff' },
  borderColor: '#90979c'
}, {
  type: 'inside',
  show: true,
  height: 15,
  start: 1,
  end: 11
}],复制

data值：

options: null,
hovers: false,
app: {
  currentIndex: -1
}复制

 

this.options = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: '#333'
            }
          }
        },
        color: ['#08d9d6', '#14ffec', '#f08a5d'],
        legend: {
          top: '3%',
          right: '4%',
          lineStyle: {
            type: 'solid'
          },
          textStyle: {
            fontWeight: 900,
            fontSize: 16
          },
          data: [
            {
              icon: 'image://' + imgPath + 'img/echartlenge2.png',
              // icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
              name: '产销比',
              textStyle: {
                color: '#7DE8E3',
                fontSize: 14,
                padding: [0, 0, -3, 5]
              }
            },
            {
              icon: 'image://' + imgPath + 'img/greenfang380.png',
              // icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
              name: '供水量',
              textStyle: {
                color: '#26F3E8',
                fontSize: 14,
                padding: [2, 0, 0, 3]
              }
            },
            {
              icon: 'image://' + imgPath + 'img/orangefang380.png',
              // icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
              name: '售水量',
              textStyle: {
                color: '#E97B17',
                fontSize: 14,
                padding: [2, 0, 0, 3]
              }
            }
          ],
          orient: 'horizontal',
          itemWidth: 25,
          itemGap: 30
        },
        grid: {
          top: '22%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月'],
            // boundaryGap: false,
            axisTick: {
              show: false
            },
            axisLabel: {
              color: 'rgba(106, 172, 247, 1)',
              fontSize: 12,
              fontWeight: 400,
              show: true
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#73C2DC', // x轴线颜色
                width: 1 // x轴线粗细
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                color: '#295C88', // 背景虚线颜色
                type: 'dashed',
                width: 1
              }
            },
            axisLabel: {
              color: '#7CC5F7',
              fontSize: 14,
              fontWeight: 400,
              show: true
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            }
          },
          {}
        ],
        dataZoom: [{
          show: false, // 是否开启滚轮
          height: 22,
          xAxisIndex: [
            0
          ],
          bottom: '8%',
          start: 1,
          end: 200,
          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          handleSize: '100%',
          handleStyle: {
            color: '#d3dee5'
 
          },
          textStyle: {
            color: '#fff' },
          borderColor: '#90979c'
        }, {
          type: 'inside',
          show: true,
          height: 15,
          start: 1,
          end: 11
        }],
        series: [
          {
            name: '产销比',
            type: 'line',
            data: [120, 132, 101, 134, 90, 230, 210, 90, 230, 210, 60],
            symbol: 'circle', // 将小圆点改成实心 不写symbol默认空心
            symbolSize: 12, // 小圆点的大小
            itemStyle: {
              borderColor: 'rgba(255, 255, 255, 1)',
              borderWidth: 2,
              borderType: 'solid'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(166, 8, 245, .3)' // 靠上方的透明颜色
                },
 
                {
                  offset: 1,
                  color: 'rgba(166, 8, 245, .0)' // 靠下方的透明颜色
                }
              ])
            }
          },
          {
            name: '供水量',
            type: 'bar',
            barWidth: '20%',
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310, 90, 230, 210, 60],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#27F8ED' // 靠上方的透明颜色
                },
 
                {
                  offset: 1,
                  color: '#011C35' // 靠下方的透明颜色
                }
              ]),
              borderColor: '#27F8ED',
              borderWidth: 1.5
            }
          },
          {
            name: '售水量',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            barWidth: '20%',
            data: [120, 132, 101, 134, 90, 230, 210, 40, 130, 110, 90],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#EC7C16' // 靠上方的透明颜色
                },
 
                {
                  offset: 1,
                  color: '#011C35' // 靠下方的透明颜色
                }
              ]),
              borderColor: '#EC7C16',
              borderWidth: 1.5
            }
          }
        ]
      }
      this.intime()
复制

this.intime()方法：

    intime() {
      const that = this
      setInterval(() => {
        console.log(this.hovers)
        if (this.hovers === false) {
          var dataLen = that.options.series[0].data.length
 
          // 取消之前高亮的图形
          that.chart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: this.app.currentIndex
          })
          this.app.currentIndex = (that.app.currentIndex + 1) % dataLen
          // console.log(app.currentIndex);
          // 高亮当前图形
          that.chart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: that.app.currentIndex
          })
          // 显示 tooltip
          that.chart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: that.app.currentIndex
          })
        } else {
 
        }
      }, 1000)
    },
复制

在标签上设置鼠标放上去停止轮播判断：放在div上：

@mouseover="hovers = true"
    @mouseleave="hovers = false"
复制

转载请注明出处或者链接地址：https://www.qianduange.cn//article/12309.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！