技术标签: 微信小程序 echarts uni相关 javascript
在小程序里画图表,uniapp 不想引入 u-charts怎么办,个人还是喜欢用echarts
先看成品图
原生小程序使用的是echarts-for-weixin,具体地址如下:
https://github.com/ecomfe/echarts-for-weixin
想在uni项目开发的小程序中使用Echarts太艰辛了,我选择使用mpvue-echarts,踩了一路坑!!!
网上写这个的还不少,常见的两种方法:
- .执行命令(npm install echarts mpvue-echarts),把 node_modules 下生成mpvue-echarts的src文件放到components下,成为自己的组件 (类似文章传送门)
- .mpvue-echarts的官方介绍:https://github.com/F-loat/mpvue-echarts
很巧,我是一个也没用上,各种报错
- 编译错误:Module build failed (from ./node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js)
- this.echarts.setCanvasCreator is not a function的错误
- e.addEventListener is not a function 报错
- 文件体积超过 500KB,已跳过压缩以及 ES6 转 ES5 的处理,手机端使用过大的js库影响性能
很多教程都说的不是很明白,下面直接上我改进后的步骤:
"dependencies": {
"echarts": "^5.0.0",
},
注意版本号
下载 mpvue-echarts文件夹,放到主包的components或者分包下的components都可以
值得注意的是,如果你遇到this.echarts.setCanvasCreator is not a function的错误
检查一下需要修改引入方法路径是否正确:下图是通过npm的路径,如果是在线定制的话写你的文件相对路径
注:已gitee代码为准
<template>
<view class="container">
<view class="wrap">
<mpvue-echarts :echarts="echarts" :onInit="onInit" canvasId="gauge" />
</view>
<view class="card-result">
<view class="card-result-h">结果评估 <span>(满分为100分)</span></view>
<view class="card-result-r">
<view
><span class="car-title">测验表名</span
><span class="car-content" style="margin-right: -0.55rem">{
{
type_name
}}</span></view
>
<view
><span class="car-title">测验分数</span
><span class="car-content">{
{
score }}</span></view
>
<view
><span class="car-title">测验结果</span
><span class="car-content">{
{
judge }}</span></view
>
</view>
</view>
</view>
</template>
<script>
import * as echarts from "../../components/mpvue-echarts/src/echarts.min.js"; // 写自己的路径
import mpvueEcharts from "../../components/mpvue-echarts";
let chart = null;
let EScore = null;
function initChart(canvas, width, height) {
chart = echarts.init(canvas, null, {
width: width,
height: height,
});
canvas.setChart(chart);
var option = {
series: [
{
type: 'gauge',
center: ['50%', '65%'],
radius: '115%',
axisLine: {
lineStyle: {
width: 30,
color: [
[0.25, (function() {
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#52B5FF'
}, {
offset: 0.5,
color: '#4EA4FF'
}, {
offset: 1,
color: '#498CFF'
}])
})()], [0.5, (function() {
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#2BEFD1'
}, {
offset: 0.5,
color: '#16E1C9'
}, {
offset: 1,
color: '#04D5C2'
}])
})()],
[0.75, (function() {
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#FDD75C'
}, {
offset: 0.5,
color: '#FDC249'
}, {
offset: 1,
color: '#FE9A27'
}])
})()],
[1, (function() {
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#A4FBEC'
}, {
offset: 0.5,
color: '#73DEF5'
}, {
offset: 1,
color: '#3FBFFE'
}])
})()]
]
}
},
pointer: {
itemStyle: {
color: 'auto'
}
},
axisTick: {
distance: -30,
length: 8,
show: false,
lineStyle: {
color: '#fff',
width: 2
}
},
splitLine: {
show: false,
distance: -30,
length: 30,
lineStyle: {
color: '#fff',
width: 4
}
},
axisLabel: {
color: '#999',
distance: 40,
fontSize: 20
},
title: {
show: true,
color: '#444B5F',
fontSize: 25
},
startAngle: 180,
endAngle: 0,
splitNumber: 4,
detail: {
valueAnimation: true,
formatter: '{value}',
color: '#333333',
fontSize: 35
},
data: [
{
value: EScore,
name: '最终评分结果'
}
]
}
]
}
chart.setOption(option);
return chart;
}
export default {
data() {
return {
echarts,
onInit: initChart,
size: "medium",
score: "",
judge: "",
type_name: "",
};
},
components: {
mpvueEcharts,
},
onLoad(options) {
// this.score = options.score,
// this.judge = options.judge
// this.type_name = options.type_name
// EScore = Number(options.score)
// 虚拟数据--如果你有请求的话可以放开上面的内容
this.score = 54,
this.judge = 45
this.type_name = 'name'
EScore = 54
},
methods: {
},
};
</script>
<style lang="scss" scoped>
.container {
background: #ffff;
min-height: 100vh;
}
.wrap {
width: 100%;
height: 250px;
}
.card-result {
margin: 0 10px;
padding: 15px;
background: #f2fbfd;
border-radius: 1rem;
text-align: left;
font-size: 20px;
&-h {
span {
font-weight: 400;
color: #00aac6;
}
font-weight: 600;
}
&-r {
display: flex;
flex-direction: column;
view {
margin-top: 15px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.car-title {
font-size: 17px;
&::before {
content: "";
border-left: 0.1rem solid #00aac6;
border-radius: 1rem;
margin-right: 5px;
border-left-width: 5px;
}
}
.car-content {
font-size: 14px;
color: #00aac6;
}
}
}
</style>
到这里就可以正常展示了
改进的地方主要是拿到组件mpvue-echarts无法接收到prop的echarts,所以改用install后的echarts,当然你也可以去在线定制echarts.simple.min文件,我目前只定制了仪表盘
2023/9/14
[重要] 不要把 chart 实例赋值到 this(vue 实例) 上
echarts.init 返回的即为图表实例。
使用自定义版 echarts,官网定制
参见 examples/lazyLoad 的例子,可以在获取数据后再初始化数据。
参见 examples/multiCharts 的例子。
尝试设置 throttleTouch 属性为 true。
目前,本项目已支持 ECharts Tooltip,但是由于 ECharts 相关功能尚未发版,因此当前需要使用原项目中 ec-canvas/echarts.js,这个文件包含了可以在微信中使用 Tooltip 的相关代码。目前在 ECharts 官网下载的 echarts.js 还不能直接替换使用,等 ECharts 正式发版后即可。
具体使用方法和 ECharts 相同,例子参见 pages/line/index.js。
本项目默认提供的 ECharts 文件是最新版本的包含所有组件文件,为了便于开发,提供的是未压缩的版本。远程调试或预览可以下载 echarts.min.js 压缩版本。
发布时,如果对文件大小要求更高,可以在 ECharts 在线定制网页下载仅包含必要组件的包,并且选择压缩。
打包时出错 ERROR in static/js/vendor.js from UglifyJs
参照以下配置使 babel 处理 mpvue-echarts
// webpack.base.conf.js
{
test: /\.js$/,
include: [
resolve('src'),
resolve('node_modules/mpvue-echarts')
],
use: [
'babel-loader',
{
loader: 'mpvue-loader',
options: {
checkMPEntry: true
}
}
]
}
支持微信版本 >= 6.6.3,对应基础库版本 >= 1.9.91。尽可能使用更高版本的基础库版本。
调试的时候,需要在微信开发者工具中,将“详情”下的“调试基础库”设为 1.9.91 及以上版本。
发布前,需要在 https://mp.weixin.qq.com 的“设置”页面,将“基础库最低版本设置”设为 1.9.91。当用户微信版本过低的时候,会提示用户更新。
ECharts 中的绝大部分功能都支持小程序版本,因此这里仅说明不支持的功能,以及存在的问题。
以下功能尚不支持,如果有相关需求请在 issue 中向我们反馈,对于反馈人数多的需求将优先支持:
多个 zlevel 分层
此外,目前还有一些 bug 尚未修复,部分需要小程序团队配合上线支持,但不影响基本的使用。已知的 bug 包括:
安卓平台:transform 的问题(会影响关系图边两端的标记位置、旭日图文字位置等)
iOS 平台:半透明略有变深的问题
iOS 平台:渐变色出现在定义区域之外的地方
.完结~欢迎留言
文章浏览阅读1.6k次,点赞12次,收藏7次。大家好!大四的同学们毕业设计即将开始了,你们做好准备了吗?学长给大家精心整理了最新的计算机毕业设计选题,希望能为你们提供帮助。如果在选题过程中有任何疑问,都可以随时问我,我会尽力帮助大家。在选择毕业设计选题时,有几个要点需要考虑。首先,选题应与计算机专业密切相关,并且符合当前行业的发展趋势。选择与专业紧密结合的选题,可以使你们更好地运用所学知识,并为未来的职业发展奠定基础。要考虑选题的实际可行性和创新性。选题应具备一定的实践意义和应用前景,能够解决实际问题或改善现有技术。
文章浏览阅读3.4k次。摘要:随着电信业务的发展和电信企业经营方式的转变,DCN网络的定位发生了重大的演变。本文基于这种变化,重点讨论DCN网络的规划方法和运维管理方法。Digest: With the development oftelecommunication bussiness and the change of management of telecomcarrier , DCN’s role will cha..._电信dcn
文章浏览阅读442次。深度学习一部分矩阵求导知识的搬运总结_向量变元是什么
文章浏览阅读8次。近期,裁员的公司越来越多今天想和大家聊聊职场人的新出路。作为席卷全球的新概念ESG已然成为当前各个行业关注的最热风口目前,国内官方发布了一项ESG新证书含金量五颗星、中文ESG证书、完整ESG考试体系、名师主讲...而ESG又是与人力资源直接相关甚至在行业圈内成为大佬们的热门话题...当前行业下行,裁员的公司也越来越多大家还是冲一冲这个新兴领域01 ESG为什么重要?在双碳的大背景下,ESG已然成...
文章浏览阅读356次。云计算快速渗透到众多的行业,使中小企业受益于技术变革。最近微软SMB的一项研究发现,到今年年底,78%的中小企业将以某种方式使用云。企业希望投入少、收益高,来取得更大的发展机会。云计算将中小企业信息化的成本大幅降低,它们不必再建本地互联网基础设施,节省时间和资金,降低了企业经营风险。科技创新已成时代的潮流,中小企业上云是创新前提。云平台稳定、安全、便捷的IT环境,提升企业经营效率的同时,也为企业..._系统上云的前后对比
文章浏览阅读899次。出现选网卡的时候无法选中,这里应该是一个bug。3.保存退出,重启虚拟机即可。1.先随便选择一个网卡。2.勾先取消再重新勾选。_esxi虚拟机无法联网
文章浏览阅读913次。在LaTeX中,可在.tex文件的同一级目录下创建egbib.bib文件,所有的参考文件信息可以统一写在egbib.bib文件中,然后在.tex文件的\end{document}前加入如下几行代码:{\small\bibliographystyle{IEEEtran}\bibliography{egbib}}即可在文章中用~\cite{}宏命令便捷的插入文内引用,且文章的Reference部分会自动排序、编号。..._egbib
文章浏览阅读950次。目录:Unity Shader - 知识点目录(先占位,后续持续更新)原文:Predefined Shader preprocessor macros版本:2019.1Predefined Shader preprocessor macros着色器预处理宏Unity 编译 shader programs 期间的一些预处理宏。(本篇的宏介绍随便看看就好,要想深入了解,还是直接看Unity...
文章浏览阅读195次。本文目录:一、大数据时代还需要数据治理吗?二、如何面向用户开展大数据治理?三、面向用户的自服务大数据治理架构四、总结一、大数据时代还需要数据治理吗?数据平台发展过程中随处可见的数据问题大数据不是凭空而来,1981年第一个数据仓库诞生,到现在已经有了近40年的历史,相对数据仓库来说我还是个年轻人。而国内企业数据平台的建设大概从90年代末就开始了,从第一代架构出现到..._数据治理从0搭建
文章浏览阅读2.2k次,点赞4次,收藏12次。高手请一笑而过。物理实验课别人已经做过3、4个了,自己一个还没做呢。不是咱不想做,而是咱不想起那么早,并且仅有的一次起得早,但是哈工大的服务器竟然超负荷,不停刷新还是不行,不禁感慨这才是真正的“万马争过独木桥“啊!服务器不给力啊……好了,废话少说。其实,我的想法很简单。写一个三重循环,不停地提交,直到所有的数据都accepted。其中最关键的是提交最后一个页面,因为提交用户名和密码后不需要再访问其..._哈尔滨工业大学抢课脚本
文章浏览阅读4.9k次。一些别人收集的英文站点 http://www.lifeinchina.cn (nice) http://www.huaren.us/ (nice) http://www.hindu.com (okay) http://www.italki.com www.talkdatalk.com (transfer)http://www.en8848.com.cn/yingyu/index._study english html
文章浏览阅读5.5k次,点赞19次,收藏78次。什么是栈?在谈M3堆栈之前我们先回忆一下数据结构中的栈。栈是一种先进后出的数据结构(类似于枪支的弹夹,先放入的子弹最后打出,后放入的子弹先打出)。M3内核的堆栈也不例外,也是先进后出的。栈的作用?局部变量内存的开销,函数的调用都离不开栈。了解了栈的概念和基本作用后我们来看M3的双堆栈栈cortex-M3内核使用了双堆栈,即MSP和PSP,这极大的方便了OS的设计。MSP的含义是Main..._stm32 msp psp