微信小程序使用ECharts----折线图

这篇具有很好参考价值的文章主要介绍了微信小程序使用ECharts----折线图。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序的开发者在很多情况下需要使用图形化数据展示,现有的 ECharts 这样的可视化工具由于一些原因并不能在微信小程序中使用。

因此,ECharts 团队和微信小程序官方团队合作,提供了 ECharts 的微信小程序版本。开发者可以通过熟悉的 ECharts 配置方式,快速开发图表,满足各种可视化需求。

体验示例小程序

在微信中扫描下面的二维码即可体验 ECharts Demo:

微信小程序 折线图,微信小程序,小程序,微信小程序,echarts,前端

GitHub 地址  GitHub - ecomfe/echarts-for-weixin: Apache ECharts 的微信小程序版本

 ECharts小程序版在微信小程序中是以组件的方式使用,对于小程序开发者来说非常容易

一、首先下载

下载项目到本地,并使用微信开发者工具打开,如下图

项目下载地址 GitHub 地址  GitHub - ecomfe/echarts-for-weixin: Apache ECharts 的微信小程序版本

可以自行从 ECharts 项目中下载最新发布版

 微信小程序 折线图,微信小程序,小程序,微信小程序,echarts,前端

 pages文件夹是demo中每个图形的使用案例,

ec-canvas文件夹就是我们即将要引用的组件了,将ec-canvas文件夹复制到自己的项目中就可以愉快的在自己的项目中使用数据可视化开发了

 二、在自己项目中使用ECharts

 1、首先把整个ec-canvas文件夹复制到自己项目中,位置可以自己根据自己使用情况定,因为我的项目是全局使用的所以就放到了项目根目录

 2、引用组件

json:

在你要是用组件的页面json文件中引入组件

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  },
  "navigationStyle": "custom"
}

js:

在js中引入(上一步引入的只是画布的功能,这里引入的js才是处理数据的)

import * as echarts from '../../ec-canvas/echarts';

wxml:

页面中的引用方式和其他组件相同

<view style="width: 100%; height: 400rpx;">
        <ec-canvas style="width: 100%; height: 200px;" id="mychart_bloodPressure" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
</view>

 二、开始绘制自己的图形

到这里我们就可以使用ECharts在小程序中绘制自己想要的数据图形了,我这里只用到了折线图,但是是两种展示方式

1、有x轴无y轴,数据匹配方式为value

先说一下数据匹配方式,官方称之为y轴类型,共分了四种:

坐标轴类型。

可选:

  • 'value' 数值轴,适用于连续数据。

  • 'category' 类目轴,适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取,或者可通过 yAxis.data 设置类目数据。

  • 'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。

  • 'log' 对数轴。适用于对数数据。

wxml文件和json文件按上述方式引入即可,重点说一下js文件数据的处理

因为数据要从后台获取考虑到可能后台数据传回来慢所以要使用延迟加载,在js的data中加入

ec: {
      lazyLoad: true // 延迟加载
    },

获取元素并赋值的方法

init_echarts: function () {
      //小程序的仿dom操作获取元素
      this.echartsComponnet = this.selectComponent('#mychart');
      this.echartsComponnet.init((canvas, width, height) => {
        // 初始化图表
        const Chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        //处理数据我放到了一个单独的js
        Chart.setOption(getOption(this.data.pointsA, this.data.dates));
        // 注意这里一定要返回 chart 实例,否则会影响事件处理等
        return Chart;
      });

    },

 因为我把数据处理都拿到了单独的js所以要新建一个js文件,并在原js中引入

import {getOption} from '../../eChartsData'

新建js

function getOption (points, dates) {
  dates = ["8.14","8.15","8.16","8.17","8.18","8.19","8.20"]
  points = [356,456,567,234,345,456,567]
  // 指定图表的配置项和数据
  var option = {
  //直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴。
  //用他可以配置图形在父元素中的位置
    grid:{
      top:30,
      left: 14,
      width: "82%",
      height: "45%"
    },
    //x轴
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: dates,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      // show: false
    },
    //y轴
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      },
      show: false
    },
    //数据
    series: [{
      connectNulls: true,
      name: 'A',
      type: 'line',
      // smooth: true,
      data: points,
      lineStyle: {
        normal: {
          color: '#17998C',
        }
      },
      areaStyle: {
        color: '#A2F5EC',
        opacity: 0.5
      },
      label: {
        show: true,
        position:'top',
		distance:-28,
        textStyle: {
          fontSize: 12,
          color: "#17998C",
        },
        //因为提示数值官方只能设置同一位置,而我想要一上一下,用到了格式化,其实很好理解就是换行展示
        formatter:function(value){
          let valueType
          if(value.dataIndex%2!=0){
            valueType="shuang";
            return  value.data ;
          }else{
            valueType="dan";
            return value.data + '\n\n\n';
          }
        },
      }
    }]
  }
  return option;
}


module.exports = {
  getOption: getOption
};

数据配置完,页面中就会出现你想要的数据图形

微信小程序 折线图,微信小程序,小程序,微信小程序,echarts,前端

 以上的数据配置项都可以在ECharts的官方文档中找到,我就不一一列举了,详细信息大家可以去官方文档中了解

2、有x轴有y轴,数据匹配方式为类目

这种展示方式和上述方式一样,只是配置向有差别,使用方式就不再赘述了,只列举一下配置项,大家可以做个参考

function getOption1 (name, yAxis, data) {

  // 指定图表的配置项和数据
  var option = {
    grid: {
      top: 40,
      left: 60
    },
    // tooltip: {
    //   show: true,
    //   trigger: 'axis'
    // },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisLabel:{
        rotate:-40 
      }
      // show: false
    },
    yAxis: {
      name: name,
      // x: 'center',
      type: 'category',//这里是关键
      nameTextStyle: {
        fontSize: 10,
        overflow: 'breakAll'
      },
      data: yAxis,//该项可以配置也可以不配置,不配置会默认在data中选取
      axisLabel:{
        rotate:-40 ,
    },
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      },
      show: true
    },
    series: [{
      name: 'A',
      type: 'line',
      smooth: true,
      data: data,
      lineStyle: {
        normal: {
          color: '#17998C',
        }
      },
      areaStyle: {
        color: '#A2F5EC',
        opacity: 0.5
      },
      label: {
        show: false,
        position: 'top',
        textStyle: {
          fontSize: 16,
          color: "#17998C",
        }
      }
    }]
  }
  return option;
}

主要属性:

yAxis.type

yAxis.data: 该项可以配置也可以不配置,不配置会默认在series.data中选取,本人倾向于自己配置

微信小程序 折线图,微信小程序,小程序,微信小程序,echarts,前端

 注:

如果你在配置数据是配置的是["1","2","-","1","2","1","2"]这样,就会和上图一样出现两个点之间没有连线

重要提示
全部图表的echarts.js非常大,如果你的项目较大可能会导致项目上传失败,

在你把整个js导入项目时开发者工具也会有如下提示:
[JS 文件编译错误] 以下文件体积超过 500KB,已跳过压缩以及 ES6 转 ES5 的处理。ec-canvas/echarts.js

处理方法:

按你项目所需的图表定制化下载, 定制地址ECharts 在线构建

微信小程序 折线图,微信小程序,小程序,微信小程序,echarts,前端

勾选你所需要的图表,最下方点下载

微信小程序 折线图,微信小程序,小程序,微信小程序,echarts,前端

下载完成后文章来源地址https://www.toymoban.com/news/detail-852528.html

把新定制的echarts.min.js替换掉原来的echarts.js

到了这里,关于微信小程序使用ECharts----折线图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp 微信小程序使用echarts

    本文目的:通过分包的方式,尽可能在微信小程序中使用最新的echarts。 当然你也可以直接使用现成的uchart或者市场里别人封好的echarts. 准备工作 下载echarts-for-weixin源码。 复制 ec-canvas 文件夹以及下属文件,在uniapp项目中与pages同级的地方创建 wxcomponents 文件夹,将复制的文件

    2024年02月04日
    浏览(56)
  • UNIAPP微信小程序使用Echarts

    ​ 最近要在uniapp做的小程序中使用echarts,网上搜了很多教程都很麻烦,这里提供一种简便快捷CV方案。 ​ 先说下图表选型的问题,如果你只用于微信小程序,可以使用本方案,Echarts丰富多样的图表和广大的开源图库都已使用。如果要考虑兼容性问题,比如兼容支付宝小程序

    2024年02月09日
    浏览(50)
  • 微信小程序使用echarts动态加载数据

    官网地址 GitHub - ecomfe/echarts-for-weixin: Apache ECharts 的微信小程序版本  将官网代码下载到本地,并进行解压,可以运行一下查看示例代码 将图示中的文件夹复制粘贴到小程序相应位置,建议放在components文件夹中  json文件,路径要与文件的位置保持一致  wxml文件,给ec-canvas一

    2024年04月12日
    浏览(41)
  • 微信小程序中简单使用echarts图表

       1.复制组件至page同级目录下(ec-canvas) 2. 在js中引入 3.在wxml写个标签 样式我是这么设置的(在wcss),差不多大写微信里尺寸可以 4.编写数据咯(数据肯定是从接口传的,我就不写死了 直接方法也贴出来) 先创建对象 初始化图表 定义option 定义方法掉接口数据定义optio

    2024年02月09日
    浏览(55)
  • uniapp微信小程序中使用echarts

    可以先随便建个文件夹,然后 npm init。运行下面的命令行,下载依赖 找到node_modulesmpvue-echarts下的文件,保留src文件夹,其他删除,复制mpvue-echarts文件夹到项目的components中 1.2、获取定制echarts的js文件 在https://echarts.apache.org/zh/builder.html定制echarts的js文件,然后下载,放到c

    2024年02月15日
    浏览(56)
  • 微信小程序——Echarts使用(保姆式教程)

    ✅作者简介:2022年 博客新星 第八 。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏:微信小程序学习分享 ✨特色专栏:国学周更-心性养成之路 🥭本文内容:微信小程序——

    2024年02月09日
    浏览(45)
  • 在原生微信小程序中使用 echarts

    1.创建一个微信小程序项目或打开已有的微信小程序项目,下述示例采用全新创建的方式,在电脑文件中创建一个空的文件夹,命名自定义即可 2.将下载好的 echarts 文件放入创建好的空文件中 3.使用微信开发者工具打开创建的文件夹 4.查看创建结果 1.需要找到 app.wxss 文件中,

    2024年02月05日
    浏览(45)
  • 微信小程序使用echarts不显示的问题

    前几天在微信小程序中用echarts发现不显示,主要有一下几个可能

    2024年02月12日
    浏览(34)
  • 在原生微信小程序中使用echarts

    现在越来越多的项目都在使用可视化的功能,那么使用 echarts 实现是一种不错的选择,本文将带给大家如何在原生微信小程序中使用 echarts,保姆级教程 文件地址:https://github.com/ecomfe/echarts-for-weixin/tree/master 创建一个微信小程序项目或打开已有的微信小程序项目,下述示例采

    2024年02月09日
    浏览(50)
  • 在uniapp,微信小程序中使用echarts

    一、使用npm或yarn安装mpvue-echars 二、可在echarts官网在线定制,下载echarts.min.js文件 ECharts 在线构建 三、在node_modules中找到mpvue-echarts,将src中的文件复制出来,作为组件,将第二步下载的echarts.min.js放进去  四、改写echarts.vue文件 这里我直接把我项目中的代码放上来了 五、引入

    2024年02月09日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包