微信小程序使用echarts实现条形统计图功能

这篇具有很好参考价值的文章主要介绍了微信小程序使用echarts实现条形统计图功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序使用echarts组件实现条形统计图功能

使用echarts实现在微信小程序中统计图的功能,其实很简单,只需要简单的两步就可以实现啦,具体思路如下:

  1. 引入echarts组件
  2. 调用相应的函数方法
    由于需要引入echarts组件,代码行数较多,无法在此粘贴,需要的友友们可以进我的主页,进行免费的资源下载,具体的实现结果截图如下:
    小程序中统计图,微信小程序,微信小程序,javascript,小程序,青少年编程,前端
    小程序中统计图,微信小程序,微信小程序,javascript,小程序,青少年编程,前端
    echarts组件代码较多,components文件夹的内容可在我主页的资源免费下载或者可前往echarts官网下载呦,引入的路径一定要正确。具体关于pages文件夹的代码如下:
    1、wxml代码:
<view class="charts-box">
  <view style="height: 500rpx;">
    <ec-canvas canvas-id="mychart-bar" ec="{{spread}}"></ec-canvas>
  </view>
  <view class="charts-title">
    <view class="charts-pot"></view>
    <view>{{title}}</view>
  </view>
</view>

2、wxss代码:

page {
  background-color: #f1f1f1;
}

.charts-box {
  background-color: white;
  margin: 20rpx;
  border-radius: 15rpx;
  padding: 20rpx;
}

.charts-title {
  display: flex;
  flex-direction: row;
  font-size: 24rpx;
  align-items: center;
  justify-content: center;
  color: rgb(173, 173, 173);
  margin: 30rpx 0 10rpx;
}

.charts-pot {
  width: 46rpx;
  height: 24rpx;
  background-color: #fcadb0;
  margin-right: 10rpx;
  border-radius: 10rpx;
  margin-top: 2rpx;
}

3、js代码:

import * as echarts from '../../components/ec-canvas/echarts.min';
let chart = null;

Page({

  /**
   * 页面的初始数据
   */
  data: {
    title:'我的CSDN创作统计',
    spread: {
      onInit: initChart
    }
  },
})

function initChart(canvas, width, height, dpr) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '0%',
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      data: ['文章总数', '经典界面', '微信小程序', '学习经验', '系统示例'],
      axisTick: {
        alignWithLabel: true
      }
    }],
    yAxis: [{
      type: 'value'
    }],
    series: [{
      name: '我的创作',
      type: 'bar',
      barWidth: '50%',
      data: [25, 1, 21, 2, 4],
      itemStyle: {
        color: '#fcadb0'
      }
    }]
  };
  chart.setOption(option);
  return chart;
}

4、json代码:

{
  "component": true,
  "navigationBarTitleText": "echarts·条形统计图",
  "navigationBarBackgroundColor": "#008B8B",
  "usingComponents": {
    "ec-canvas":"../../components/ec-canvas/ec-canvas"
  }
}

我这里简单绘制的条形统计图,如需要其他的统计图,可自行学习或者进我主页,将分享更多内容呦~
小编创作不易,口干舌燥,可以的话,请我喝杯水吧!欢迎各位的批评指导呦~文章来源地址https://www.toymoban.com/news/detail-860878.html

到了这里,关于微信小程序使用echarts实现条形统计图功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序使用echarts

    前期准备 : 1.echarts提供了一个微信小程序原生组件,下载地址:ecomfe/echarts-for-weixin ,拿到 ec-canvas 文件夹 2. 到 echarts官网 在线定制组件包 注意:版本一定要和 ec-canvas 相同 3.将下载的 echarts.min.js 替换掉原本的 echarts.js ,小程序文件过大影响发布 4.引入 ec-canvas.json ec-canvas

    2023年04月23日
    浏览(50)
  • 微信小程序+echart实现点亮旅游地图

    最近看抖音有个很火的特效就是点亮地图,去过哪些地方,于是乎自己也想做一个,结合自己之前做的以家庭为单位的小程序,可以考虑做一个家庭一起点亮地图的功能。 效果图 1,首先就是得去下微信小程序适配的echarts-for-weixin,这个网上很多,就不贴链接了。 下好后把

    2024年02月02日
    浏览(43)
  • 微信小程序使用ECharts----折线图

    微信小程序的开发者在很多情况下需要使用图形化数据展示,现有的 ECharts 这样的可视化工具由于一些原因并不能在微信小程序中使用。 因此,ECharts 团队和微信小程序官方团队合作,提供了 ECharts 的微信小程序版本。开发者可以通过熟悉的 ECharts 配置方式,快速开发图表,

    2024年04月15日
    浏览(66)
  • UNIAPP微信小程序使用Echarts

    ​ 最近要在uniapp做的小程序中使用echarts,网上搜了很多教程都很麻烦,这里提供一种简便快捷CV方案。 ​ 先说下图表选型的问题,如果你只用于微信小程序,可以使用本方案,Echarts丰富多样的图表和广大的开源图库都已使用。如果要考虑兼容性问题,比如兼容支付宝小程序

    2024年02月09日
    浏览(46)
  • uniapp 微信小程序使用echarts

    本文目的:通过分包的方式,尽可能在微信小程序中使用最新的echarts。 当然你也可以直接使用现成的uchart或者市场里别人封好的echarts. 准备工作 下载echarts-for-weixin源码。 复制 ec-canvas 文件夹以及下属文件,在uniapp项目中与pages同级的地方创建 wxcomponents 文件夹,将复制的文件

    2024年02月04日
    浏览(51)
  • 微信小程序中使用动态echarts

    解压后打开,把ec-canvas文件夹复制到项目pages同目录下 如有必要,将 ec-canvas 目录下的 echarts.js 替换为最新版的 ECharts。如果希望减小包体积大小,可以使用自定义构建生成并替换 echarts.js 进入官网echarts点击下载 然后根据自己的需求选择需要的图表、坐标系、组件进行打包下

    2024年02月14日
    浏览(44)
  • 微信小程序中使用echarts方法

    echarts是一个基于JS的数据可视化图标库,它提供了直观,生动,可交互,可个性定制的数据可视化图表。一般在vue中会使用到,并且官网也详细的说明了如何在vue中使用,但是今天我想来探讨的是,如何在 微信小程序中使用echarts : 1. ec-canvas的github仓库 官网中介绍到:echa

    2024年02月15日
    浏览(52)
  • uniapp微信小程序中使用echarts

    可以先随便建个文件夹,然后 npm init。运行下面的命令行,下载依赖 找到node_modulesmpvue-echarts下的文件,保留src文件夹,其他删除,复制mpvue-echarts文件夹到项目的components中 1.2、获取定制echarts的js文件 在https://echarts.apache.org/zh/builder.html定制echarts的js文件,然后下载,放到c

    2024年02月15日
    浏览(50)
  • 微信小程序使用echarts动态加载数据

    官网地址 GitHub - ecomfe/echarts-for-weixin: Apache ECharts 的微信小程序版本  将官网代码下载到本地,并进行解压,可以运行一下查看示例代码 将图示中的文件夹复制粘贴到小程序相应位置,建议放在components文件夹中  json文件,路径要与文件的位置保持一致  wxml文件,给ec-canvas一

    2024年04月12日
    浏览(39)
  • 微信小程序中简单使用echarts图表

       1.复制组件至page同级目录下(ec-canvas) 2. 在js中引入 3.在wxml写个标签 样式我是这么设置的(在wcss),差不多大写微信里尺寸可以 4.编写数据咯(数据肯定是从接口传的,我就不写死了 直接方法也贴出来) 先创建对象 初始化图表 定义option 定义方法掉接口数据定义optio

    2024年02月09日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包