vue 引用echarts控制項進行資料視覺化顯示

2022-02-24 12:14:21 字數 815 閱讀 1560

最近公司在專案的開發中引入echarts,執行時發現有些問題

**如下:

toolbox: }},

介面效果如下:

**如下:

toolbox: }},

介面效果如下:

修改完**,對echarts引用進行了分析,總結如下:

準備工作,需要先echarts外掛程式

npm install echarts -s
我們專案中只是個別頁面進行了引用,於是只在單個元件內使用,進行了區域性引用

import echarts from "echarts";

require("echarts/theme/macarons");//

echarts theme 主題元件

如果專案中使用介面較多,可以使用全域性引用

在main.js中引入echarts,將其繫結到vue原型上

import echarts from 'echarts';

vue.prototype.$echarts = echarts;

在專案的任何地方使用echarts都可以這樣使用

methods: ,

tooltip: {},

xaxis: ,

yaxis: {},

series:

});}  },

mounted ()

vue 按需載入引用echarts中元件

目錄 第一步 引用echarts元件庫 第二步 main.js中全域性配置主模版 第三步 封裝echarts折線圖line元件 第四步 在需要使用頁面中引用line元件。專案中我們一般會全域性引用echarts元件庫,開發起來方便。發現專案檔案體積過大,首屏載入也會慢。為了解決首屏載入速度問題,專案...

vue開發 vue引入echarts

npm install echarts s或者使用國內的 映象 npm install g cnpm registry taobao org cnpm install echarts s 引入echarts import echarts from echarts vue.prototype.echa...

記錄 vue 中使用echarts

echarts 官網 建立echarts 元件 方便後續使用的啦 實際頁面直接引用就可以了 接下來我們配置項和資料顯示圖表 var option title等 title.subtext 副標題文字,支援使用 n 換行。屬性同主標題 title.padding 5 標題內邊距,單位px,預設各方向內...