第
echart在微信小程序的使用简单示例
目录echarts不显示在微信小程序css样式echarts的grid属性详解js总结echart在微信小程序的使用
echarts不显示在微信小程序
!--微信小程序的echart的使用--
view
ec-canvasid=mychart-dom-barcanvas-id=mychart-barec={{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:是否显示直角坐标系网格值:truefalseleft:图表离容器左侧的距离值:number百分比top:图表离容器顶部的距离值:number百分比right:图表离容器右侧的距离值:number百分比bottom:图表离容器底部的距离值:number百分比backgroundColor:网格背景色值:rgba或#000000borderColor:网格的边框颜色值:rgba或#000000borderWidth:网格的边框线宽值:number备注:背景色-边框-线宽生效前提:设置了show:true，边距不受show影响
js
import*asechartsfrom../../base-ui/ec-canvas/echarts;
letchart=null;
functioninitChart(canvas,width,height,dpr){
chart=echarts.init(canvas,null,{
width:width,
height:height,
devicePixelRatio:dpr//new
canvas.setChart(chart);
varoption={
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);
returnchart;
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);
});
总结