ecomfe / echarts-for-weixin Goto Github PK
View Code? Open in Web Editor NEW基于 Apache ECharts 的微信小程序图表库
License: BSD 3-Clause "New" or "Revised" License
基于 Apache ECharts 的微信小程序图表库
License: BSD 3-Clause "New" or "Revised" License
请确保提问前做了以下事,将完成的项目的 []
改为 [x]
:
将符合项的 []
改为 [x]
,并补充需要的信息:
微信小程序 无法正常显示 三个以上的拐点问题已同步提交到Echart官方 见以下链接
http://gallery.echartsjs.com/editor.html?c=xHJHnfqc_G&comment=0
截图是相同的option在小程序下的显示 见
浏览器中拖动无问题
option配置如下:
var option = {
grid: {
left: '30px',
right: '10px',
bottom: '95px',
top: '20px'
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.2)'
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: ['rgba(255,255,255,.2)'],
type: 'solid'
}
},
boundaryGap: false,
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28']
},
yAxis: {
x: 'center',
type: 'value',
axisLine: {
lineStyle: {
color: 'rgba(255, 255, 255, .2)'
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: ['rgba(255,255,255,.2)'],
type: 'solid'
}
},
},
series: [{
name: 'A商品',
type: 'line',
smooth: true,
itemStyle: {
opacity: 0
},
lineStyle: {
width: 2,
color: '#EEC67F'
},
data: [18, 36, 65, 30, 78, 40, 33, 18, 36, 65, 30, 78, 40, 33, 18, 36, 65, 30, 78, 40, 33, 18, 36, 65, 30, 78, 40, 33]
}, {
name: 'B商品',
type: 'line',
smooth: true,
itemStyle: {
opacity: 0
},
lineStyle: {
width: 2,
color: '#427CC5'
},
data: [12, 50, 51, 35, 70, 30, 20, 12, 50, 51, 35, 70, 30, 20, 12, 50, 51, 35, 70, 30, 20, 12, 50, 51, 35, 70, 30, 20]
}],
"dataZoom": [{
"show": true,
"height": 22,
"xAxisIndex": [
0
],
bottom: 10,
"start": 0,
"end": 100,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '200%',
handleStyle: {
color: "#d3dee5",
},
textStyle: {
color: "#fff"
},
borderColor: "#90979c"
}, {
"type": "inside",
"show": true,
"height": 15,
"start": 1,
"end": 35
}],
}
查看提供的例子都是只有单张图表,并没有提供选择不同ID区域来配置多张图表的方法。不知道是否支持,谢谢。
我看给的例子都是页面加载的时候,自动实例化图表,我这边单个页面会有多张图表,需要按需加载,
二维码扫描的官方demo,在我的荣耀V8的手机里面速度感觉比较卡的样子。几乎所有的图都有同样的问题。
测试代码:
var option = {
backgroundColor: "#F00",
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
同样的配置在正常版本中没问题,在小程序版中没生效
我现在需要用按钮控制图表的显示和隐藏
初始时 isDisposed:false
我第一次点加载button1,用init方法,图表正常加载
第一次点隐藏button2,隐藏的是图表控件外面一层的view,使isDisposed:true,图表正常隐藏
但是我发现:
再点显示图表按钮button3,使isDisposed:false,图表并没有显示,而检查wxml元素 ec-canvas控件存在
我想请 @Ovilia 或哪位大牛如同 pages/lazyLoad 和 pages/multiCharts 做个demo让我参考一下 非常感谢
在onready里一直报canvas is not defined @
series[i]-line.lineStyle.type = 'solid'
时,微信开发者工具显示的是实线('solid')。但是手机预览显示的却是'dashed'。代码:
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true,
itemStyle: {
color: '#999',
type: 'solid', // 线类型
opacity: 0,
},
lineStyle: {
color: 'rgb(23, 147, 209)', // 线颜色
width: 1,
},
areaStyle: {
color: 'rgba(23, 147, 209,0.2)' // 区域颜色
}
}]
如何在template中使用ec-canvas?
很奇怪。
在下载下来的Demo项目中修改一下数据,在页面中是会有变化的。
但是我按照提供的教程把ec-canvas目录拷贝到新建的一个项目中,再按照后续步骤完成了一个新的Demo,但是在页面中没有任何内容,控制台也没有提示任何错误。
我也试过复制ec-canvas目录和某个图表的代码到新demo中也无法显示任何图表。
基础调试库的版本是1.9.91。
我暂时还无法定位到底是哪里出了问题,不知道上面那个说无法实例化的同学是不是跟我是相同的问题
项目中使用到wepy开发小程序,在wepy框架中怎么使用echarts呢?
必须初始化的时候绘制折线图吗?怎么请求到数据后再设置?还有怎么更新已经绘制的折线图?感觉demo不详细啊
echarts.init(canvas, null, { width: width, height: height });
canvas对象如何在onLoad或onReady或onShow里获取
当前组件中绑定的touchmove事件,导致小程序无法滑动页面
areaStyle颜色设置后,安卓真机和苹果真机颜色差异非常明显,请问有办法解决没有?
ReferenceError: echarts is not defined
at Object.initChart [as onInit]
这种情况的可能原因是什么呢(warn提示echarts.js已跳过 ES6 转 ES5 和压缩的处理)
请确保提问前做了以下事,将完成的项目的 []
改为 [x]
:
将符合项的 []
改为 [x]
,并补充需要的信息:
在echarts示例中测试,
1、由于业务需要,要将ec-canvas包在多个view层级中,但是不显示
2、在一层view中,class是默认的container样式,可以正常显示,但是换个其他样式就显示不了。
问题1,代码如下:
<!--index.wxml--> <view class="container"> <view> <ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}"></ec-canvas> </view> </view>
问题2,代码如下:
<view class="page"> <ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}"></ec-canvas> </view>
page样式如下:
page { background-color: #fff; font-size: 16px; font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif; }
正常显示饼图
不显示饼图,页面空白
VM3492:1 TypeError: i.measureText is not a function
at Object.$_.measureText (echarts.js:1)
at Te (echarts.js:1)
at ge (echarts.js:1)
at De (echarts.js:1)
at Ae (echarts.js:1)
at ve (echarts.js:1)
at me (echarts.js:1)
at dl (echarts.js:1)
at ND.getLabelInterval (echarts.js:1)
at ND.isLabelIgnored (echarts.js:1)
我在用的开发包不是最新的,所以得到这样的提示:
This version of Wexin is not supported by ECharts. Please update Wexin with versions after 1.9.90
这个问题通过升级微信开发工具解决了,由此引出一个疑问,echarts-for-weixin 是否也对微信版本有所要求,也就是说:稍老的微信客户端是否也能使用?如果有要求,请求具体的版本是如何呢?
谢谢:)
参考微信兼容性文档:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html
function initChart(canvas, width, height) {
chart = echarts.init(canvas, null, {
width: width,
height: height,
renderer: 'svg'//这么加会报错
});
canvas.setChart(chart);
xxxxx
}
请问Echarts可否支持tooltip?相信很多人都需要这个功能,为啥没有做呢?
现在手指在chart 图上时候 ,会卡顿,不在chart 图上 屏幕 滑动滚动流畅
高度怎么能设置成自适应啊,还是只能是指定高度才能完整显示?
在 mpvue 中使用 echarts 的小程序组件。
不想通过在 data 中传 function ,直接传 options 进行 canvas 图表的初始化。
如何在小程序的onReady钩子中获取echarts实例
该文件太大了,但是实际中可能用不到这么多种图形,是否可以提供自定义方式?
如何加载异步数据呢?
echarts-wordcloud.min.js文件应该如何引用?
请确保提问前做了以下事,将完成的项目的 []
改为 [x]
:
您能使用我的echarts配置放在小程序编辑器里面试一下 然后截个图出来看一下吗,因为我找朋友使用mac和win的编辑器用最新的echart for wx和最新的小程序编辑器都试过了 有同样的问题:只能显示三个柱状图,后面都显示不出来。
我的配置如下:
var option = {
color: ["#57B078"],
backgroundColor: "#fff",
animation: false,
grid: {
left: '6%',
right: '6%',
bottom: '6%',
top: '4%',
containLabel: true
},
xAxis: [{
show: true,
type: 'category',
data: ['12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'],
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
}],
yAxis: [{
type: 'value',
show: true,
axisLine: {
show: false
},
splitLine: {
show: false
},
}],
dataZoom: [{
type: 'inside',
filterMode: 'filter',
startValue: 0,
endValue: 6,
}],
series: [{
type: 'bar',
barWidth: '30%',
hoverAnimation: false,
data: [10, 52, 200, 334, 390, 330, 220, 10, 52, 200, 334, 390, 330, 220],
label: {
show: true,
position: 'top',
color: '#000'
},
}]
};
我把以前PC版本中的option设置直接复制到小程序中(删除了tooltip)报了一大堆错,这个要怎么解决?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.