没有合适的资源?快使用搜索试试~ 我知道了~
主要介绍了在小程序中使用Echart图表的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
资源推荐
资源详情
资源评论
在小程序中使用在小程序中使用Echart图表的示例代码图表的示例代码
主要介绍了在小程序中使用Echart图表的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。
一起跟随小编过来看看吧
在小程序中使用Echart图表
1. Echart UI构建(柱状图)
2. Echart 假数据
3. Echart 动态设置数据
柱状图UI示例
// Echart config,包括init data 和style及数据类型
var option = {
animation: false,//提高页面加载速度,关闭echart的动画
grid: [
//grid section UI
...
],
xAxis: [
//xAxis section UI
...
],
yAxis: [
//yAxis section UI
...
],
series: [
{
//左侧坐标轴UI
...
data: [100, 100, 100, 100, 100],
},
{
//左侧柱状图 UI 及数据
...
data: [66, 54, 87, 78, 87],
},
{
//右侧坐标轴UI
...
data: [100, 100, 100, 100, 100],
},
{
//右侧柱状图 UI 及数据
...
data: [84, 87, 86, 76, 76],
},
]
}
// 初始化Echart图表UI
function initChart(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart)
chart.setOption(option)
return chart
}
以上就是利用echart图表插件在小程序中生成一个我们需要的柱状图用以展示我们需要表达给用户的数据表。
当然,在实际的开发中,所有的数据都是通过获取数据库中的数据,然后根据数据生成,而不是写死在series[]中,那么如何
将ajax或者其他方式获取到的数据传入我们的UI中呢?
Echart的文档告诉我们:
数据的动态更新数据的动态更新
ECharts 由数据驱动,数据的改变驱动图表展现的改变,因此动态数据的实现也变得异常简单。
所有数据的更新都通过 setOption实现,你只需要定时获取数据,setOption 填入数据,而不用考虑数据到底产生了那些变
化,ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
资源评论
weixin_38717896
- 粉丝: 4
- 资源: 885
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功