echart在微信小程序的使用簡(jiǎn)單示例
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配置項(xiàng):圖標(biāo)離容器的距離
- show:是否顯示直角坐標(biāo)系網(wǎng)格-----------值:true?false
- left:圖表離容器左側(cè)的距離-----------------值:number?百分比
- top:圖表離容器頂部的距離-----------------值:number?百分比
- right:圖表離容器右側(cè)的距離---------------值:number?百分比
- bottom:圖表離容器底部的距離------------值:number?百分比
- backgroundColor:網(wǎng)格背景色-------------值:rgba或#000000
- borderColor:網(wǎng)格的邊框顏色--------------值:rgba或#000000
- borderWidth:網(wǎng)格的邊框線寬-------------值:number
- 備注:背景色-邊框-線寬生效前提:設(shè)置了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 實(shí)例的方式 // console.log(chart) }, 2000); } });
總結(jié)
到此這篇關(guān)于echart在微信小程序的使用的文章就介紹到這了,更多相關(guān)echart在微信小程序的使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript對(duì)象的property和prototype是這樣一種關(guān)系
javascript對(duì)象的property和prototype是這樣一種關(guān)系...2007-03-03給before和after偽元素設(shè)置js效果的方法
本文通過實(shí)例給大家介紹給before和after偽元素設(shè)置js效果的方法,對(duì)js偽元素相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12javascript動(dòng)畫效果打開/關(guān)閉層
用javascript實(shí)現(xiàn)打開層和關(guān)閉層的效果,原理不錯(cuò),學(xué)習(xí),記錄好2008-06-06微信小程序遍歷Echarts圖表實(shí)現(xiàn)多個(gè)餅圖
這篇文章主要介紹了微信小程序遍歷Echarts圖表實(shí)現(xiàn)多個(gè)餅圖,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04JavaScript 使用Ckeditor+Ckfinder文件上傳案例詳解
這篇文章主要介紹了JavaScript 使用Ckeditor+Ckfinder文件上傳案例詳解,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08javascript+ajax實(shí)現(xiàn)產(chǎn)品頁面加載信息
本文給大家分享的是使用javascript結(jié)合ajax實(shí)現(xiàn)產(chǎn)品頁面無刷新加載信息的代碼,非常的簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下。2015-07-07微信小程序?qū)崿F(xiàn)星級(jí)評(píng)價(jià)效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)星級(jí)評(píng)價(jià)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12