微信小程序中使用echarts方法

小程序中使用echarts

echarts是一个基于JS的数据可视化图标库,它提供了直观,生动,可交互,可个性定制的数据可视化图表。一般在vue中会使用到,并且官网也详细的说明了如何在vue中使用,但是今天我想来探讨的是,如何在微信小程序中使用echarts

1. ec-canvas的github仓库

官网中介绍到:echarts-for-weixin 项目提供了一个小程序组件,用这种方式可以方便地使用 ECharts。

可以点击上方链接,到官网指定的地址下载图中圈中的项目ec-canvas

2. 下载 ec-canvas项目

然后就是把这个项目下载自己的电脑上,但是这里有一个非常重要的一个点,决定你的图表是否能够出来,在我下面这张图中圈的位置,一定要注意自己下的是哪个版本,因为echarts.js很大,一般使用的话,都直接在官网定制,小程序中不会放很多echarts图表,否则整个项目太大了,会跑不起来的。

3. 去echarts官网定制

 3.1  定制自己需要的图形:接下来就是找到官网,去定制自己需要的图表(官网地址不用我再说了吧,百度也能找到的)。

3.2 点击下载,进入定制页面 :往最下面翻,方法三:在线定制

在这个页面选择你需要的东西,注意!注意!注意!这里的选择版本必须和上面下载的ec-canvas中的echarts.js的版本对应必须!必须!必须!本人当初就是吃了这个亏,嘤嘤嘤~,选择完成后,翻到最下面点击下载按钮

3.3 然后你就会再开一个窗口下载一个文件,这时候就等着就好了。等到OK了,说明下载好了

3.4 找到你下载的文件:echarts.min.js

准备工作都做好了!!!接下来的都是重点

4. 下载替换

接下来就开始往你的小程序里面植入了。你可以自己新建一个components,把echarts这个目录放进去,原目录中的echarts.js删了不要,太大了,换成上一步下载的echarts.min.js,还有一点注意的就是ec-canvas.js的import引入的是原来的echarts.js文件,你需要自己改成刚才下载的文件

5. 引入使用

然后在你需要引入echarts的文件中开始操作,,在js文件中引入此文件(自己找此文件位置并引入)

 import * as echarts from '../../components/echarts/echarts.min'
 function bar(canvas, width, height, dpr) {
    const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        // devicePixelRatio: dpr
    });
    canvas.setChart(chart);
 let option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  };
  chart.setOption(option);
  return chart;
}

在date里写: 

data: {
    ec: {
      onInit: bar
    },
  },

所有的操作都在option中,需要配置其他属性的话,可查看配置项手册或者打开示例配置

JSON文件引入的是目录中的ec-canvas.js

在这里插入图片描述

 WXML文件:这里的ec是组件对象,对应着js文件里data的ec

<view class="ec-box">
    <ec-canvas canvas-id="echart-bar" ec="{{ec}}"></ec-canvas>
</view>

wxss文件:(给echarts的容器设置宽高)

ec1-box {
  width: 100%;
  height: 406rpx;
}

这样echarts的引入和使用就成功了。

echarts的option配置知识点归纳整理(还在更新):

  • 通用:
    1、grid: {
                left: "0", //距离容器左边的距离
                right: "0",  //距离容器右边的距离
                bottom: "0",  //距离容器下边的距离
                top: "33",  //距离容器上边的距离
                containLabel: true //是否显示坐标轴
            },
    2、xAxis: [{
                type: 'category',  // 坐标轴类型
                // prettier-ignore
                axisLabel: {  // 设置X轴坐标轴名称字体样式
                    textStyle: {
                        fontSize: "10",
                        fontWeight: '400',
                        color: '#999999',
                        fontFamily: 'PingFangSC-Regular, PingFang SC'
                    },
                },
                axisTick: {
                    show: false  // 是否显示X轴坐标轴刻度
                },
                axisLine: {
                    show: false  // 是否显示X轴坐标轴线
                },
                data: ['07/08', '07/09', '07/10', '今天']  // X轴字段数据
            }],   
    3、yAxis: [{
                type: 'value',   // 坐标轴类型
                axisLabel: {   // 设置Y轴坐标轴名称字体样式
                    textStyle: {
                        fontSize: "10",
                        fontWeight: '400',
                        color: '#999999',
                        fontFamily: 'PingFangSC-Regular, PingFang SC'
                    },
                },
                name: '元',  // 设置Y轴坐标轴单位
                nameTextStyle: { //  单位样式
                    color: "#999999", //  字体颜色
                    fontSize: 10, //  字体大小
                    padding: [0, 26, 0, 0], //  内填充
                    fontFamily: 'PingFangSC-Regular, PingFang SC',  // 字体
                    fontWeight: 400, 
                }
            }], 
    4、tooltip: { // 提示框组件
                show: true,
                confine: false, //是否将 tooltip 框限制在图表的区域内
                backgroundColor: 'rgba(0,0,0,0.65)', //提示框浮层背景色
                trigger: 'axis',
                dashOffset: 10,
                padding: 6, //上右下左内边距
                textStyle: { //提示框浮层的文本样式
                    color: '#fff',
                    fontSize: 10,
                    lineHeight: 10,
                },
                axisPointer: { //坐标轴指示器配置项
                    type: 'line', //直线指示器
                    z: 1,
                    lineStyle: {
                        type: 'dashed',
                        color: '#979797',
                        shadowOffsetY: -7,
                        shadowColor: '#979797',
                    }
                },
            }, 
    5、 legend: {  // 图例组件
                orient: 'horizontal', //  布局朝向(横向/(纵向:vertical))
                right: 0, // legend位置调整
                icon: "circle", // legend标记样式
                itemHeight: 8, // legend标记样式高度
                itemWidth: 8, // legend标记样式宽度
                itemGap: 12, // legend标记的间距
                textStyle: {  // 图例文本样式
                    fontSize: 10,
                    fontFamily: 'PingFangSC-Regular, PingFang SC',
                    fontWeight: 400,
                    color: '#666666',
                    padding: [0, 0, 0, 6] //文字与图形之间的左右间距
                },
                data: ['收入', '支出']  //图例数据数组
            },
    
  • 柱形图:
    1、series: [{  // 双柱图数据
                    name: '收入',
                    type: 'bar',
                    barWidth: '10', // 柱状图宽度
                    barGap: '60%',
                    label: {
                        // 设置显示label
                        show: true,
                        // 设置label的位置
                        position: 'top',
                        // 设置label的文字颜色
                        color: '#999999',
                        fontFamily: 'PingFangSC-Regular, PingFang SC',
                        fontWeight: 500,
                        fontSize: '10',
                        // 格式化label文字
                        formatter: function (data) {
                            return Math.round(data.value).toFixed(2)
                        },
                    },
                    data: [
                        25.6, 76.7, 135.6, 162.2,
                    ],
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ // 设置柱状图渐变色
                            offset: 0,
                            color: "#FF991C" // 0% 处的颜色
                        }, {
                            offset: 0.6,
                            color: "#ffb720" // 60% 处的颜色
                        }, {
                            offset: 1,
                            color: "#FFCD24 " // 100% 处的颜色
                        }], false),
                        barBorderRadius: [3, 3, 0, 0], // 柱形图圆角
                    },
                },
                {
                    name: '支出',
                    type: 'bar',
                    barWidth: '10', // 柱状图宽度
                    label: {
                        // 设置显示label
                        show: true,
                        // 设置label的位置
                        position: 'top',
                        // 设置label的文字颜色
                        color: '#999999',
                        fontFamily: 'PingFangSC-Regular, PingFang SC',
                        fontWeight: 500,
                        fontSize: '10',
                        // 格式化label文字
                        formatter: function (data) {
                            return Math.round(data.value).toFixed(2)
                        },
                    },
                    data: [
                        70.7, 175.6, 182.2, 48.7
                    ],
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ // 设置柱状图渐变色
                            offset: 0,
                            color: "#4186F5" // 0% 处的颜色
                        }, {
                            offset: 0.6,
                            color: "#73affa" // 60% 处的颜色
                        }, {
                            offset: 1,
                            color: "#9CD2FF  " // 100% 处的颜色
                        }], false),
                        barBorderRadius: [3, 3, 0, 0], // 柱形图圆角
                    },
                }
            ]
    
  • 折线图:
    1、  series: [{  // 折线图数据
                    name: '完成订单',
                    type: 'line',
                    stack: 'Total',
                    symbol: 'circle', // 折线图折点样式(实心)
                    symbolSize: 4, // 折线图折点的大小样式
                    lineStyle: {
                        color: 'pink' // 设置折线颜色
                    },
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '取消订单',
                    type: 'line',
                    symbol: 'circle', // 折线图折点样式(实心)
                    symbolSize: 4, // 折线图折点的大小样式
                    stack: 'Total',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
            ]
        };
    

    小结

    以上就是小程序使用echarts步骤知识点了~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/51898.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【解析excel】利用easyexcel解析excel

【解析excel】利用easyexcel解析excel POM监听类工具类测试类部分测试结果备注其他 EasyExcel Java解析、生成Excel比较有名的框架有Apache poi、jxl。但他们都存在一个严重的问题就是非常的耗内存&#xff0c;poi有一套SAX模式的API可以一定程度的解决一些内存溢出的问题&…

iOS开发-自定义TabbarController与Tabbar按钮Badge角标

iOS开发-自定义Tabbar按钮Badge角标 Tabbar是放在APP底部的控件。UITabbarController是一个非常常见的一种展示模式了。比如微信、QQ都是使用tabbar来进行功能分类的管理。 一、实现自定义Tabbar 我这里Tabbar继承于系统的UITabBar&#xff0c;定义背景图、线条的颜色、tab…

AI编程常用工具 Jupyter Notebook

点击上方蓝色字体&#xff0c;选择“设为星标” 回复”云原生“获取基础架构实践 深度学习编程常用工具 我们先来看 4 个常用的编程工具&#xff1a;Sublime Text、Vim、Jupyter。虽然我介绍的是 Jupyter&#xff0c;但并不是要求你必须使用它&#xff0c;你也可以根据自己的喜…

VS Code环境配置问题

VS Code 环境配置问题 文章目录 VS Code 环境配置问题配置 C问题解决不乱码只显示结果避免闪退&#xff0c;中文乱码 配置 Java下载 JDKJDK 环境配置安装插件 配置 C 跟着官网教程&#xff08;英文版&#xff09;和其他博客配置了一遍&#xff0c;却遇到了很多小问题&#xff…

应用无线鼠标中的2.4GHz无线收发芯片

无线键盘和无线鼠标作为现代办公环境中常见的工具&#xff0c;为我们的工作带来了便利。无线键盘和无线鼠标的工作原理都是基于无线技术实现的&#xff0c;其中常见的是2.4GHz无线技术。让我们一起来详细了解一下它们的工作原理。 无线鼠标的原理非常简单,鼠标部分工作与传统鼠…

Spring中IOC容器常用的接口和具体的实现类

在Spring框架没有出现之前&#xff0c;在Java语言中&#xff0c;程序员们创建对象一般都是通过关键字new来完成&#xff0c;那时流行一句话“万物即可new&#xff0c;包括女朋友”。但是这种创建对象的方式维护成本很高&#xff0c;而且对于类之间的相互关联关系很不友好。鉴于…

【Tomcat---1】IDEA控制台tomcat日志输出乱码解决

一、修改IDEA的文件编码配置为UTF-8 二、修改IDEA的vmoptions文件&#xff0c;添加-Dfile.encodingUTF-8 到Tomcat目录/conf文件夹修改logging.properties 重启idea即可。采用统一的编码

解决在云服务器开放端口号以后telnet还是无法连接的问题

这里用阿里云服务器举例&#xff0c;在安全组开放了对应的TCP端口以后。使用windows的cmd下的telnet命令&#xff0c;还是无法正常连接。 telnet IP地址 端口号解决方法1&#xff1a; 在轻量服务器控制台的防火墙规则中添加放行端口。 阿里云-管理防火墙 如图&#xff0c;开放…

CAN转ETHERCAT网关将CAN 总线和 ETHERCAT 网络连接方法

由于好多现场会出现将CAN总线的设备接到EtherCAT网络中&#xff0c;由于协议的不相同&#xff0c;不能直接进行连接&#xff0c;现需一种能同时兼容CAN 总线和ETHERCAT网络的一种设备&#xff0c;由此捷米JM-ECT-CAN 是自主研发的一款 ETHERCAT 从站功能的通讯网关。该产品主要…

【目标检测论文解读复现NO.33】改进YOLOv5的新能源电池集流盘缺陷检测方法

前言 此前出了目标改进算法专栏&#xff0c;但是对于应用于什么场景&#xff0c;需要什么改进方法对应与自己的应用场景有效果&#xff0c;并且多少改进点能发什么水平的文章&#xff0c;为解决大家的困惑&#xff0c;此系列文章旨在给大家解读最新目标检测算法论文&#xff0c…

vuejs源码阅读之优化器

前面讲过vuejs中解析器是把html模版解析成AST&#xff0c;而优化器的作用是在AST中找到静态子树并打上标记。 静态子树是指的那些在AST中永远不会发生变化的节点。 例如&#xff0c;一个纯文本节点就是静态子树&#xff0c;而带变量的文本节点就不是静态子树&#xff0c;因为…

TCP网络通信编程之网络上传文件

【图片】 【思路解析】 【客户端代码】 import java.io.*; import java.net.InetAddress; import java.net.Socket; import java.net.UnknownHostException;/*** ProjectName: Study* FileName: TCPFileUploadClient* author:HWJ* Data: 2023/7/29 18:44*/ public class TCPFil…

如何快速模拟一个后端 API

第一步&#xff1a;创建一个文件夹&#xff0c;用来存储你的数据 数据&#xff1a; {"todos": [{ "id": 1, "text": "学习html44", "done": false },{ "id": 2, "text": "学习css", "…

【QT】Day 2

1> 继续完善登录框&#xff0c;当登录成功时&#xff0c;关闭登录界面&#xff0c;跳转到新的界面中 second.h #ifndef SECOND_H #define SECOND_H#include <QWidget>namespace Ui { class second; }class second : public QWidget {Q_OBJECTpublic:explicit second…

Abaqus 导出单元刚度矩阵和全局刚度矩阵

Abaqus 导出单元刚度矩阵和全局刚度矩阵 首次创建&#xff1a;2023.7.29 最后更新&#xff1a;2023.7.29 如有什么改进的地方&#xff0c;欢迎大家讨论&#xff01; 详细情况请查阅&#xff1a;Abaqus Analysis User’s Guide 一、Abaqus 导出单元刚度矩阵 1.生成单元刚度矩阵…

C语言手撕顺序表

目录 一、概念 1、静态顺序表&#xff1a;使用定长数组存储元素。 2、动态顺序表&#xff1a;使用动态开辟的数组存储 二、接口实现 1、对顺序表的初始化 2、对数据的销毁 3、对数据的打印 4、检查是否需要扩容 5、尾插 6、头插 7、尾删 8、头删 9、在pos位置插入x …

如何有效地使用ChatGPT写小说讲故事?

​构思故事情节&#xff0c;虽有趣但耗时&#xff0c;容易陷入写作瓶颈。ChatGPT可提供灵感&#xff0c;帮你解决写作难题。要写出引人入胜的故事&#xff0c;关键在于抓住八个要素——主题、人物、视角、背景、情节、语气、冲突和解决办法。 直接给出故事模板&#xff0c;你可…

WIZnet W5500-EVB-Pico 静态IP配置教程(二)

W5500是一款高性价比的 以太网芯片&#xff0c;其全球独一无二的全硬件TCP、IP协议栈专利技术&#xff0c;解决了嵌入式以太网的接入问题&#xff0c;简单易用&#xff0c;安全稳定&#xff0c;是物联网设备的首选解决方案。WIZnet提供完善的配套资料以及实时周到的技术支持服务…

TCP网络通信编程之字节流

目录 【TCP字节流编程】 // 网络编程中&#xff0c;一定是server端先运行 【案例1】 【思路分析】 【客户端代码】 【服务端代码】 【结果展示】 【案例2】 【题目描述】 【注意事项】 【服务端代码】 【客户端代码】 【代码结果】 【TCP字节流编程】 // 网络编程中&a…

《向量数据库指南》——Milvus Cloud2.2.12 易用性,可视化,自动化大幅提升

Milvus Cloud又迎版本升级,三大新特性全力加持,易用性再上新台阶! 近期,Milvus Cloud上线了 2.2.12 版本,此次更新不仅一次性增加了支持 Restful API、召回原始向量、json_contains 函数这三大特性,还优化了 standalone 模式下的 CPU 使用、查询链路等性能,用一句话总…