在微信小程序中使用 echarts 图片-例 折线图
首先进入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 图片-例 折线图的更多相关文章
- 微信小程序中使用ECharts 异步加载数据 实现图表
<!--pages/bar/index.wxml--> <view class="container"> <ec-canvas id="my ...
- 微信小程序中使用echarts
一.效果图 二.代码 import * as echarts from '../../component/ec-canvas/echarts'; const app = getApp(); var x ...
- 微信小程序中图片上传阿里云Oss
本人今年6月份毕业,最近刚在上海一家小公司实习,做微信小程序开发.最近工作遇到一个小问题. 微信小程序图片上传阿里云服务器Oss也折腾了蛮久才解决的,所以特意去记录一下. 第一步:配置阿里云地址: 我 ...
- 在微信小程序中使用富文本转化插件wxParse
在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...
- 全栈开发工程师微信小程序-中(下)
全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...
- 全栈开发工程师微信小程序-中
全栈开发工程师微信小程序-中 多媒体及其他的组件 navigator 页面链接 target 在哪个目标上发生跳转,默认当前小程序,可选值self/miniProgram url 当前小程序内的跳转链 ...
- 微信小程序--地图上添加图片
如何在微信小程序地图添加上,添加图片? 在微信小程序中,地图的层级最高,所以我们没有办法,通过定位,在地图上添加图片等信息; 处理办法: 添加控件:controls; 其中有个属性position,进 ...
- 微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签
微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签 一.问题 报错信息: VM696:2 pages/user/user.wxss 中的本地资源 ...
- 转:【微信小程序】 微信小程序-拍照或选择图片并上传文件
调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=20161222#wxchooseimageobj ...
随机推荐
- 有手就行2——持续集成环境—Jenkins安装、插件、用户权限及凭证管理
有手就行2--持续集成环境-Jenkins安装.插件.权限及凭证管理 持续集成环境(1)-Jenkins安装 持续集成环境(2)-Jenkins插件管理 持续集成环境(3)-Jenkins用户权限管理 ...
- 帆软报表(finereport)雷达图钻取详细点新页面展示
添加参数栏,季度下拉框的空间名为combobox0 添加雷达图,通过第三页面做跳转 雷达图钻取.cpt为联动钻取的第三页面 添加纬度(所点击钻取的点) 参数 wd 添加季度参数 jd 值为季 ...
- opencv笔记--Active contours
Active Contours 也称作 Snake,通过定义封闭区域曲线的能量函数,并使其最小化得到最终曲线. Active Contours 被用作物体边界精确定位上,opencv 给出了一个实现, ...
- Solution -「ARC 104D」Multiset Mean
\(\mathcal{Description}\) Link. 读题时间≈想题时间,草.( 给定 \(N,K,M\),对于每个 \(x\in[1,N]\) 的整数 \(x\),统计多重集 ...
- Solution -「51nod 1355」斐波那契的最小公倍数
\(\mathcal{Description}\) Link. 令 \(f\) 为 \(\text{Fibonacci}\) 数列,给定 \(\{a_n\}\),求: \[\operatorn ...
- soc AXI接口术语和特性
AXI接口术语和特性 1.outstanding 2.interleaving 3.out-of-oder 4.写数据可以优先于写地址 5.大小端 小端:低地址数据放在总线bus的低位. 大端:低地址 ...
- 通过Dapr实现一个简单的基于.net的微服务电商系统(十九)——分布式事务之Saga模式
在之前的系列文章中聊过分布式事务的一种实现方案,即通过在集群中暴露actor服务来实现分布式事务的本地原子化.但是actor服务本身有其特殊性,场景上并不通用.所以今天来讲讲分布式事务实现方案之sag ...
- MyBatis功能点二:plugins插件使用
MyBatis自定义插件使用步骤(已有pojo及mapper的基础上) 一.自定义插件,实现Interceptor接口 二.核心配置文件sqlMapConfig.xml文件增加插件相关内容 测试 测试 ...
- 不用rustup,Windows下gnu版Rust安装与开发环境配置
写在前面 本文介绍了在不使用rustup的情况下,在Windows上安装gnu版的Rust,并配置开发环境(VSCode + rust-analyzer,CLion + IntelliJ Rust)的 ...
- Spring-servlet随笔1
一:工程思想 1.建立父工程 2:导入通用依赖 3:删除无用文件 4:创建不同模块. pom.xml 依赖文件: <dependencies> <dependency> ...