首先进入echarts官方[https://echarts.apache.org/handbook/zh/get-started/]。这边只需要在小程序中简单应用一下echarts折线图 所以不需要把整体下载下来,这边只需要下载几个简单的东西下来即可!

1. 在小程序中新建一个组件,如下



2. 建好文件之后还不着急写代码,看到我上面的图里面不是还有两个文件文件吗?咱先把资源文件给干下来再说

继续到echarts官网中 往下翻找到 应用篇 看到下面的跨平台方案-微信小程序



这边会告诉你 需要去github上 把对应的组件以及依赖复制过来,包括上面的第一张图里所有的文件 我们直接复制过来,将它覆盖;



然后再界面上引用就好了 等到你把所有代码搞定之后 你可以点击一下上传 好家伙 系统直接提示你

[JS 文件编译错误] 以下文件体积超过 500KB,已跳过压缩以及 ES6 转 ES5 的处理。

componet/LineChart/echarts.js



这个问题好解决 回到echarts官网 咱们针对小程序端定制下载一个echarts.js文件即可



等了几分钟之后呢 你会发现下载下来的文件叫做echarts.min.js,把名字中的min去掉直接改成 然后拖到文件夹中覆盖一下即可;

完成的代码呢 就不放了 大概的操作流程已经再上面了 就不献丑了

实现效果

后面还有几点注意一下

在界面中引用的我补充一下

1.确保你的需要引用的界面json文件里 把你要引入的组件对象定义了一次

2.然后界面上就是一行简单的使用

<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}" bind:init="echartInit"></ec-canvas>

这里的ec 一定要跟js中的ec对应 不然必报错

3.js文件中呢

浅引用一下组件资源文件

import * as echarts from '../../componet/LineChart/echarts'; -后面引用部分的echarts不能出错

我这里用到的地方呢 是先通过异步请求加载数据(放在onload中),然后在折线图组件初始化时 再把数据添加进去 这边需求问题啦 就不细细讨论了

不过 初始化 总是不能少的

var chart = null;
// echart 图标初始化
function initChart(canvas, width, height, option) {
chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart); var option = option;
chart.setOption(option);
return chart;
}

在异步请求数据后 把对应的列表值传入其中,像这样



option中的参数以及其代表的含义 请自行百度,比较重要的是 series xAxis yAxis

作用分别是渲染 折线 | X轴 | Y轴 数据 用用就知道啦

当然这不是一步两步的问题阿 只是中间个别细节是需要注意一下

然后总结一下 在js中的应用流程

首先 在onload中初始化折线图表



然后是initChart() 赋值



这边我是写在了Page的同级的地方

初始化完成之后呢 咱再将异步请求后的数据放进去



主要的东西是再series

2022年3月22日-Distance

在微信小程序中使用 echarts 图片-例 折线图的更多相关文章

  1. 微信小程序中使用ECharts 异步加载数据 实现图表

    <!--pages/bar/index.wxml--> <view class="container"> <ec-canvas id="my ...

  2. 微信小程序中使用echarts

    一.效果图 二.代码 import * as echarts from '../../component/ec-canvas/echarts'; const app = getApp(); var x ...

  3. 微信小程序中图片上传阿里云Oss

    本人今年6月份毕业,最近刚在上海一家小公司实习,做微信小程序开发.最近工作遇到一个小问题. 微信小程序图片上传阿里云服务器Oss也折腾了蛮久才解决的,所以特意去记录一下. 第一步:配置阿里云地址: 我 ...

  4. 在微信小程序中使用富文本转化插件wxParse

    在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...

  5. 全栈开发工程师微信小程序-中(下)

    全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...

  6. 全栈开发工程师微信小程序-中

    全栈开发工程师微信小程序-中 多媒体及其他的组件 navigator 页面链接 target 在哪个目标上发生跳转,默认当前小程序,可选值self/miniProgram url 当前小程序内的跳转链 ...

  7. 微信小程序--地图上添加图片

    如何在微信小程序地图添加上,添加图片? 在微信小程序中,地图的层级最高,所以我们没有办法,通过定位,在地图上添加图片等信息; 处理办法: 添加控件:controls; 其中有个属性position,进 ...

  8. 微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签

    微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签 一.问题 报错信息: VM696:2 pages/user/user.wxss 中的本地资源 ...

  9. 转:【微信小程序】 微信小程序-拍照或选择图片并上传文件

    调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=20161222#wxchooseimageobj ...

随机推荐

  1. 3、架构--cp、scp、rsync、实时监控与同步

    笔记 1.晨考 1.VPN的搭建步骤 2.vpn中的iptables是什么作用? 网络转发 2.昨日问题 1.yum源问题 2.VPN链接正常,但是没办法通过172 3.VPN链接时,出现了DNS错误 ...

  2. 基于双TMS320C6678 + XC7K420T的6U CPCI Express高速数据处理平台

    1.板卡概述 板卡由我公司自主研发,基于6UCPCI架构,处理板包含双片TI DSP TMS320C6678芯片:一片Xilinx公司FPGA XC7K420T-1FFG1156 芯片:六个千兆网口( ...

  3. Memory Management in Rust

    程序在运行时需要请求操作系统分配内存以及释放内存,因此,程序员在编写程序时,需要显式(手动)地编写分配和释放内存的代码,或者隐式(自动,由语言保证)地进行内存管理.对于前者,C/C++ 是代表语言,程 ...

  4. 暑假撸系统1-先把git后悔药准备好!

    学校规定让暑假自己撸一款在线考试系统,其实的确需要一个款在线的考试系统系统,因为平时学校是使用Excel讲解选择题的.基于这个目标那么就话不多说.开干! 本来趁着项目想练练手,使用些新学习的技能看看, ...

  5. Java全栈学习路线、学习资源和面试题一条龙

    肝了一个月,终于把Java学习路线.面试题资源和电子书资源都整理好了. Java 从基础到微服务的学习路线,其中还包括科班知识.学习建议.后续的学习引导和相应的学习资源(视频.书籍.网站),还整理了J ...

  6. SpringBoot中请求参数 @MatrixVariable 矩阵变量

    一.矩阵变量请求格式 /users;id=1,uname=jack 二.SpringBoot开启矩阵请求 首先查看springboot源码关于矩阵部分的内容 在 WebMvcAutoConfigura ...

  7. 使用.rmp文件在redhat7.9安装oracle19c

    19c开始,oracle提供了rmp安装包.感觉安装更方便一些了.记录一次测试环境安装. 1,创建交换空间 2,下载oracle 19c必要文件(oracle官网下载需要注册帐号,可以用迅雷下载后再上 ...

  8. 前端防抖,double click 克星

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 你所不知道的 C# 10新特性

    我们很高兴地宣布 C# 10 作为 .NET 6 和 Visual Studio 2022 的一部分已经发布了.在这篇文章中,我们将介绍 C# 10 的许多新功能,这些功能使您的代码更漂亮.更具表现力 ...

  10. 【基础篇】js对本地文件增删改查--改

    前置条件: 1. 本地有安装node,点击传送门 项目目录: 1. msg.json内容 { "data": [ { "id": 1, "name&q ...