在vue中使用vue-echarts-v3的實例代碼
更新時間：2018年09月13日 10:30:45 作者：騷φ(゜▽゜*)♪白
這篇文章主要介紹了在vue中使用vue-echarts-v3的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
特征
•輕量，高效，按需綁定事件
•支持按需導入ECharts.js圖表和組件
•支持組件調整大小事件自動更新視圖
一、安裝
npm install --save echarts vue-echarts-v3
二、用法
用 vue-cli 搭建的項目，打開 build 文件夾中的 webpack.base.conf.js 文件
1、webpack 1.x 修改成如下
{
test: /\.js$/,
loader: 'babel',
include: [
path.join(prjRoot, 'src'),
path.join(prjRoot, 'node_modules/vue-echarts-v3/src')
],
exclude: /node_modules(?![\\/]vue-echarts-v3[\\/]src[\\/])/
},
2、webpack 2.x 修改成如下
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/vue-echarts-v3/src')]
}
3、導入所有圖表和組件
import IEcharts from 'vue-echarts-v3/src/full.js';
4、手動導入ECharts.js模塊以減少捆綁包大小
import IEcharts from 'vue-echarts-v3/src/lite.js'; import 'echarts/lib/component/title'; //引入標題組件 import 'echarts/lib/component/legend'; //引入圖例組件 import 'echarts/lib/component/tooltip'; //引入提示框組件 import 'echarts/lib/component/toolbox'; //引入工具箱組件 // ...(引入自己需要的) import 'echarts/lib/chart/pie'; //以餅圖為例
三、例子
關于Echarts的API使用參照 Echarts官網(wǎng)
•從接口獲取的動態(tài)數(shù)據(jù)可以直接通過props從父組件傳過來，替換下面的series[0].data數(shù)組中的數(shù)據(jù)
•也可以從這個組件中從接口獲取動態(tài)數(shù)據(jù)。但option屬性對應的變量pie必須寫在computed中return出來,不能再寫在data中，否則獲取不到數(shù)據(jù)
<template>
<div class="echarts">
<IEcharts :option="pie" @ready="onReady" @click="onClick"></IEcharts>
</div>
</template>
<script>
import IEcharts from 'vue-echarts-v3/src/lite.js';
import 'echarts/lib/component/title'; //引入標題組件
import 'echarts/lib/component/legend'; //引入圖例組件
import 'echarts/lib/chart/pie';
export default {
components: {IEcharts},
data: () => ({
pie: {
title: {
text: 'ECharts Demo'
},
tooltip: {},
legend:{
type: 'plain',
orient: 'vertical',
right: 10,
top: 20,
},
series: [{
type: 'pie',
data: [
{name: 'A', value: 1211},
{name: 'B', value: 2323},
{name: 'C', value: 1919}
]
}]
}
}),
methods: {
onReady(instance) {
console.log(instance);
},
onClick(event, instance, echarts) {
console.log(arguments);
}
}
};
</script>
<style scoped>
.echarts{
width: 400px;
height: 400px;
margin: auto;
text-align: center;
}
</style>
總結
以上所述是小編給大家介紹的在vue中使用vue-echarts-v3的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
在現(xiàn)代網(wǎng)頁開發(fā)中,用戶體驗日益成為網(wǎng)站成功的重要因素,從加載時間到SEO優(yōu)化,越來越多的開發(fā)者開始關注使用服務端渲染（SSR）來提升應用的表現(xiàn),本文將深入探討 Vue 3 的 SSR 特性,并以示例代碼展示如何實現(xiàn)這一功能,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了如何使用vue-router為每個路由配置各自的title,及使用vue router的方法，需要的朋友可以參考下2018-07-07
這篇文章主要為大家介紹了vue3 pinia踩坑及解決方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
由于在項目中需要對數(shù)據(jù)進行可視化處理,也就是用圖表展示,所以下面這篇文章主要給大家介紹了關于vue-echarts如何實現(xiàn)圖表組件封裝的相關資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue-路由精講 二級路由和三級路由的作用，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue+express 構建后臺管理系統(tǒng)的示例代碼
這篇文章主要介紹了vue+express 構建后臺管理系統(tǒng)的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要為大家詳細介紹了vue+element表格導出為Excel文件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
本文主要介紹了VUE3封裝一個Hook的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-01-01
watch 函數(shù)是 Vue.js 提供的一個強大工具,用于響應數(shù)據(jù)變化并執(zhí)行相應的回調,通過合理使用 watch 函數(shù),我們可以實現(xiàn)異步數(shù)據(jù)請求、表單驗證、動態(tài)樣式等多種功能,這篇文章主要介紹了Vue.js 的 watch函數(shù),需要的朋友可以參考下2024-08-08
今天小編就為大家分享一篇vue h5移動端禁止縮放代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10