小程序使用echarts(超详细教程)

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

小程序使用echarts第一步就是先引用到小程序里面,可以直接从这里下载

文件很多,我们值下载 ec-canvas 就好,下载完成后,直接放在pages同级目录下

小程序使用echarts(超详细教程),小程序

小程序使用echarts(超详细教程),小程序

  • index.js  在我们需要的页面的 js 文件顶部引入

// pages/index/index.js
import * as echarts from '../../ec-canvas/echarts';

let chart = {};
Page({
  data: {
    ec: {
      lazyLoad: true
    }
  },
  onLoad(options) {
      this.initChart(1)
  },
  // 初始化组件
  initChart(status) {
    const data = this.selectComponent("#mychart-dom-bar" + status)
    data.init((canvas, width, height) => {
      chart[status] = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: 2
      });
      canvas.setChart(chart[status]);
      this.setOption(status);
      return chart[status];
    })
  },
  setOption(i) {
    chart[i].clear(); // 清除
    chart[i].setOption(this['getOption' + i](), true); //获取新数据
  },
  getOption1() {
    return {
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: 0,
        bottom: 0,
        top: 25,
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['洗美', '贴膜', '改装', '改色'],
        axisTick: {
          show: false
        },
        axisLabel: {
          color: 'rgba(0,0,0,0.45)',
          fontWeight: 'bold',
          lineHeight: 14,
          padding: [10, 0, 19, 0]
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(0,0,0,0.15)'
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          color: 'rgba(0,0,0,0.45)',
          fontWeight: 'bold',
          lineHeight: 14,
          padding: [0, 8, 0, 0]
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(0,0,0,0.15)'
          }
        }
      },
      series: [{
        data: [120, 200, 150, 80],
        type: 'bar',
        color: '#0E71B2',
        label: {
          show: true,
          position: 'top',
          color: '#0E71B2',
          fontSize: 16
        }
      }]
    }
  },
})
  • index.wxml

  <!-- 折线图 -->
  <view class="echarts">
    <ec-canvas id="mychart-dom-bar1" canvas-id="mychart-bar1" ec="{{ec100}}"></ec-canvas>
  </view>
  <!-- 柱状图 -->
  <view class="echartsBar echarts">
    <ec-canvas id="mychart-dom-bar2" canvas-id="mychart-bar2" ec="{{ec200}}"></ec-canvas>
  </view>
  • index.wxss

  .echarts {
    width: 90%;
    margin: 0 auto;
    height: 260rpx;
    position: relative;
    overflow-x: hidden;

    ec-canvas {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .echartsTime {
      display: flex;
      justify-content: space-between;
      font-size: 20rpx;
      color: #00263A;
      line-height: 28rpx;
      position: absolute;
      width: 90%;
      bottom: 0;
      left: 10%;
      margin: 0 auto;
    }
  }

  .echartsBar {
    height: 56rpx;
    margin-top: 20rpx;
  }

参考了大佬的文章文章来源地址https://www.toymoban.com/news/detail-741684.html

到了这里,关于小程序使用echarts(超详细教程)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • ECharts教程(详细)

    非常全面的ECharts教程,非常全面的ECharts教程,目前线条/节点颜色、线条粗细、线条样式、线条阴影、线条平滑、线条节点大小、线条节点阴影、线条节点边框、线条节点边框阴影、工具提醒、工具提醒样式、工具自定义提醒、工具提醒背景、工具提醒边框、工具提醒阴影、

    2024年01月25日
    浏览(32)
  • 【Echarts】在html中引入echarts详细步骤教程【源码】

    vue3中引入echatrs详细步骤 : 【Echarts】在vue3中使用echarts绘散点图(待更新)_Morning_xx的博客-CSDN博客 vue3组件中单独引入echarts详细步骤: 【vue3】组件中使用引入echarts方法-CSDN博客 Apache ECharts 点击【下载】 生成效果: 以下配置很重要 :series xAxis yAxis grid tooltip title legend colo

    2024年02月06日
    浏览(28)
  • echarts入门教程(超级详细带案例)

    1.echarts是一款基于JavaScript的数据 可视化图表库 ,提供直观,生动,可交互,可个性化定制的数据可视化图表。ECharts最初由百度团队开源,并于2018年初捐赠给Apache基金会,成为ASF孵化级项目。 2.学习一项技术的关键,还是需要多读官方文档,官网链接Apache ECharts,与之类似的

    2024年02月03日
    浏览(34)
  • 在vue项目中使用echarts(echarts不显示,echarts使用详细)

    简述:我们在写大屏项目和vue项目时经常会用到echarts,用于数据统计和可视化,它是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表,下面分享下它在项目中的使用方式; 1、安装,下载相关依赖(可用镜像cnpm); 2、在项目

    2024年02月02日
    浏览(39)
  • 【小程序使用vant Weapp组件库详细教程】

    要说到小程序开发过程中用到的UI组件库,我第一个想到的就是vant,因为对于我来说,这个组件库里面的UI界面比较符合我的审美,颜值还不错,另外最重要的是,里面的功能比较齐全,项目之中要用到的一些需求,在这里都可以找到并且直接使用,就很nice了。 小程序使用轻

    2024年02月16日
    浏览(48)
  • vscode 和 keil协同使用开发stm32程序,超详细教程

    VSCODE 是一款广受好评的代码编辑器, KEIL 是常用的嵌入式开发工具但编程界面简陋。 将两个工具一起搭配使 用, 能大大提高我们的效率。 你可以把 VSCODE 专门用来编辑和编译, KEIL 用来对文件进行增删下载配置环境。 原始的 KEIL 代码编辑界面在编 辑和阅读上都十分的不方

    2024年02月05日
    浏览(54)
  • AI 绘画 API 超详细使用教程 - 附微信小程序接入代码

    【AI绘画/AI图像生成】已成为现下炙手可热的话题,AI 大模型训练的成本高昂,算法研究时间周期较长,对于大多数人来说,自研一套算法模型还是非常困难的,因此 AI 绘画 API 就应运而生,直接调用 AI 绘画 API 就能轻松将先进的图文 AI 融入到我们的产品中,使用门槛是非常

    2023年04月17日
    浏览(48)
  • Echarts前端可视化库使用教程

    ECharts是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。 官网:https://echarts.apache.org/zh/inde

    2024年02月10日
    浏览(48)
  • uniapp小程序使用原生echarts非第三方封装 小程序使用echarts 图表 可视化

    前言:之前小程序做的图表,当时没找到太多使用echarts的教程,大多都是二次封装的。连uniapp都是推荐别人二次封装的图表,然后用了之后呢,发现不是自己想要的效果(也许是自己对别人二次封装的代码不够熟悉吧 ),然后干脆摸索下uniapp引入echarts图表(非他人封装的)

    2024年02月09日
    浏览(48)
  • 小程序使用echarts

    参考文档:echarts官网、echarts-for-weixin 第一步引入组件库,可直接从echarts-for-weixin下载,也可以从自定义配置自定义生成,这里我们就不贴了 组件库引入好后,就是页面引用啦,废话不多说,直接上代码 index.js: index.wxml: index.wxss: 此方法也可封装为一个页面生成多个图表 欢

    2024年02月14日
    浏览(32)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包