這篇文章給大家介紹使用vue與echarts怎么實(shí)現(xiàn)一個(gè)數(shù)據(jù)可視化功能，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

創(chuàng)新互聯(lián)擁有10多年成都網(wǎng)站建設(shè)工作經(jīng)驗(yàn),為各大企業(yè)提供網(wǎng)站制作、網(wǎng)站設(shè)計(jì)服務(wù)，對(duì)于網(wǎng)頁(yè)設(shè)計(jì)、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、app軟件開(kāi)發(fā)公司、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、程序開(kāi)發(fā)、網(wǎng)站優(yōu)化（SEO優(yōu)化）、微網(wǎng)站、申請(qǐng)域名等，憑借多年來(lái)在互聯(lián)網(wǎng)的打拼，我們?cè)诨ヂ?lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了很多網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營(yíng)銷(xiāo)經(jīng)驗(yàn)，集策劃、開(kāi)發(fā)、設(shè)計(jì)、營(yíng)銷(xiāo)、管理等網(wǎng)站化運(yùn)作于一體，具備承接各種規(guī)模類(lèi)型的網(wǎng)站建設(shè)項(xiàng)目的能力。

獲取 ECharts 的路徑有以下幾種，請(qǐng)根據(jù)您的情況進(jìn)行選擇：

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

1.先安裝依賴(lài)

npm install echarts --save

2.1全局引入main.js中配置（不推薦使用，會(huì)導(dǎo)致包過(guò)大，冗余多）

import echarts from 'echarts' //引入echarts
Vue.prototype.$echarts = echarts //掛載在原型，組件內(nèi)使用直接this.$echarts調(diào)用

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

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

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

<template>
	<div class="view-content">
		<div id="myChart" :></div>
	</div>
</template>

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

關(guān)于使用vue與echarts怎么實(shí)現(xiàn)一個(gè)數(shù)據(jù)可視化功能就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

本文標(biāo)題：使用vue與echarts怎么實(shí)現(xiàn)一個(gè)數(shù)據(jù)可視化功能-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://www.chinadenli.net/article2/ippoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、Google、做網(wǎng)站、服務(wù)器托管、自適應(yīng)網(wǎng)站、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)