当前位置: 首页 > news >正文

uniapp 开发微信小程序使用echart的dataZoom属性缩放功能不生效!bug记录!

在本项目中使用的是这个echart库

在项目中添加了dataZoom配置项但是不生效,突然想到微信小程序代码大小的限制,之前的echarts.js是定制的,有可能没有加dataZoom组件。故重新定制echarts.js。之前用的echarts版本是5.0.0,这次也是定制同样的版本,但是报错,按照之前的经验判断,可能是版本问题,故往上提高了一个版本。然后就生效啦!!!最后生效的版本5.1.0。

如果报错:

报t.addEventListener is not a function,把t.addEventListener(e,n,i) 删掉;

报t.preventDefault is not a function,我这边暂时把t.preventDefault里面的函数执行语句删除了,之后便可以进行拖动,但缩放没有试过。

 

下面是option代码

let option = {grid: { //调整图与容器周围的间距top: '14%',left: '12%', //默认10%right: '16%', //默认10%// bottom: '8%', //默认60containLabel: true//grid区域是否包含坐标轴的刻度标签},xAxis: {name: "日期", //x轴的单位type: 'category',// interval: 2, // 设置间距为2,表示每隔一个刻度显示一个刻度// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],data: this.xData,axisTick: {alignWithLabel: true,interval: 0,},axisLabel: {interval: 0,rotate: that.totalData.title === '微策' ? 0 : 20,textStyle: {color: '#667286',},// formatter: '{M}-{d}\n{HH}-{mm}'// 使用函数模板,函数参数分别为刻度数值(类目),刻度的索引formatter: function(value, index) {let label = value;if (that.totalData.title === '硅基') {label = `${label.slice(11, 19)}`} else if (that.totalData.title === '微策') {label = `${label.slice(5, 10)}\n${label.slice(11, 16)}`} else {label = `${label.slice(5, 10)}`}return label;}},},yAxis: {type: 'value',name: a[this.totalData.title], //y轴的单位axisLabel: {textStyle: {color: '#667286',},// 	formatter: '{value} KG',//y轴每一个刻度加单位},},dataZoom: [{type: 'inside',// show:this.dataZoomEnd===100?false:true,//当标签100%显示时候不显示滑块 type=slider时使用start: 0,end: this.dataZoomEnd,}],tooltip: {trigger: 'axis',axisPointer: {type: 'line',lineStyle: {// type: 'solid',//鼠标移入的基准线实线color: '#53cdef',},},// formatter: "日期 :{b0}\<br\/\>{a0} : {c0}KG \<br\/\>",},series: [{// showSymbol: false,//隐藏折线拐点,只有鼠标移入时候显示name: b[this.totalData.title],data: this.yData,// data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',smooth: true,itemStyle: { //折线拐点标志的样式normal: {color: '#00875A',}},// label:{//   show: true,//   position: 'bottom',//   textStyle: {//     fontSize: 20//   }// },lineStyle: {normal: {color: '#00875A',width: 2,}},areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#00875A'},{offset: 1,color: '#FFFFFF'}])},}]};

http://www.lryc.cn/news/140756.html

相关文章:

  • 用户端Web自动化测试_L4
  • CAPL - Panel和TestModule结合实现测试项可选
  • 机器学习,过拟合与欠拟合,正则化与交叉验证
  • gradio使用transformer模块demo介绍1:Text Natural Language Processing
  • 算法通关村——数论经典问题解析
  • 代码随想录算法训练营第四十六天|LeetCode 1143,1035,53
  • leetcode 541.反转字符串II
  • MyBatis与Spring整合以及AOP和PageHelper分页插件整合
  • 《认知觉醒》读书笔记之潜意识
  • Stable Diffusion 系列教程 | 图生图基础
  • cuda编程day001
  • Java 中使用 ES 高级客户端库 RestHighLevelClient 清理百万级规模历史数据
  • C++最易读手撸神经网络两隐藏层(任意Nodes每层)梯度下降230821a
  • Leetcode 2235.两整数相加
  • Postman —— postman实现参数化
  • LeetCode--HOT100题(41)
  • 微信小程序教学系列(6)
  • 小程序中的全局配置以及常用的配置项(window,tabBar)
  • 数据工厂调研及结果展示
  • 抓包相关,抓包学习
  • 云原生之使用Docker部署SSCMS内容管理系统
  • uniapp -- 在组件中拿到pages.json下pages设置navigationBarTitleText这个值?
  • Java获取环境变量和运行时环境信息和自定义配置信息
  • React入门 组件学习笔记
  • Windows商店引入SUSE Linux Enterprise Server和openSUSE Leap
  • [NLP]深入理解 Megatron-LM
  • 软考高级系统架构设计师系列论文七十八:论软件产品线技术
  • yolov5中添加ShuffleAttention注意力机制
  • Effective C++条款17——以独立语句将newed 对象置入智能指针(资源管理)
  • 奇迹MU服务器如何选择配置?奇迹MU服务器租用