1) 最直接的方法是在 ECharts 的官方網站中挑選適合您的版本進行下載，不同的打包下載應用于不同的開發(fā)者功能與體積的需求，或者您也可以直接下載完整版本；開發(fā)環(huán)境建議下載源代碼版本，包含了常見的錯誤提示和警告。2) 也可以在 ECharts 的 GitHub 上下載最新的 release 版本，解壓出來的文件夾里的 dist 目錄里可以找到最新版本的 echarts 庫。3) 或者通過 npm 獲取 echarts，npm install echarts --save，詳見“在 webpack 中使用 echarts”由 cdn 引入，你可以在 cdnjs，npmcdn 或者國內的 bootcdn 上找到 ECharts 的最新版本。

1.先安裝依賴

npm install echarts --save

2.1全局引入main.js中配置（不推薦使用，會導致包過大，冗余多）

import echarts from ’echarts’ //引入echartsVue.prototype.$echarts = echarts //掛載在原型，組件內使用直接this.$echarts調用

2.2組件內按需引入 ( 推薦使用 )這種方式很簡單，在需要引入圖表的組件引入,例如如下引入柱狀圖。

//在組件引入基本模板let echarts = require('echarts/lib/echarts');//在組件引入柱狀圖組件require('echarts/lib/chart/bar');

3.全局引入為例，在組件中使用示例

<template><div class='view-content'><div :style='{width: ’300px’, height: ’300px’}'></div></div></template><script>export default {name: ’Echarts’,data() {return {}},mounted() {this.drawLine();},methods: {drawLine() {// 基于準備好的dom，初始化echarts實例let myChart = this.$echarts.init(document.getElementById(’myChart’))// 繪制圖表配置let option = {tooltip: {},xAxis: {data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']},yAxis: {},series: [{name: ’銷量’,type: ’bar’,data: [5, 20, 36, 10, 10, 20]}]};// 窗口大小自適應方案myChart.setOption(option);setTimeout(function() {window.onresize = function() {myChart.resize();}}, 200)}}}</script><style lang='scss' scoped></style>

4.效果

5.以上效果是官方的默認效果，當然這樣子應用到項目中顯然不符合需求，要做的更加炫酷更加科技感，就需要經過一番配置，如圖（以下項目均為自己開發(fā)）

到此這篇關于基于vue+echarts數據可視化大屏展示的實現的文章就介紹到這了,更多相關vue echarts數據可視化內容請搜索好吧啦網以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網！