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

news/2024/7/20 2:49:54 标签: 小程序, vue.js

第一步:引入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.niftyadmin.cn/n/5083179.html

相关文章

[Machine Learning][Part 5]监督学习——逻辑回归

之前文章中提到监督学习的应用可分为两类&#xff1a;线性回归和逻辑回归。和线性回归不同&#xff0c;逻辑回归输出只有0和1。对于一个逻辑回归任务&#xff0c;可以先使用线性回归来预测y。然而我们希望逻辑回归预测模型输出的是0和1&#xff0c;为了达到这个目的&#xff0c…

mysql sql语句遍历树结构

mysqlsql语句遍历树结构 MySQL SQL语句遍历树结构实现步骤 理解树结构和遍历算法 在开始之前&#xff0c;我们首先需要了解什么是树结构以及如何遍历树结构。树结构是一种常用的数据结构&#xff0c;由各个节点和节点之间的关系构成。树结构的一个重要应用是表示具有层级关系…

SettingsView/设置页 的实现

1. 创建设置视图 SettingsView.swift import SwiftUI/// 设置页面 struct SettingsView: View {/// 环境变量&#xff0c;呈现方式&#xff1a;显示或者关闭Environment(\.presentationMode) var presentationMode/// 默认网址let defaultURL URL(string: "https://www.…

用AIGC做私活真的太赚了...

说个小道消息&#xff0c;传统涨薪跳槽旺季即将结束&#xff0c;使用AIGC技术已然迎接私活的高潮期&#xff01;各行业对【AIGC】的需求在短时间内暴增。 估计圈子里的朋友都不会闲着&#xff0c;会趁着旺季赚一笔。 所以&#xff0c;近段时间知识星球很多粉丝朋友收到了很多…

c++视觉处理---Scharr滤波器

Scharr滤波器&#xff1a; cv::Scharr cv::Scharr 是OpenCV库中用于应用Scharr滤波器的函数。Scharr滤波器通常用于图像处理中的边缘检测和特征提取。这是 cv::Scharr 函数的基本用法&#xff1a; cv::Scharr(src, dst, ddepth, dx, dy, scale, delta, borderType);src: 输入…

测开岗学习资料

1.技术栈 测试技术栈 - 简书 2.自动化测试 自动化软件测试技术栈&#xff0c;掌握它&#xff0c;你离大厂不远了 3.测试&测开需具备哪些技术栈&#xff1f;看这篇就够了&#xff01;&#xff08;附学习资源&#xff01;&#xff09;_资源分享_牛客网 开发转测试&#…

三菱FX5U系列PLC更改运动轴脉冲输出方向控制点的具体方法和步骤详解

三菱FX5U系列PLC更改运动轴脉冲输出方向控制点的具体方法和步骤详解 本例中将轴1的脉冲方向控制点Y4更改为Y16 具体方法可参考以下步骤: 如下图所示,将原来Y4的接线拆下,重新接到Y16端子上(为了安全,建议断电后进行) 将网线一端插到PLC网口,一端连接到电脑上(电脑上无网…

四.镜头知识之放大倍率

四.镜头知识之放大倍率 文章目录 四.镜头知识之放大倍率4.0 前言4.1 镜头的光学放大倍率的计算方法4.2 显示器的电子放大倍率4.2.1 智能硬件产品的显示放大倍率计算案例 4.3 系统放大倍率4.4 智能硬件产品的系统放大倍率计算案例4.4 智能硬件产品的系统放大倍率计算案例 4.0 前…