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

news/2024/7/20 1:29:13 标签: 小程序, vue.js

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

相关文章

Js里面无法调用contains

问题描述&#xff1a; 标准的字符串类型&#xff0c;检查发现是的&#xff0c;不是undefined或者其他类型无法调用contains&#xff0c;报错contains方法不存在火狐浏览器 原因 火狐不支持contains方法&#xff0c;而chrome支持 为了兼容性&#xff0c;用标准的indexOf() &…

记录某SRC邀请处逻辑越权到组织管理员漏洞

本文由掌控安全学院 - xi4007 投稿 1.在挖掘某src漏洞时候信息收集的时候收集到某小程序 该小程序的主要功能是帮助购买此服务的公司管理项目和销售员工的 这里我们准备两个测试账号(A和B) 2.我们登录进去该小程序&#xff0c;按照正常步骤流程注册个公司账户对该小程序进行试…

模拟量采集无线WiFi网络接口TCP Server, UDP, MQTT

● 4-20mA信号转换成标准Modbus TCP协议 ● 支持TCP Server, UDP, MQTT等通讯协议 ● 内置网页功能&#xff0c;可以通过网页查询数据 ● 宽电源供电范围&#xff1a;8 ~ 32VDC ● 可靠性高&#xff0c;编程方便&#xff0c;易于应用 ● 标准DIN35导轨安装&#xff0c;方便…

香港服务器在大陆连不上怎么回事?

众所周知&#xff0c;香港服务器与中国内地的网络连通性是比较好的&#xff0c;不仅是机房地理距离的加持&#xff0c;还有就是利用CN2 GIABGP高速线路&#xff0c;参考恒创科技香港服务器访问内地网站&#xff0c;无需绕国际线路转换再到大陆&#xff0c;访问速度会比较快。但…

TensorFlow入门(十五、数据读取机制(2))

使用Dataset创建和读取数据集,作为TensorFlow模型创建输入管道的新方式,使用性能比使用feed_dict或队列式管道的性能高很多,使用也更加简洁容易。也是google强烈推荐的数据读取方式,对于TensorFlow而言,十分重要。 Dataset是什么? Dataset的定义 : 它是一个含有相同类型元素且…

vue3 setup中defineEmits与defineProps的使用案例

目录 一、defineEmits的使用 二、 defineProps的使用 总结 一、defineEmits的使用 使用说明 1、在子组件中调用defineEmits并定义要发射给父组件的方法 const emits defineEmits([foldChange]) 2、使用defineEmits会返回一个方法&#xff0c;使用一个变量emits(变量名随意…

电子沙盘数字沙盘大数据人工智能开发教程第16课

电子沙盘数字沙盘大数据可视化GIS系统开发教程第16课&#xff1a;新增加属性在MTGIS3d控件 public bool ShowFLGrid;//是否显 示方里网格。 public bool Atmosphere;//是否显示大气圈。&#xff08;因为WPF不支持shader功能&#xff0c;所以效果嘛。。。&#xff09; 在SDK中为…

pymoo包NSGA2算法实现多目标遗传算法调参详细说明

pymoo包NSGA2算法实现多目标遗传算法调参详细说明 1.定义待求解问题1.0定义问题的参数说明1.0.0 求解问题必须设置在def _evaluate(self, x, out, *args, **kwargs)函数中1.0.1 问题必须用 out["F"] [f1, f2] 包裹起来1.0.2 约束条件也必须用 out["G"] […