echart的安裝引入和初步使用,適合新手的教程

2022-07-20 08:03:13 字數 1093 閱讀 5297

一、安裝:

npm安裝:

npm install echarts -s
cnpm安裝:

二、vue專案中全域性引入:在main.js檔案:

import echarts from 'echarts'vue.prototype.$echarts = echarts
三、使用:tips:可以直接從echart官方例項貼上乙個簡單的例項到自己的元件中,看看是否能夠成功展示;

(可以直接從官方例項複製較為接近專案需求的option,在這基礎上進行調整)

html:

注意一定要給準備裝echarts圖的dom容器設定高度,不然會無法顯示!

js:

mounted(),

methods:,

color: ['#3398db'],

tooltip :

},grid: ,

xaxis : [}],

yaxis : [

],series : };

this.chart1.setoption(option,true

);//setoption:設定圖表例項的配置項以及資料,萬能介面,所有引數和資料的修改都可以通過它完成,echarts會合併新的引數和資料,然後重新整理圖表。}},

上述setchartoption方法中的option物件直接貼上自官網例項(僅在這基礎上加了標題的配置):

效果展示:

關於echart的api和配置項,見官方文件:

api:

配置項:

關於setoption方法的詳情:instance.setoption

應用 element ui 的安裝和引入

參考官方文件 推薦使用 npm 的方式安裝,它能更好地和 webpack 打包工具配合使用。npm i element ui s在main.js中寫入以下內容 import elementui from element ui import element ui lib theme chalk ind...

併發程式設計 synchronized的初步使用

三 隱式規則 四 選擇合適的鎖 synchronized 內建鎖,又被稱為同步鎖,隱式鎖 當synchronized關鍵字修飾乙個方法或者 塊時,能保證同一時刻最多只有乙個執行緒執行該段 鎖的是當前例項 測試synchronized鎖this和synchronized修飾方法 是否鎖的同乙個物件 如...

WdatePicker日期控制項 的引入及使用筆記

3.在你需要用到wdatepicker日期控制項的jsp頁面中引入wdatepicker.js 如下所示 4.應用如下 4.1 起始日期 要求最大日期 不大於 結束日期。sendstartdate nf cus wdatepicker value 4.2 結束日期 要求最大日期小於今天 不小於 起始...