echart在微信小程序的使用

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);}
});