今天小编给大家分享一下echart在微信小程序中如何使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
echarts不显示在微信小程序
<!-- 微信小程序的echart的使用 --><view class="container"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas></view>css样式
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; }echarts的grid属性详解
grid配置项：图标离容器的距离
show:是否显示直角坐标系网格-----------值:true?false
left:图表离容器左侧的距离-----------------值:number?百分比
top:图表离容器顶部的距离-----------------值:number?百分比
right:图表离容器右侧的距离---------------值:number?百分比
bottom:图表离容器底部的距离------------值:number?百分比
backgroundColor:网格背景色-------------值:rgba或#000000
borderColor:网格的边框颜色--------------值:rgba或#000000
borderWidth:网格的边框线宽-------------值:number
备注:背景色-边框-线宽生效前提:设置了show:true，边距不受show影响
js
import * as echarts from '../../base-ui/ec-canvas/echarts';let chart = null;function initChart(canvas, width, height, dpr) { chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr // new }); canvas.setChart(chart); var option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisLabel:{ fontSize:10 }, }, yAxis: { type: 'value', }, series: [ { data: [-120, 200, 150, 80, -70, 110, 130], type: 'bar' } ] }; 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() { setTimeout(function () { // 获取 chart 实例的方式 // console.log(chart) }, 2000); }});
以上就是“echart在微信小程序中如何使用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。
