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

news2024/11/26 2:48:41

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

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

  • 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;
  }

参考了大佬的文章

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1169676.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

项目管理之如何估算项目工作时间

在项目管理中&#xff0c;项目工作时间的估算是一个关键环节&#xff0c;它直接影响到项目的进度、预算和资源分配。本文将介绍几种常用的时间估算技术和时间估算的十步法&#xff0c;帮助你更好地估算项目工作时间。 常用时间估算技术 类比估算 参照以往同类同规模项目时间数…

01_stable_diffusion_introduction_CN

stable_diffusion 配置 !pip install -Uq diffusers ftfy accelerate# Installing transformers from source for now since we need the latest version for Depth2Img: !pip install -Uq githttps://github.com/huggingface/transformers import torch import requests fro…

项目实战:删除特定水果库存记录

1、在index.js中添加删除点击事件 1.1、common.js function $(key){if(key){if(key.startsWith("#")){key key.substring(1)return document.getElementById(key)}else{let nodeList document.getElementsByName(key)return Array.from(nodeList)}} } window.onloa…

c语言从入门到实战——VS2022实用调试技巧

VS实用调试技巧 前言1. 什么是bug2. 什么是调试&#xff08;debug&#xff09;3. Debug和Release4. VS调试快捷键4.1 环境准备4.2 调试快捷键 5. 监视和内存观察5.1 监视5.2 内存 6. 调试举例17. 调试举例28. 编程常见错误归类8.1 编译型错误8.2 链接型错误8.3 运行时错误 前言…

UI自动化测试:会消失的弹窗(Toast)如何定位?

前言 看到标题可能有的小伙伴们懵了&#xff0c;什么是Toast&#xff0c;其实Toast大家都见过&#xff0c;就是一般在我们页面中停留大概2~3秒的时间后自动消失的弹框&#xff0c;那么既然要做自动化&#xff0c;可能Toast也需要大家进行测试&#xff0c;那么小编今天就来介绍…

如何使用CSS命名规范提高您的编码效率

CSS命名约定可以提高团队成员在项目中的协作能力&#xff0c;通过允许开发人员简化工作流程&#xff0c;增强项目的可维护性和可扩展性。在本文中&#xff0c;我们将深入探讨CSS命名约定的世界&#xff0c;展示实际示例以及它们为您的开发过程带来的好处。 在前端开发中&#x…

[极客大挑战 2019]Http 1

题目环境&#xff1a; 看起来挺花里胡哨的 F12查看源代码寻找隐藏文件 这是啥子呀&#xff0c;果然防不胜防 点击隐藏文件Secret.php 它不是来自这个地址的请求 报头&#xff1a;https://Sycsecret.buuoj.cn 需要抓包&#xff0c;在抓包前了解部分数据包参数 GET:到 Host:来自 …

Flutter vs 前端 杂谈:SliverAppBar、手动实现Appbar、前端Html+JS怎么实现滚动变化型Appbar - 比较

Flutter vs 前端 杂谈 SliverAppBar的弹性背景的显隐效果使用HtmlJS怎么实现 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550…

MySQL数据库中不同数据类型字段关联后结果居然有这么大差异?

点击上方蓝字关注我 在数据库的世界里&#xff0c;数据的连接操作是至关重要的。但在处理关联表的字段的数据类型不同时&#xff0c;得到的结果经常会出乎预料。 1. 案例 1.1 数据库中先创建表及数据 -- 创建tb1 CREATE TABLE tb1 (id BIGINT NOT NULL PRIMARY KEY, NAME VARC…

掌握Maven和SpringBoot的灵活性:定制化lib目录和依赖范围

前言 在开发基于Maven和SpringBoot的项目时&#xff0c;我们经常会使用第三方库来满足需求。然而&#xff0c;有时候我们需要更灵活地控制这些库的依赖范围和加载方式。本文将介绍如何使用Maven和SpringBoot实现定制化的lib目录和依赖范围。经过如下定制化后&#xff0c;打包执…

【C语言】备战校赛Day3

日期:11.3 星期五 L1-007 念数字 题目描述 输入一个整数&#xff0c;输出每个数字对应的拼音。当整数为负数时&#xff0c;先输出fu字。十个数字对应的拼音如下&#xff1a; 0: ling 1: yi 2: er 3: san 4: si 5: wu 6: liu 7: qi 8: ba 9: jiu 输入描述 输入在一行中给出一个…

Spring Data Redis + RabbitMQ - 基于 string + hash 实现缓存,计数(高内聚)

目录 一、Spring Data Redis 1.1、缓存功能(分析) 1.2、案例实现 一、Spring Data Redis 1.1、缓存功能(分析) hash 类型存储缓存相比于 string 类型就有更多的更合适的使用场景. 例如,我有以下这样一个 UserInfo 信息 假设这样一个场景就是:万一只想获取其中某一个…

MySQL第三讲·SQL boy的CRUD操作

你好&#xff0c;我是安然无虞。 文章目录 增删查改&#xff1a;如何操作表中的数据&#xff1f;添加数据插入数据记录插入查询结果 删除数据修改数据查询数据select&#xff5c;where&#xff5c;group by&#xff5c;havingfromorder bylimit 增删查改&#xff1a;如何操作表…

C++标准模板(STL)- 类型支持 (类型属性,is_literal_type,is_polymorphic,is_empty)

类型特性 类型特性定义一个编译时基于模板的结构&#xff0c;以查询或修改类型的属性。 试图特化定义于 <type_traits> 头文件的模板导致未定义行为&#xff0c;除了 std::common_type 可依照其所描述特化。 定义于<type_traits>头文件的模板可以用不完整类型实例…

uniapp小程序刮刮乐抽奖

使用canvas画布画出刮刮乐要被刮的图片&#xff0c;使用移动清除画布。 当前代码封装为刮刮乐的组件&#xff1b; vue代码&#xff1a; <template><view class"page" v-if"merchantInfo.cdn_static"><image class"bg" :src&q…

强化学习的动态规划二

一、典型示例 考虑如下所示的44网格。 图1 非终端状态为S {1, 2, . . . , 14}。在每个状态下有四种可能的行为&#xff0c;A {up, down, right, left}&#xff0c;这些行为除了会将代理从网格上移走外&#xff0c;其他都会确定性地引起相应的状态转换。因此&#xff0c;例如&…

VMware产品收集日志方法汇总

概述 vCenter日志是一个用于存储与vSphere环境相关的各种活动、事件和警告的日志系统。通过收集并分析vCenter日志&#xff0c;管理员可以获得有关其虚拟化环境的重要洞察和故障排除信息。 vCenter日志由多个组件组成&#xff0c;包括vCenter Server、ESXi主机和其他vSphere组…

软件测试面试题:Web 端测试和 App 端测试有何不同

Web 端测试和 App 端测试是针对不同平台的上的应用进行测试&#xff0c;Web应用和App端的应用实现方式不同&#xff0c;测试时的侧重点也不一样。 今天这篇文章就来介绍下两者的不同之处以及测试时的侧重点。 Web 端应用和 App 端应用的区别 平台兼容性 Web 端应用可以在任何…

C#开源的一个能利用Windows通知栏背单词的软件 - ToastFish

前言 今天给大家推荐一个C#开源且免费的能利用Windows通知栏背单词的软件&#xff0c;可以让你在上班、上课等恶劣环境下安全隐蔽地背单词&#xff08;利用摸鱼时间背单词的软件&#xff09;&#xff1a;ToastFish。 操作系统要求 目前该软件只支持Windows10及以上系统&…

【C语言】C语言⻘蛙跳台阶问题--递归问题

&#x1f308;write in front :&#x1f50d;个人主页 &#xff1a; 啊森要自信的主页 本期专栏&#x1f525;&#xff1a;本期将分享一些猜数字小游戏怎么一步一步实现的 &#x1f308;作者寄语 &#x1f308;&#xff1a; 小菜鸟的力量不在于它的体型&#xff0c;而在于它内心…