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

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

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

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

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

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

               在需要使用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.rhkb.cn/news/155907.html

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

相关文章

股票价格预测 | Python基于RNN及股票预测实战

循环神经网络(RNN)是基于序列数据(如语言、语音、时间序列)的递归性质而设计的,是一种反馈类型的神经网络,其结构包含环和自重复,因此被称为“循环”。它专门用于处理序列数据,如逐字生成文本或预测时间序列数据(例如股票价格)。 (1)one to one:其实和全连接神经网络…

Linux文件与目录的增删改查

一、增 1、mkdir命令 作用: 创建一个新目录。格式: mkdir [选项] 要创建的目录 常用参数: -p:创建目录结构中指定的每一个目录,如果目录不存在则创建,如果目录已存在也不会被覆盖。用法示例: 1、mkdir directory:创建单个目录 这个命令会在当前目录下创建一个名为…

C语言常见题目 过关斩将(1)C语言的那些坑题,你可知道❓

我的个人主页&#xff1a;☆光之梦☆的博客_CSDN博客-C语言基础语法&#xff08;超详细&#xff09;领域博主 欢迎各位 &#x1f44d;点赞 ⭐收藏 &#x1f4dd;评论 我的专栏&#xff1a;C语言基础语法&#xff08;超详细&#xff09;_☆光之梦☆的博客-CSDN博客&#xff08;这…

HTTP协议是什么

HTTP (全称为 “超文本传输协议”) 是一种应用非常广泛的 应用层协议&#xff0c;是一种网络通信协议。 超文本&#xff1a;所谓 “超文本” 的含义, 就是传输的内容不仅仅是文本(比如 html, css 这个就是文本), 还可以是一些其他的资源, 比如图片, 视频, 音频等二进制的数据。…

如何解决MidJourney错过付费后被暂停

问题 假定你已经成功订阅购买了 MidJourney 一段时间&#xff0c;下个月扣费周期到了。 如果你卡里余额不足&#xff0c;卡被封或失效了&#xff0c;或者你想着最近没啥用得上 MidJourney 的地方先省着不续费&#xff0c;等要用的时候就用不了。 如果想要去官网的续费页&…

MySQL下载和安装详细步骤

下载步骤详解 本教程以 MySQL 5.7.29 为例介绍其在 Windows 10 操作系统下的安装和配置过程。 步骤 1)&#xff1a;打开 MySQL 官方网站&#xff08;http://www.mysql.com&#xff09; 步骤 2)&#xff1a;滑到网页底部&#xff0c;点击 DOWNLOADS 列表下的 MySQL Community…

犯了这些错误吗?20%的Spring声明式事务可能有问题

今天&#xff0c;我来和你聊聊业务代码中与数据库事务相关的坑。 Spring针对Java Transaction API (JTA)、JDBC、Hibernate和Java Persistence API (JPA)等事务API&#xff0c;实现了一致的编程模型&#xff0c;而Spring的声明式事务功能更是提供了极其方便的事务配置方式&…

【C++】【自用】STL六大组件:算法

文章目录 &#x1f53a;sortstable_sort&#x1f53a;reverse&#x1f53a;swap&#x1f53a;find&#x1f53a;max/min&#x1f53a;next_permutation/prev_permutation 全排列binary_searchlower_bound/upper_bound 求下界和上界set_union/set_intersection/set_difference 求…

视频怎么压缩?这样做视频变小还清晰

在我们的日常生活和工作中&#xff0c;视频已经成为了不可或缺的一部分。然而&#xff0c;随着视频文件的增大&#xff0c;如何有效地压缩视频以方便存储和传输成了一个重要的问题&#xff0c;如果你还不知道怎么压缩视频大小&#xff0c;不妨试试下面的方法吧~ 方法一&#xf…

计算机网络面试常问问题--保研及考研复试

前言&#xff1a; Hello大家好&#xff0c;我是Dream。今年保研上岸山东大学人工智能专业 &#xff08;经验贴&#xff09;&#xff0c;现在将我自己的专业课备考知识点整理出来&#xff0c;分享给大家&#xff0c;希望可以帮助到大家&#xff01;这是重点知识总结&#xff0c;…

Spark任务优化分析

一、背景 首先需要掌握 Spark DAG、stage、task的相关概念 Spark的job、stage和task的机制论述 - 知乎 task数量和rdd 分区数相关 二、任务慢的原因分析 找到运行时间比较长的stage 再进去看里面的task 可以看到某个task 读取的数据量明显比其他task 较大。 如果是sql 任…

JavaSE学习值之--String类

&#x1f495;"不要同情自己&#xff0c;同情自己是卑劣懦夫的勾当&#xff01;"&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;JavaSE学习值之--String类 目录 前言&#xff1a; 一.String类 1.String类的属性 2.字符串的构造 注意&#xf…

数据仓库的基本概述之扫盲系列

数据仓库的诞生原因 随着互联网的普及&#xff0c;信息技术已经深入到各行各业&#xff0c;并逐步融入到企业的日常运营中。然而&#xff0c;当前企业在信息化建设过程中遇到了一些困境与挑战。 1、历史数据积存。 过去企业的业务系统往往是在较长时间内建设的&#xff0c;很…

[开源]基于流程编排的自动化测试工具,插件驱动,测试无限可能

一、开源项目简介 流程编排&#xff0c;插件驱动&#xff0c;测试无限可能 一款基于流程编排的自动化测试工具 二、开源协议 使用Apache-2.0开源协议 三、界面展示 四、功能概述 在软件开发旅程中&#xff0c;测试流程的管理和执行常常是复杂且耗时的挑战。传统测试工具主…

iMovie for Mac:专业级的视频剪辑体验!

如果你是一位视频爱好者&#xff0c;那么你一定不能错过iMovie for Mac这款专业视频剪辑工具。它不仅拥有简单易用的界面&#xff0c;而且功能强大&#xff0c;可以让你轻松完成复杂的视频剪辑任务。 一、界面友好&#xff0c;上手容易 iMovie for Mac的界面设计简洁明了&…

基于轩禹秒杀ctfshow-RSA

目录 babyrsa easyrsa1 easyrsa2 easyrsa3 easyrsa4 easyrsa5 easyrsa6 RSA算法是一种非对称加密算法&#xff0c;与对称加密算法不同的是&#xff0c;RSA算法有两个不同的密钥&#xff0c;一个是公钥&#xff0c;一个是私钥。 CTF中常见的有&#xff1a;广播攻击、共…

前端 | 前端工程化

文章目录 前端工程化1. Vue项目创建2. Vue项目目录结构3. vue项目开发 前端工程化 1. Vue项目创建 安装插件vue-cli npm install -g vue/cli命令行创建 Vue 项目 vue create vue-project(项目名称)图形化界面创建 VUe 项目 vue ui图形化界面如下&#xff1a; 选择功能&…

【excel技巧】如何在Excel表格中添加选项按钮?

不知道大家是否会9遇到需要勾中选项的情况&#xff0c;我们可以在电子表格中制作出可以勾选、选中的选项按钮&#xff0c;今天我们一起学习一下设置方法。 首先&#xff0c;我们需要先在excel工具栏中添加一个功能模块&#xff1a;开发工具 依次点击excel中的文件 – 选项 –…

使用IDEA自带功能将WSDL转java

好像IDEA2018版本之后不再支持webservice转java&#xff0c;可以下载2018.3.6版本的IDEA&#xff08;直接IDEA官网下载即可&#xff09;&#xff0c;然后打开一个项目&#xff0c;在根目录处单击右键 选择Generate Java Code From Wsdl...&#xff0c; 选择OK&#xff0c;即可…

Tomcat项目启动报错

java.io.IOException: java.lang.ClassCastException: Cannot cast org.springframework.web.SpringServletContainerInitializer to javax.servlet.ServletContainerInitializer解决办法&#xff1a;可能Tomcat版本不对&#xff0c;使用7.0.90版本启动报错&#xff0c;使用8.0…