小程序使用echarts和echarts配置项总结(全网最简单详细)

文章目录

    • 概要
    • 小程序中使用echarts
      • 1. ec-canvas
      • 2. 下载项目
      • 3. 去echarts官网定制:
      • 4.点击下载
      • 5.引入使用
    • echarts的option配置知识点归纳整理(还在更新):
    • 小结

概要

小程序中使用echarts(简单详细)

小程序中使用echarts

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

1. ec-canvas

点击上方链接下载项目ec-canvas
在这里插入图片描述

2. 下载项目

下载这个项目文件夹到自己的电脑上
注意:需注意下载的是哪个版本,之后在echarts官网定制时选用的版本是和这个项目的版本一样的,否则可能出不来,小程序中不会放很多的echarts图表,否则整个项目太大了,会带不动,所以小程序一般是使用在线定制
在这里插入图片描述

3. 去echarts官网定制:

点击下载——下载——方法三中的在线定制
在这里插入图片描述
在定制页面中选择你需要使用的图表,注意!注意!注意!这里的选择版本,必须和上面下载的ec-canvas中的echarts.js的版本对应,必须!必须!必须!选择完成后,翻到最下面点击下载按钮。

4.点击下载

下载完成后,找到下载的文件:echarts.min.js ,然后在你小程序项目中新建一个components,把echarts这个目录放进去,原目录中的echarts.js删了不要,太大了,换成上一步下载的echarts.min.js,还有一点注意的就是ec-canvas.js的import引入的是原来的echarts.js文件,你需要自己改成刚才下载的文件
在这里插入图片描述

5.引入使用

然后就可以引入使用了,在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-ignoreaxisLabel: {  // 设置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: {// 设置显示labelshow: 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: {// 设置显示labelshow: 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步骤知识点,喜欢的话快点赞、收藏吧!谢谢!

  • 祝:平安顺遂

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

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

相关文章

解密城市酷选为何异军突起!打造消费新潮流的排队免单模式

一、城市酷选平台简介 在数字化浪潮席卷全球的今天&#xff0c;城市酷选作为一个前沿的消费平台&#xff0c;凭借其独特的排队免单模式&#xff0c;成功吸引了众多消费者和商家的目光。该平台不仅整合了线上线下的资源&#xff0c;更通过数字化手段&#xff0c;为消费者提供了…

云计算 | 期末梳理(中)

1. 经典虚拟机的特点 多态(Polymorphism):支持多种类型的OS。重用(Manifolding):虚拟机的镜像可以被反复复制和使用。复用(Multiplexing):虚拟机能够对物理资源时分复用。2. 系统接口 最基本的接口是微处理器指令集架构(ISA)。应用程序二进制接口(ABI)给程序提供使用硬件资源…

C3P0数据库连接池

目录 一&#xff1a;连接池介绍 1.1连接池解决的问题 2.常用的数据库连接池 二&#xff1a;c3p0介绍 2.1C3P0介绍&#xff1a; 2.2C3P0快速入门 1.常用参数说明 2.API介绍 3.使用步骤 1.导入jar包c3p0-0.9.1.2.jar 2.编写c3p0-config.xml配置文件&#xff0c;配置对…

Python 中字符串修饰符

1. 原始字符串 (Raw String) - r 或 R 使用 r 或 R 前缀&#xff0c;可以告诉 Python 字符串中的所有反斜杠都是普通字符&#xff0c;而不是转义字符。这在处理文件路径、正则表达式等情况下非常有用。 path rC:\new_folder\test.txt # 原始字符串2. 格式化字符串 (Formatt…

第十九条:要么为继承而设计并提供文档说明,要么就禁止继承

在前面一条中&#xff0c;我们已经知道了David写了A类被Tom拿去继承了&#xff0c;导致了A类的封装性遭到了破坏&#xff0c;那么有没有可能做点事情避免此事发生呢&#xff1f;第十九条孕育而生&#xff01;David在创建A类的时候写上文档说明&#xff0c;说Al类不允许任何类来…

node 实现导出, 在导出excel中包含图片(附件)

如果想查看 node mySql 实现数据的导入导出&#xff0c;以及导入批量插入的sql语句&#xff0c;连接如下 node mySql 实现数据的导入导出&#xff0c;以及导入批量插入的sql语句-CSDN博客https://blog.csdn.net/snows_l/article/details/139998373 一、效果如图&#xff1a; 二…

中介子方程三十四

XXFXXuXXWXXuXXdXXrXXαXXuXpXXKXηXiXXαXXiXηXKXXpXuXXαXXrXXdXXuXWXπXXWXeXyXeXbXπXpXXNXXqXeXXrXXαXXuXpXXKXηXiXXαXXiXηXKXXpXuXXαXXrXXeXqXXNXXpXπXbXeXyXeXWXXπXWXuXXdXXrXXαXXuXpXXKXηXiXXαXXiXηXKXXpXuXXαXXrXXdXXuXXWXXuXXFXXEXXyXXEXXrXXαXXuXpXXK…

paraview跨节点并行渲染

参考&#xff1a; https://cloud.tencent.com/developer/ask/sof/101483588 ParaView 支持使用其内置的网络拓扑来进行跨节点的并行渲染。以下是一个简单的步骤来设置和运行跨节点的并行渲染&#xff1a; 确保你的计算环境支持多节点计算&#xff0c;比如通过SSH、MPI或其他集…

阿里云扩容

官网&#xff1a;https://help.aliyun.com/zh/ecs/user-guide/extend-the-partitions-and-file-systems-of-disks-on-a-linux-instance?spm5176.ecs-console-storage_disk.help.dexternal.72d24df5QOL4ss 博客&#xff1a;http://t.csdnimg.cn/cUykr

Android APP通过View修改鼠标样式

app view上修改鼠标样式比较简单&#xff0c;使用如下方法修改为自定义图片&#xff1a; getWindow().getDecorView().setPointerIcon(PointerIcon.load(getResources(), R.drawable.pointer_spot_touch_icon)); 设置鼠标样式setPointerIcon的调用栈 frameworks/base/core/jav…

C语言:流量控制

前言 流量控制可以让发送端根据接收端的实际接受能力控制发送的数据量。它的具体操作是&#xff0c;接收端主机向发送端主机通知自己可以接收数据的大小&#xff0c;于是发送端会发送不会超过该大小的数据&#xff0c;该限制大小即为窗口大小&#xff0c;即窗口大小由接收端主…

【Linux详解】进程的状态 | 运行 阻塞 挂起 | 僵尸和孤儿状态

目录 操作系统中 运行状态 阻塞状态 进程状态转换 Linux系统中 查看进程状态 深度睡眠状态 T 暂停状态 Z 僵尸状态 孤儿状态 文章手稿 xmind: 引言 介绍系统中的进程状态及其管理方式。将通过结合操作系统原理和实际代码示例&#xff0c;详细说明进程的各种状态、转换…

鸿蒙开发Ability Kit(程序框架服务):【FA模型切换Stage模型指导】 app和deviceConfig的切换

app和deviceConfig的切换 为了便于开发者维护应用级别的属性配置&#xff0c;Stage模型将config.json中的app和deviceConfig标签提取到了app.json5中进行配置&#xff0c;并对部分标签名称进行了修改&#xff0c;具体差异见下表。 表1 配置文件app标签差异对比 配置项FA模型…

Excel中的“点选输入”——次级下拉列表创建

在Excel中&#xff0c;用“数据验证”功能可以设置下拉列表&#xff0c;二级下拉列表需要设置公式。 (笔记模板由python脚本于2024年06月16日 18:36:37创建&#xff0c;本篇笔记适合经常使用Excel处理数据的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;http…

基于 Spring AOP 实现安全检查

在现代应用程序中&#xff0c;安全性是一个至关重要的方面。通过对系统中的关键操作进行安全检查&#xff0c;可以有效防止未授权的访问和操作。Spring AOP&#xff08;面向切面编程&#xff09;提供了一种优雅的方式来实现安全检查&#xff0c;而无需修改业务逻辑代码。本文将…

后端之路第三站(Mybatis)——入门配置

一、Mybatis是啥&#xff1f; 就是一个用java来操控数据库的框架语言 之前学的datagrip或者navicat这些软件里我们操作数据库&#xff0c;原理是我们编写完的操作语句发送到服务器传送到数据库系统&#xff0c;然后数据库执行完之后再发送给服务器返回给datagrip或者navicat显…

【linux/shell案例实战】shell界面命令快捷键

快捷键及含义&#xff1a; Ctrl&#xff0b;u剪切光标之前的内容。Ctul&#xff0b;k剪切光标之后的内容。Ctrl&#xff0b;e让光标移动到命令最前&#xff0c;Ctrl&#xff0b;a让光标移动到命令最后Ctrl&#xff0b;y 粘贴刚才所删除的内容。Ctrl&#xff0b;d 删除光标所在…

GPT-5:AI的博士时代与我们的未来

目录 引言第一部分&#xff1a;GPT-5技术突破预测1. NLP技术的革新1.1 算法进步对理解力提升的影响1.2 技术突破推动行业发展 2. 行业推动力2.1 教育行业的变革2.2 医疗行业的创新2.3 法律行业的效率提升 第二部分&#xff1a;智能系统与人类的协作1. 辅助决策的角色1.1 决策支…

游戏AI的创造思路-技术基础-sigmoid函数详解

在前面的机器学习和深度学习的内容中&#xff0c;大量出现了sigmoid函数&#xff0c;所以本篇为大家介绍下sigmoid函数&#xff0c;希望对大家理解前面的算法和后面的Transformer有所帮助 目录 3.8. sigmoid函数 3.8.1. 定义 3.8.2. 性质 3.8.3. 应用 3.8.4. 缺点 3.8.5.…

Flutter实现页面间传参

带参跳转 步骤 在router中配置这个路由需要携带的参数,这里的参数是 arguments,注意要用花括号包裹参数名称 在相应组件中实现带参构造函数 在state类中可以直接使用${widget.arguments}来访问到传递的参数 在其他页面中使用Navigator.pushNamed()带参跳转