1、去官网资源地址下载
https://github.com/ecomfe/echarts-for-weixin
下载解压git项目，查看目录，将文件夹ec-canvas，复制到小程序内pages同级目录
注意事项：
在ec-canvas文件夹内的echarts.js，不能超过500kb，否则警告，且无法渲染；
通过 https://echarts.apache.org/zh/builder.html ，进行定制化，用到什么表格，就勾选哪个。
2、页面上使用（组件）
.json引入
.wxml
.js
// 组件渲染完成时 ready () { this.init_line() this.init_bar() }, methods: { // 加载心率折线图 init_line () { //处理数据 let dates = ["8.14","8.15","8.16","8.17","8.18","8.19","8.20","8.21","8.22"] let points = [56,106,67,134,35,56,107,56,67] // 指定图表的配置项和数据 var option = { //直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。 //用他可以配置图形在父元素中的位置 grid:{top: 30, left: 0, right: 0, height: "45%"}, //x轴 xAxis: { type: 'category', boundaryGap: false, data: dates, axisLine: { show: false, }, axisTick: { show: false, }, show: false }, //y轴 yAxis: { x: 'center', type: 'value', splitLine: { lineStyle: { type: 'dashed' } }, show: false }, //数据 series: [{ // connectNulls: true, name: 'A', type: 'line', // smooth: true, data: points, lineStyle: { normal: { color: '#d2525c', } }, areaStyle: { color: '#d2525c', opacity: 0.15 }, label: { show: false, position:'top', distance:-28, textStyle: { fontSize: 12, color: "#17998C" }, formatter:function(value){ let valueType if(value.dataIndex%2!=0){ valueType="shuang"; return value.data ; }else{ valueType="dan"; return value.data + '\n\n\n'; } }, } }] } //小程序的仿dom操作获取元素 this.echartsComponnet = this.selectComponent('#mychart_heart'); this.echartsComponnet.init((canvas, width, height) => { // 初始化图表 const Chart = echarts.init(canvas, null, { width: width, height: height }); Chart.setOption(option); // 注意这里一定要返回 chart 实例，否则会影响事件处理等 return Chart; }); },
// 加载血氧饱和度 init_bar () { //处理数据 let dates = ["8.14","8.15","8.16","8.17","8.18","8.19","8.20","8.21","8.22"] let points = [56,106,67,134,35,56,107,56,67] // 指定图表的配置项和数据 var option = { //直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。 //用他可以配置图形在父元素中的位置 grid:{top: 30, left: 0, right: 0, height: "45%"}, //x轴 xAxis: { type: 'category', boundaryGap: false, data: dates, axisLine: { show: false, }, axisTick: { show: false, }, show: false }, //y轴 yAxis: { x: 'center', type: 'value', splitLine: { lineStyle: { type: 'dashed' } }, show: false }, //数据 series: [{ // connectNulls: true, name: 'A', type: 'bar', // smooth: true, data: points, barWidth: 8, color: ['#33be7b'] }] } //小程序的仿dom操作获取元素 this.echartsComponnet = this.selectComponent('#mychart_bloodPressure'); this.echartsComponnet.init((canvas, width, height) => { // 初始化图表 const Chart = echarts.init(canvas, null, { width: width, height: height }); Chart.setOption(option); // 注意这里一定要返回 chart 实例，否则会影响事件处理等 return Chart; }); } } 3、效果
标签：false,show,程序,height,init,引入,type,echarts From： https://www.cnblogs.com/luckyShuang/p/17805445.html