电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

echart在微信小程序的使用簡單示例

瀏覽:147日期:2022-06-01 10:21:03
目錄
  • echarts不顯示在微信小程序
  • css樣式
  • echarts的grid屬性詳解
  • js
  • 總結

echarts不顯示在微信小程序

<!-- 微信小程序的echart的使用 --><view>  <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在微信小程序的使用的文章就介紹到這了,更多相關echart在微信小程序的使用內容請搜索以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持!

標簽: JavaScript
主站蜘蛛池模板: 脉冲布袋除尘器_除尘布袋-泊头市净化除尘设备生产厂家 | elisa试剂盒-PCR试剂盒「上海谷研实业有限公司」 | 时代北利离心机,实验室离心机,医用离心机,低速离心机DT5-2,美国SKC采样泵-上海京工实业有限公司 工业电炉,台车式电炉_厂家-淄博申华工业电炉有限公司 | 岩棉切条机厂家_玻璃棉裁条机_水泥基保温板设备-廊坊鹏恒机械 | 低合金板|安阳低合金板|河南低合金板|高强度板|桥梁板_安阳润兴 北京租车牌|京牌指标租赁|小客车指标出租 | 电脑刺绣_绣花厂家_绣花章仔_织唛厂家-[源欣刺绣]潮牌刺绣打版定制绣花加工厂家 | POS机办理_个人POS机免费领取 - 银联POS机申请首页 | 宝元数控系统|对刀仪厂家|东莞机器人控制系统|东莞安川伺服-【鑫天驰智能科技】 | 压力控制器,差压控制器,温度控制器,防爆压力控制器,防爆温度控制器,防爆差压控制器-常州天利智能控制股份有限公司 | 武汉画册印刷厂家-企业画册印刷-画册设计印刷制作-宣传画册印刷公司 - 武汉泽雅印刷厂 | 深圳成考网-深圳成人高考报名网| 双舌接地线-PC68数字式高阻计-ZC36|苏海百科| 北京自然绿环境科技发展有限公司专业生产【洗车机_加油站洗车机-全自动洗车机】 | 水质监测站_水质在线分析仪_水质自动监测系统_多参数水质在线监测仪_水质传感器-山东万象环境科技有限公司 | 杭州标识标牌|文化墙|展厅|导视|户内外广告|发光字|灯箱|铭阳制作公司 - 杭州标识标牌|文化墙|展厅|导视|户内外广告|发光字|灯箱|铭阳制作公司 | 电动液压篮球架_圆管地埋式篮球架_移动平箱篮球架-强森体育 | 金属切削液-脱水防锈油-电火花机油-抗磨液压油-深圳市雨辰宏业科技发展有限公司 | 恒温恒湿试验箱厂家-高低温试验箱维修价格_东莞环仪仪器_东莞环仪仪器 | 液压扳手-高品质液压扳手供应商 - 液压扳手, 液压扳手供应商, 德国进口液压拉马 | 电动高尔夫球车|电动观光车|电动巡逻车|电动越野车厂家-绿友机械集团股份有限公司 | 爱佩恒温恒湿测试箱|高低温实验箱|高低温冲击试验箱|冷热冲击试验箱-您身边的模拟环境试验设备技术专家-合作热线:400-6727-800-广东爱佩试验设备有限公司 | 上海瑶恒实业有限公司|消防泵泵|离心泵|官网 | 高压贴片电容|贴片安规电容|三端滤波器|风华电容代理南京南山 | 武汉天安盾电子设备有限公司 - 安盾安检,武汉安检门,武汉安检机,武汉金属探测器,武汉测温安检门,武汉X光行李安检机,武汉防爆罐,武汉车底安全检查,武汉液体探测仪,武汉安检防爆设备 | 多功能干燥机,过滤洗涤干燥三合一设备-无锡市张华医药设备有限公司 | 传动滚筒_厂家-淄博海恒机械制造厂 | 净化车间装修_合肥厂房无尘室设计_合肥工厂洁净工程装修公司-安徽盛世和居装饰 | 北京律师咨询_知名专业北京律师事务所_免费法律咨询 | 「阿尔法设计官网」工业设计_产品设计_产品外观设计 深圳工业设计公司 | 无味渗透剂,泡沫抑尘剂,烷基糖苷-威海威能化工有限公司 | 防爆电机-高压防爆电机-ybx4电动机厂家-河南省南洋防爆电机有限公司 | 中医中药治疗血小板减少-石家庄血液病肿瘤门诊部 | 水篦子|雨篦子|镀锌格栅雨水篦子|不锈钢排水篦子|地下车库水箅子—安平县云航丝网制品厂 | 工程管道/塑料管材/pvc排水管/ppr给水管/pe双壁波纹管等品牌管材批发厂家-河南洁尔康建材 | 冷水机-冰水机-冷冻机-冷风机-本森智能装备(深圳)有限公司 | 耐酸泵,耐酸泵厂家-淄博华舜耐腐蚀真空泵 | 派财经_聚焦数字经济内容服务平台 | 都江堰招聘网-都江堰人才网 都江堰人事人才网 都江堰人才招聘网 邢台人才网_邢台招聘网_邢台123招聘【智达人才网】 | 水成膜泡沫灭火剂_氟蛋白泡沫液_河南新乡骏华消防科技厂家 | 阿里巴巴诚信通温州、台州、宁波、嘉兴授权渠道商-浙江联欣科技提供阿里会员办理 | 柴油机_柴油发电机_厂家_品牌-江苏卡得城仕发动机有限公司 |