uni-app微信小程序使用ECharts
1. 引入 npm install echarts mpvue-echarts2. ECharts 在线构建 定制 echarts 的 js 文件3. 新建 common 文件夹,将定制文件放在 common 下4. 将 node_modules 下 mpvue-echarts 中 src 文件夹复制到 components 文件夹下5. 页面绘制<!-- template -->&l
·
1. 引入 npm install echarts mpvue-echarts
2. ECharts 在线构建 定制 echarts 的 js 文件
3. 新建 common 文件夹,将定制文件放在 common 下
4. 将 node_modules 下 mpvue-echarts 中 src 文件夹复制到 components 文件夹下
5. 页面绘制
<!-- template -->
<view class="echarts-wrap">
<my-echarts id="mychart-dom-bar" canvas-id="mychart-bar" :echarts="echarts" :onInit="initChart"></my-echarts>
</view>
//script:
import * as echarts from '@/common/echarts.min.js';
import myEcharts from '@/components/src/echarts.vue';
export default {
components:{myEcharts},
data() {
return {echarts}
},
methods: {
initChart(canvas, width, height) {
let chart = null
chart = echarts.init(canvas, null, {
width: width,
height: height
});
var option = {...}
chart.setOption(option);
return chart;
}
}
}
/*css*/
.echarts-wrap{
width: 100%;
height:500px;
}
6. 遇到 this.echarts.setCanvasCreator is not a function 报错
在 components 下 src 中找到 echarts.vue文件
- 引入
import * as echarts from '@/common/echarts.min.js';
- 注销掉 props 中 echarts 对象
- 找到 this.ctx 和 const query ,给其添加 this 参数
this.ctx = wx.createCanvasContext(canvasId,this);
const query = wx.createSelectorQuery().in(this);
7. 遇到 t.addEventListener is not a function 报错
在 common 中找到 echarts.min.js文件
- 全文搜索 use strict 在下面增加语句
var isDomLevel2 = (typeof window !== 'undefined') && !!window.addEventListener
- 全文搜索 function Pe(t, e, n, i) 和 function Le(t, e, n, i) 进行修改增加判断,(注意是参数中带有i的,Le 与 Pe 函数里内容可能颠倒,在原有方法上增加对应新判断即可)
function Pe(t, e, n, i) {
if(isDomLevel2){
t.addEventListener(e, n, i)
}else{
t.attachEvent('on' + e, n)
}
}
function Le(t, e, n, i) {
if(isDomLevel2){
t.removeEventListener(e, n, i)
}else{
t.detachEvent('on' + e, n)
}
}
- 全文搜索 preventDefault() 修改当前的方法函数增加判断(函数名可能不叫 t_,不影响)
t_ = function(t) {
if(isDomLevel2 ){
t.preventDefault(), t.stopPropagation(), t.cancelBubble = !0
}else{
t.returnValue = false
t.cancelBubble = !0
}
},
参考:
https://blog.csdn.net/wxh958548129/article/details/107520566
https://blog.csdn.net/tan9374/article/details/107427822
https://ask.dcloud.net.cn/article/36652
https://blog.csdn.net/qq_20095005/article/details/122937759
更多推荐
已为社区贡献1条内容
所有评论(0)