【微信小程序】echarts 正态分布图区间柱形图

功能需求：x轴设置成某一段区间

解决思路：一般正常设置，只能一个刻度对应一个值。而现在需要使用两个x轴来实现。

效果展示：

代码：

let xAxis= ['0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100'];//百分比区间
let yAxis = [5,10,50,30,60,40,50,52,10,30];var option = {tooltip: {trigger: 'axis',axisPointer: {            // 坐标轴指示器，坐标轴触发有效type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'},backgroundColor: 'rgba(97, 127, 251, 0.8)',padding: [5, 20, 5, 10],//上 右 下 左confine: true,//将 tooltip 限制在该容器formatter: function (params) {let index = params[0].dataIndex;let htmlStr = '';let like = xAxis[index];let take = yAxis[index];if (!take) {take = 0;}htmlStr += 'x轴：' + take + '\n' + 'y轴：' + like+"-"+ (parseInt(like) + 10);if (cb != null) cb(index);if (cb != null) cb(index);return htmlStr;}},grid: {left: '3%',right: '4%',bottom: '15%',height: '80%',containLabel: true,},xAxis: [//因为一般正常设置，只能一个刻度对应一个值。若需要在范围区间显示一个值，就需要使用两个x轴来解决{data: yAxis, show: false},{data: xAxis,axisLabel: {interval: 0,show: true,},position: 'bottom',boundaryGap: false,axisPointer: {show: false,},axisLine: {lineStyle: {type: 'solid',color: '#D2D2D2',//左边线的颜色}},},],yAxis: {type: 'value',axisLine: {lineStyle: {type: 'solid',color: '#98B1FF',//左边线的颜色}},splitLine: { show: false },//去除网格线},series: [{type: 'bar',data: yAxis,itemStyle: {normal: {color: '#98B1FF',}},barCategoryGap: '0%'}],}

全部代码下班后加上~ 2021.4.19
参考：
https://www.cnblogs.com/zion0707/p/13844620.html

【微信小程序】echarts 正态分布图区间柱形图相关推荐

微信小程序 ECharts 水球图
效果图: 水球图插件 git地址:https://github.com/ecomfe/echarts-liquidfill#api 下载后,将dist下面的echarts-liquidfill.min ...
echarts异步数据加载MySQL_微信小程序 Echarts 异步数据更新
微信小程序 Echarts 异步数据更新的练习,被坑了很多次,特作记录. 作者:罗兵地址:https://www.cnblogs.com/hhh5460/p/9989805.html 0.效果图 1 ...
python天气查询小程序加背景图_微信小程序开发背景图显示功能
这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置background-image:(url) 属性,不管是开发工具还是线上都无法显示.经过查资料发现,background-image只能 ...
微信小程序echarts层级太高
项目中因为需求,底部的tab导航栏是自己写的,在开发者工具中一切正常:但是在真机上页面滑动时,echarts的层级比tab高,调过两者的z-index后仍然如此. 经过查找后发现cover-view和 ...
微信小程序--轮播图
微信小程序轮播图的实现是利用了swiper组件(滑块视图容器). 主要参数如下: 属性名类型默认值说明 indicator-dots Boolean false 是否显示面板指示点 indica ...
五分钟掌握微信小程序轮播图
微信小程序轮播图实现,比Android 轮播图来说,显得轻松多了. 微信小程序提供swiper组件,官网api提供的swiper滑块视图容器. 属性名类型默认值说明 autoplay Boole ...
微信小程序---轮播图
0. 微信小程序轮播图的实现 a. 是利用了swiper组件滑块视图容器 b. swiper的文档文档https://developers.weixin.qq.com/miniprogram/dev ...
微信小程序绘制分享图
微信小程序绘制分享图例子: demo下载地址:https://gitee.com/v-Xie/wxCanvasShar 大致代码会再以下说明实际开发项目: 基础知识点: 了解canvas基础知识 w ...
微信小程序轮播图代码
微信小程序轮播图的代码如下: 首先,在小程序的 wxml 文件中,添加如下代码:  <swiper class="swiper" in ...
微信小程序轮播图高度与图片高度不匹配问题
微信小程序轮播图高度与图片高度不匹配问题在微信小程序项目中,为了美观给page设置了padding值,然后让轮播图里面的图片宽度为100%,高度widthFix自适应,出现了如下问题:指示器位置不对 ...

【微信小程序】echarts 正态分布图区间柱形图

【微信小程序】echarts 正态分布图区间柱形图相关推荐

最新文章

热门文章

【微信小程序】echarts 正态分布图 区间柱形图

【微信小程序】echarts 正态分布图 区间柱形图相关推荐

最新文章

热门文章

【微信小程序】echarts 正态分布图区间柱形图

【微信小程序】echarts 正态分布图区间柱形图相关推荐