uni-app微信小程序使用echarts的詳細圖文教程
前言:
本來是使用的ucharts,但因為無法監(jiān)聽圖例點擊交互,滿足不了需求,所以只能放棄。
首先,下載echart組件。
可以先隨便建個文件夾,然后 npm init。接著下載依賴
npm install echarts mpvue-echarts
然后找到 node_modules\mpvue-echarts\下的文件,如圖
只留下src,其他的刪掉(沒有用到)。然后復(fù)制 mpvue-echarts文件夾到你項目的components中。如圖
接著需要echarts.min.js文件。
鏈接: ECharts 在線構(gòu)建定制echarts的js文件,選擇自己項目需要的圖表及組件,可以選擇進行代碼壓縮。
把下載下來的 echarts.min.js放到你的項目中。?。?!還需要修改里面的代碼,
!!!修改 echarts.min.js,否則會報錯 t.addEventListener is not a function。
1.增加代碼
var isDomLevel2 = (typeof window !== 'undefined') && !!window.addEventListener;
如下圖
2.修改 Le 和 Pe 函數(shù)(可通過ctrl+f搜索)如下
// An highlighted block function Pe(t, e, n, i) { if (isDomLevel2) { t.addEventListener(e, n, i) } else { t.attachEvent('on' + e, n) } } function Le(t, e, n, i) { if (isDomLevel2) { t.removeEventListener(e, n, i) } else { t.detachEvent('on' + e, n) } }
3.全文搜索 preventDefault() 修改當前的方法函數(shù)增加判斷(我一開始沒改這個,圖表正常沒啥問題,但是我用dataZoom滑動時會報錯“t.preventDefault is not a function”,然后改為如下代碼后就能正?;瑒恿耍?/p>
如下
// An highlighted block if (isDomLevel2) { t.preventDefault(), t.stopPropagation(), t.cancelBubble = !0 } else { t.returnValue = false; t.cancelBubble = !0 }
壓縮的代碼格式化后體積增加了1倍,所以我最后沒有格式化,直接在壓縮的代碼里找到對應(yīng)位置修改的。
需要準備的東西都已經(jīng)好了,接下來正片開始??!
在頁面中使用:
<template> <view class="echarts-wrap"> <my-echarts id="main" ref="mapChart" :echarts="echarts" :onInit="initChart" /> </view> </template> <script> import * as echarts from "@/pages/data/static/js/echarts.min.js"; //這里根據(jù)自己存放的路徑修改 import myEcharts from "@/pages/data/components/mpvue-echarts/src/echarts.vue"; //這里根據(jù)自己存放的路徑修改 let chart = null; //放外層方便拿到echart實例 export default { components: { myEcharts, }, data() { return { echarts, }; }, onReady() {}, mounted() { setTimeout(() => { chart.on("click", (params) => { //監(jiān)聽圖例點擊事件(詳細參見echart文檔) this.$emit("chartClick", params); }); }, 500); this.updateData() //模擬動態(tài)更新數(shù)據(jù) }, methods: { initChart(canvas, width, height) { chart = echarts.init(canvas, null, { width: width, height: height, }); canvas.setChart(chart); var option = { xAxis: { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], }, yAxis: { type: "value", }, series: [ { data: [120, 200, 150, 80, 70, 110, 130], type: "bar", }, ] }; // ECharts 配置項(詳細的圖表配置參見 echart配置項) chart.setOption(option); return chart; // 返回 chart 后可以自動綁定觸摸操作 }, updateData(){ setTimeout(()=>{ chart.setOption({ series:[{ data:[30, 90, 111, 20, 70, 88, 11] }] }) },1000) }, }, }; </script> <style> .echarts-wrap { width: 100%; height: 300px; } </style>
詳細的圖表配置參見 echart配置項 最后效果:
總結(jié)
到此這篇關(guān)于uni-app微信小程序使用echarts的文章就介紹到這了,更多相關(guān)uni-app微信小程序使用echarts內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript lodash常見用法系列小結(jié)
本篇文章主要介紹了JavaScript lodash用法小結(jié),非常不錯,具有參考借鑒價值,對于Javascript lodash教程感興趣的同學(xué)可以參考一下2016-08-08JavaScript find()方法及返回數(shù)據(jù)實例
這篇文章主要介紹了JavaScript中的find()方法和返回數(shù)據(jù)的內(nèi)存指向,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友可以參考下2020-04-04javascript小組件 原生table排序表格腳本(兼容ie firefox opera chrome)
javascript小組件 原生table排序表格腳本 兼容ie firefox opera chrome,需要的朋友可以參考下2012-07-07javascript 一個函數(shù)對同一元素的多個事件響應(yīng)
具體方法如下該方法實現(xiàn)了對一個按鈕的mouseover和click事件的響應(yīng)2009-07-07javascript的事件觸發(fā)器介紹的實現(xiàn)
這篇文章主要介紹了javascript的事件觸發(fā)器介紹的實現(xiàn),本文所指觸發(fā)器是用程序來觸發(fā)綁定的事件,而不是人為的去觸發(fā),需要的朋友可以參考下2014-06-06