微信小程序Echarts图表组件使用方法详解


Posted in Javascript onJune 25, 2019

1:下载 GitHub 上的 项目

微信小程序Echarts图表组件使用方法详解

2:但项目下载之后,打开小程序开发工具,可以看到效果如下,适配性还是比较完美的。

微信小程序Echarts图表组件使用方法详解

微信小程序Echarts图表组件使用方法详解

如果是在项目里面引入组件的话,打开从github上面下载的代码,将ec-canvas文件夹复制黏贴到你的项目里面。

微信小程序Echarts图表组件使用方法详解

微信小程序Echarts图表组件使用方法详解

好的,组件已经复制到了我的项目里面,现在我想实现一个折线图,现在开始去组件里面搬运复制黏贴代码了。

wxml

<!--index.wxml-->
<view class="container">
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
</view>

js

import * as echarts from '../../ec-canvas/echarts';
const app = getApp();
function initChart(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
title: {
text: '测试下面legend的红色区域不应被裁剪',
left: 'center'
},
color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
legend: {
data: ['A', 'B', 'C'],
top: 50,
left: 'center',
backgroundColor: 'red',
z: 100
},
grid: {
containLabel: true
},
tooltip: {
show: true,
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
// show: false
},
yAxis: {
x: 'center',
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
// show: false
},
series: [{
name: 'A',
type: 'line',
smooth: true,
data: [18, 36, 65, 30, 78, 40, 33]
}, {
name: 'B',
type: 'line',
smooth: true,
data: [12, 50, 51, 35, 70, 30, 20]
}, {
name: 'C',
type: 'line',
smooth: true,
data: [10, 30, 31, 50, 40, 20, 10]
}]
};
chart.setOption(option);
return chart;
}
Page({
onShareAppMessage: function (res) {
return {
title: 'ECharts 可以在微信小程序中使用啦!',
path: '/pages/index/index',
success: function () { },
fail: function () { }
}
},
data: {
ec: {
onInit: initChart
}
},
onReady() {
}
});

json

{
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}

css

/**index.wxss**/
ec-canvas {
width: 100%;
height: 100%;
}

这一步为止,代码搬运结束,刷新按钮,但是,为什么界面显示空白?没有报错,代码也一模一样,真实让人费解,算了,还是先放在这里吧,吃饭要紧。

.......

.......

继续写

对,没错,空白不显示的原因出在了css文件上面,只要我们在css里面再写上一些代码之后。

/**index.wxss**/
ec-canvas {
width: 100%;
height: 100%;
}
ec-canvas {
width: 100%;
height: 100%;
}
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
.picker-pos {
margin-top: -130rpx;
margin-left: 150rpx;
color: blueviolet;
}

这个时候

小程序Echarts图表组件算是已经可以运用在项目里面啦

微信小程序Echarts图表组件使用方法详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 读书笔记索引贴
Jan 11 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
Oct 13 Javascript
来自国外的30个基于jquery的Web下拉菜单
Jun 22 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
js使用心得分享
Jan 13 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
Apr 02 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 #Javascript
ES6 Object属性新的写法实例小结
Jun 25 #Javascript
ES6模板字符串和标签模板的应用实例分析
Jun 25 #Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 #Javascript
Node.js实现简单的爬取的示例代码
Jun 25 #Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 #Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 #Javascript
You might like
apache+php+mysql安装配置方法小结
2010/08/01 PHP
php实现自动获取生成文章主题关键词功能的深入分析
2013/06/03 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
jquery 学习之二 属性(类)
2010/11/25 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
js鼠标滑过图片震动特效的方法
2015/02/17 Javascript
js给selected添加options的方法
2015/05/06 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
node使用UEditor富文本编辑器的方法实例
2017/07/11 Javascript
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
layui导出所有数据的例子
2019/09/10 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
python里大整数相乘相关技巧指南
2014/09/12 Python
python实现按行切分文本文件的方法
2016/04/18 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
员工拓展培训方案
2014/02/15 职场文书
车间机修工岗位职责
2014/02/28 职场文书
网吧温馨提示
2015/07/17 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
Opencv中cv2.floodFill算法的使用
2021/06/18 Python
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS