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

news2024/9/22 1:07:41

第一步:引入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.coloradmin.cn/o/1075897.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

# 解析Pikachu靶场:一个安全研究的练习场

引言 Pikachu靶场是一个非常流行的安全研究和渗透测试练习平台。这个环境包括多个安全漏洞&#xff0c;从基础的到高级的&#xff0c;供安全研究人员和渗透测试者进行实验和学习。在这篇博客中&#xff0c;我们将探讨Pikachu靶场的基本概念&#xff0c;功能&#xff0c;以及如…

vue3+vite+ts 组件中自动导入 ref 和 reactive

前言 在每个vue组件中&#xff0c;都去手动引入 ref 和 reactive 是非常繁琐的一件事&#xff0c;我们可以通过插件来完成自动导入 安装插件 npm i unplugin-auto-import -D 配置插件 在 vite.config.ts 中增加如下代码 import { defineConfig } from vite import vue fr…

初识操作系统以及Linux环境搭建

&#x1f4d9;作者简介&#xff1a; 清水加冰&#xff0c;目前大二在读&#xff0c;正在学习C/C、Python、操作系统、数据库等。 &#x1f4d8;相关专栏&#xff1a;C语言初阶、C语言进阶、C语言刷题训练营、数据结构刷题训练营、有感兴趣的可以看一看。 欢迎点赞 &#x1f44d…

大数据Splunk Enterprise 平台+cpolar 实现远程访问

文章目录 前言1. 搭建Splunk Enterprise2. windows 安装 cpolar3. 创建Splunk Enterprise公网访问地址4. 远程访问Splunk Enterprise服务5. 固定远程地址 前言 Splunk Enterprise是一个强大的机器数据管理平台&#xff0c;可帮助客户分析和搜索数据&#xff0c;以及可视化数据…

企架布道:中电金信应邀出席2023佛山敏捷之旅暨DevOps Meetup

近日&#xff0c;2023佛山敏捷之旅暨DevOps Meetup活动顺利举行&#xff0c;本次活动以助力大湾区金融和互联网企业敏捷DevOps实施和效能提升为主题&#xff0c;共设立 2个会场&#xff0c;16个话题分享&#xff0c;200余位金融、互联网企业相关从业人员齐聚一堂&#xff0c;共…

第二证券:市场情绪或逐步修复 十月行情值得期待

第二证券指出&#xff0c;周一A股商场探底回升、小幅轰动收拾&#xff0c;沪指全天底子出现先抑后扬的运转特征。其时上证综指与创业板指数的平均市盈率分别为12.46倍、33.94倍&#xff0c;处于近三年中位数以下水平&#xff0c;商场估值仍然处于较低区域&#xff0c;合适中长期…

excel单元格合并策略

excel单元格合并策略 证明112&#xff1f; 要证明112这个问题&#xff0c;首先我们要找到问题的关键。所谓问题的关键呢&#xff0c;就是关键的问题&#xff0c;那么如何找到问题的关键就是这个问题的关键。 比如说&#xff0c;你有一个苹果&#xff0c;我也有一个苹果&#x…

管理Linux的联网

1. RHEL9版本特点 在RHEL7版本中&#xff0c;同时支持network.service和NetworkManager.service&#xff08;简称NM&#xff09;。 在RHEL8上默认只能通过NM进行网络配置&#xff0c;包括动态ip和静态ip,若不开启NM&#xff0c;否则无法使用网络 RHEL8依然支持network.service&…

【工具软件】Nativefier——把网页打包成exe软件

官方文档 安装 npm install nativefier -g使用 在 nativefier 后加上需要转换的网站地址, 比如: nativefier "https://blog.csdn.net/IAIPython?typeblog"第一次打包需要下载 Eletron 框架, 很慢… 运行完毕, 会生成一个应用, 路径一般为C:\Users\用户名… 如图…

前后端分离项目-基于springboot+vue的图书馆管理系统的设计与实现(内含代码+文档+报告)

博主介绍&#xff1a;✌全网粉丝10W,前互联网大厂软件研发、集结硕博英豪成立工作室。专注于计算机相关专业毕业设计项目实战6年之久&#xff0c;选择我们就是选择放心、选择安心毕业✌ &#x1f345;由于篇幅限制&#xff0c;想要获取完整文章或者源码&#xff0c;或者代做&am…

Servlet开发步骤

标准Java Web工程结构 pom.xml中提供servlet依赖 1.创建java类&#xff0c;继承HttpServlet 2.重写service方法&#xff0c;处理请求&#xff0c;生成响应 3.配置web.xml&#xff0c;绑定访问地址 Servlet接收请求参数 request.getParameter() 接收单个参数 request.ge…

区块链游戏的开发框架

链游&#xff08;Blockchain Games&#xff09;是基于区块链技术构建的游戏。它们与传统游戏有一些显著不同之处&#xff0c;因此需要特定的开发框架和工具。以下是一些用于链游开发的开发框架及其特点&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专…

一站式 API 管理和测试工具:PostCat 轻松完成接口调测 | 开源日报 No.49

rubickCenter/rubick Stars: 5.0k License: MIT Rubick 是一个基于 electron 开源工具箱的项目&#xff0c;它允许用户自由集成丰富插件来创建最终桌面效率工具。该项目以 Dota 英雄中的 Rubick 为名&#xff0c;因为他可以使用其他英雄作为插件完成任务。以下是 Rubick 的主要…

ant-design-vue 实现表格表头纵排列

结果如图&#xff1a; 区域&#xff0c;成功率&#xff0c;清单率为表头&#xff0c;右侧为动态的数据 废话不多说直接上代码&#xff1a; 1.先声明表格&#xff0c;使用框架自带a-table&#xff0c;核心点就在data和columns上 <div style"margin-bottom: 60px;"…

OpenVPN客户端安装测试

文章目录 一 OpenVPN客户端安装二 OpenVPN客户端设置三 OpenVPN客户端测试 一 OpenVPN客户端安装 OpenVPN有很多客户端&#xff0c;本文采用windows系统的OpenVPN Connect 3.4.2 (64-bit) 客户端进行安装和测试。 下载 下载地址&#xff1a;https://www.filehorse.com/downloa…

【算法与数据结构】二叉树的三种遍历代码实现(下)—— 非递归方式实现(大量图解)

上篇&#xff1a;【算法与数据结构】二叉树的三种遍历代码实现&#xff08;上&#xff09;—— 用递归序知识点讲解_Hacynn的博客-CSDN博客https://blog.csdn.net/zzzzzhxxx/article/details/133609612?spm1001.2014.3001.5502 目录 前言 1、先序遍历 1.1、详细图解描述 …

品牌被低价侵权了怎么处理

各品牌在销售过程中&#xff0c;会不断拓展销售渠道&#xff0c;主要分为线上和线下两个类型&#xff0c;线下渠道的低价侵权相较于线上会难发现一些&#xff0c;线上低价可以通过实时监测的方式&#xff0c;发现低价链接&#xff0c;再针对链接中的不同侵权情况进行处理。 力维…

【算法练习Day16】找树左下角的值路径总和 从中序与后序遍历序列构造二叉树

​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;练题 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 文章目录 找树左下角的值路径总和从中…

PDF编辑和OCR文字识别工具ABBYY FineReader PDF

ABBYY FineReader PDF是一款专业的OCR文字识别和PDF编辑工具&#xff0c;可以帮助用户更好地处理和管理PDF文档。以下是ABBYY FineReader PDF的一些特点&#xff1a; 1. 文字识别精准&#xff1a;ABBYY FineReader PDF具有强大的OCR文字识别功能&#xff0c;可以将PDF中的文字…

大数据学习(2)Hadoop-分布式资源计算hive(1)

&&大数据学习&& &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 承认自己的无知&#xff0c;乃是开启智慧的大门 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4dd;支持一下博>主哦&#x…