小程序中使用echarts配置以及折线图案例(简单易懂)

第一步:引入echarts文件--此文件需要下载:

 下载地址:点击此处进行下载echarts文件

点击Download ZIP下载压缩包,注意:此文件,我是从完整的文件中剥离出来的有用的,不会影响项目。

第二步:把整个文件放入到小程序文件里。

第三步:在需要的组件中进行正确引入

               在需要使用echarts的组件的js文件里需要引入

第四步:案例实现

 4-1:在index.js中

import * as echarts from '../../ec-canvas/echarts';function initChart(canvas, width, height, dpr) {const chart = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr // new});canvas.setChart(chart);var option = {label: {normal: {show: true}},grid: {containLabel: true,x: 10, //左y: 40, //上x2: 10, //右y2: 10, //下borderWidth: 1,},legend:{icon:'square',data:['室内温度','室外温度'],right:'10',itemWidth: 15,//图标宽itemHeight: 15,//图标高itemGap: 13,//间距textStyle:{color:'#9FA0A3',fontSize: 12,},},tooltip: {trigger: 'axis',backgroundColor: 'rgba(255, 255, 255, 0.8)',},xAxis: {type: 'category',boundaryGap: false,data: ['10:00', '10:15', '10:30', '10:45', '11:00'],// show: false},yAxis: {type: 'value',min: 0,max: 60,interval: 15,axisLabel: {formatter: '{value}'},splitLine: {lineStyle: {type: 'dashed',color:'#9FA0A3'}}// show: false},series: [{name: '室内温度',type: 'line',smooth: true,data: [15, 16, 15, 17, 15, 16, 17],itemStyle:{normal:{color:'#12A0FF'}}}, {name: '室外温度',type: 'line',smooth: true,data: [30, 20, 30, 35, 30, 25, 38],itemStyle:{normal:{color:'#D83D6C'}}}, ]};chart.setOption(option);return chart;
}Page({data: {ec: {onInit: initChart,},})

4.2:在index.wxml中

<view>
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
</view>

最后结果

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【新书推荐】当 Python 遇到 ChatGPT —— 自动化办公落地

文章目录 当 Python 遇到 ChatGPT&#xff1a;一种强大的组合1. 文本生成2. 自动翻译3. 对话生成4. 情感分析 新书推荐《Python自动化办公应用大全&#xff08;ChatGPT版&#xff09;&#xff1a;从零开始教编程小白一键搞定烦琐工作&#xff08;上下册&#xff09;》前言内容简…

Library <iconv2.4.0> not found 解决方法

1、升级到Xcode15之后&#xff0c;跑到C的库出现了这个问题。 2、于是去Xcode里面搜了一下&#xff0c;这个库已经搜不到了&#xff0c;但是项目里还是配置的&#xff0c;于是接下意识把它删掉了&#xff0c;就不报错了&#xff0c;顺手还把类似的这个库给加进去了 3、而且跑起…

【CVPR 2023】 All are Worth Words: A ViT Backbone for Diffusion Models

All are Worth Words: A ViT Backbone for Diffusion Models, CVPR 2023 论文&#xff1a;https://arxiv.org/abs/2209.12152 代码&#xff1a;https://github.com/baofff/U-ViT 解读&#xff1a;U-ViT: A ViT Backbone for Diffusion Models - 知乎 (zhihu.com) All are W…

ELK 处理 SpringCloud 日志

在排查线上异常的过程中&#xff0c;查询日志总是必不可缺的一部分。现今大多采用的微服务架构&#xff0c;日志被分散在不同的机器上&#xff0c;使得日志的查询变得异常困难。工欲善其事&#xff0c;必先利其器。如果此时有一个统一的实时日志分析平台&#xff0c;那可谓是雪…

CAN 通信-底层

本文主要以rockchip的rk3568平台基础&#xff0c;介绍can 控制器、硬件电路和底层驱动。 rk3568 CAN 控制器 概览 CAN(控制器区域网络)总线是一种稳健的车载总线标准,它允许微控制器和设备在没有主机计算机的应用中相互通信。它是一个基于消息的协议,最初是为了在汽车中多路…

计算机毕业设计 it职业生涯规划系统的设计与实现 Javaweb项目 Java实战项目 前后端分离 文档报告 代码讲解 安装调试

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…

validator库的使用详解

TOC 基本使用 前言 在做API开发时&#xff0c;需要对请求参数的校验&#xff0c;防止用户的恶意请求。例如日期格式&#xff0c;用户年龄&#xff0c;性别等必须是正常的值&#xff0c;不能随意设置。以前会使用大量的if判断参数的值是否符合规范&#xff0c;现在可以使用val…

串的基本操作(数据结构)

串的基本操作 #include <stdlib.h> #include <iostream> #include <stdio.h> #define MaxSize 255typedef struct{char ch[MaxSize];int length; }SString;//初始化 SString InitStr(SString &S){S.length0;return S; } //为了方便计算&#xff0c;串的…

ctfshow-web12(glob绕过)

打开链接&#xff0c;在网页源码里找到提示 要求以get请求方式给cmd传入参数 尝试直接调用系统命令&#xff0c;没有回显&#xff0c;可能被过滤了 测试phpinfo&#xff0c;回显成功&#xff0c;确实存在了代码执行 接下来我们尝试读取一下它存在的文件&#xff0c;这里主要介…

Factory-Method

Factory-Method 动机 在软件系统中&#xff0c;经常面临着创建对象的工作&#xff1b;由于需求的变化&#xff0c;需要创建的对象的具体类型经常变化。如何应对这种变化&#xff1f;如何绕过常规的对象创建方法(new)&#xff0c;提供一种“封装机制”来避免客户程序和这种“具…

Go 并发编程

并发编程 1.1 并发与并⾏ 并⾏与并发是两个不同的概念&#xff0c;普通解释&#xff1a; 并发&#xff1a;交替做不同事情的能⼒并⾏&#xff1a;同时做不同事情的能⼒ 如果站在程序员的⻆度去解释是这样的&#xff1a; 并发&#xff1a;不同的代码块交替执⾏并⾏&#xf…

蓝桥杯每日一题2023.10.11

子串分值和 - 蓝桥云课 (lanqiao.cn) 题目描述 题目分析 以下为50分方法&#xff08;暴力枚举&#xff09; 第一层循环枚举其长度&#xff0c;第二层循环枚举其左端点&#xff0c;k代表右端点&#xff0c;&#xff08;将每一种子串一一枚举出来&#xff09;算出从左端点到右…