小程序中使用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.hqwc.cn/news/132241.html

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

相关文章

易点易动让企业实现低值易耗品的智能化采购管理

对于企业而言&#xff0c;低值易耗品的采购和管理是一项重要的任务。然而&#xff0c;传统的采购管理方式往往繁琐且耗时&#xff0c;容易导致资源浪费和效率低下。为了解决这些问题&#xff0c;我们推出了易点易动采购管理系统&#xff0c;它以其高效、便捷和智能化的特点&…

你知道期权和期货有什么关联和区别吗?解析一下!

随着金融市场的不断发展&#xff0c;期权和期货成为了两种常见的金融衍生品&#xff0c;它们都具有规避风险和发现价格的功能。很多入门不知道期权和期货哪个更好&#xff0c;下文科普你知道期权和期货有什么关联和区别吗&#xff1f;解析一下&#xff01;本文来源&#xff1a;…

wps演示时图片任意位置拖动

wps演示时图片任意位置拖动 1.wps11.1版本&#xff0c;其他版本的宏插件可以自己下载。2.先确认自己的wps版本是不是11.13.检查是否有图像工具4.检查文件格式和安全5.开发工具--图像6.选中图像控件&#xff0c;右击选择查看代码&#xff0c;将原有代码删除&#xff0c;将下边代…

前端-Vue-element-开发指南

电商管理系统框架 Vue-element 电商管理系统 电商管理系统框架1 介绍了解 项目实战的学习目标2 电商项目基本业务概述3 后台管理系统功能划分4 项目开发模式技术选型5 项目初始化可视化面板 配置 6 配置码云SSH7 托管云8 安装mysql9 API服务器Postman调试10 分析登陆和token原理…

基于FPGA的图像缩小算法实现,包括tb测试文件和MATLAB辅助验证

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 将FPGA的处理结果导出到matlab中显示图像效果&#xff1a; 2.算法运行软件版本 vivado2019.2 matlab2022a 3.部分核心程序 timescale 1ns / 1p…

unity发布微信小游戏,未找到 game.json报错原因

unity发布微信小游戏&#xff0c;未找到 game.json报错原因 同一个问题相隔一年遇到两次&#xff0c;两次原因都不一样&#xff0c;记录一下&#xff0c;以后不要再掉坑里 原因一&#xff1a;申请的appID是小程序不是小游戏 解决方法&#xff1a;需要在程序平台修改服务类目 如…

web 基础和http 协议

一、域名 域名的概念 IP地址不易记忆&#xff0c;域名方便记住&#xff0c;以便于用户进行搜索访问 早期使用Hosts文件解析域名地址 缺点&#xff1a; ① 主机名称重复 ② 主机维护困难 DNS&#xff08;Domain Name System&#xff09;域名系统 ① 分布式 将一个大的数…

2023 NewStarCTF --- wp

文章目录 前言Week1MiscCyberChefs Secret机密图片流量&#xff01;鲨鱼&#xff01;压缩包们空白格隐秘的眼睛 Web泄露的秘密Begin of UploadErrorFlaskBegin of HTTPBegin of PHPR!C!E!EasyLogin CryptobrainfuckCaesars SecertfenceVigenrebabyrsaSmall dbabyxorbabyencodin…

Nginx proxy_set_header参数设置

一、不设置 proxy_set_header Host 不设置 proxy_set_header Host 时&#xff0c;浏览器直接访问 nginx&#xff0c;获取到的 Host 是 proxy_pass 后面的值&#xff0c;即 $proxy_host 的值&#xff0c;参考Module ngx_http_proxy_module 1 2 3 4 5 6 7 8 # cat ngx_header.c…

U盘怎么设置为只读?U盘怎么只读加密?

当将U盘设置为只读模式时&#xff0c;将只能查看其中数据&#xff0c;无法对其中数据进行编辑、复制、删除等操作。那么&#xff0c;怎么将U盘设置成只读呢&#xff1f; U盘如何设置成只读&#xff1f; 有些U盘带有写保护开关&#xff0c;当打开时&#xff0c;U盘就会处于只读…

Arduino是如何实现打开串口时,程序复位的?

引言 使用过Arduino的都应该发现过&#xff0c;在打开Arduino IDE自带的COM串口助手的时候&#xff0c;Arduino开发板会复位。在打开其他串口助手的时候也会。这是为什么呢&#xff1f; 原因分析 首先看看arduino的原理图&#xff1a; 我们可以看看与复位引脚相关的部…

3.简单场景构建

在新建的项目中&#xff0c;默认存在 Main Camera 和 Directional Light两个对象。若是缺失&#xff0c;可通过选择菜单中的 Game Object->Camera 和 Geme Object->Light->Directional Light进行创建。 1.添加地形及底图 通过在Cesium面板中选择 Cesium World Terrai…