詳解Vue中使用Echarts的兩種方式
1. 直接引入echarts
先npm安裝echarts
npm install echarts --save
開發(fā):
main.js
import myCharts from './comm/js/myCharts.js' Vue.use(myCharts) myCharts.js /** * 各種畫echarts圖表的方法都封裝在這里 */ import echarts from 'echarts' (function() { var chart = {}; chart.install = function(vue) { vue.prototype.$chart = { //畫一條簡單的線 line1: function(id) { this.chart = echarts.init(document.getElementById(id)); this.chart.clear(); const optionData = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', smooth: true }] }; this.chart.setOption(optionData); }, } } if(typeof exports == 'object') { module.exports = chart } })() hello.vue ... <div id="chart1"></div> ... mounted() { this.$chart.line1('chart1'); },
2、使用vue-echarts
先npm安裝vue-echarts
npm install vue-echarts
開發(fā):
main.js
import ECharts from 'vue-echarts/components/ECharts' import 'echarts/lib/chart/bar' import 'echarts/lib/component/tooltip' Vue.component('chart', ECharts) hello.vue ... <chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart> ... data: function() { return { orgOptions: {}, } }, ... mounted() { this.orgOptions = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', smooth: true }] } }
總結(jié)
以上所述是小編給大家介紹的Vue中使用Echarts的兩種方式,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- 在vue中添加Echarts圖表的基本使用教程
- 使用Vue開發(fā)動(dòng)態(tài)刷新Echarts組件的教程詳解
- 在Vue中使用echarts的實(shí)例代碼(3種圖)
- 詳解vue文件中使用echarts.js的兩種方式
- vue.js中使用echarts實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)刷新功能
- 基于vue+echarts 數(shù)據(jù)可視化大屏展示的方法示例
- Vue Echarts實(shí)現(xiàn)可視化世界地圖代碼實(shí)例
- vue在使用ECharts時(shí)的異步更新和數(shù)據(jù)加載詳解
- vue.js+Echarts開發(fā)圖表放大縮小功能實(shí)例
- vue.js集成echarts時(shí)遇到的一些問題總結(jié)
相關(guān)文章
Vue 3開發(fā)中VueUse強(qiáng)大Hooks庫
VueUse提供了一個(gè)豐富且強(qiáng)大的Hooks庫,可以幫助開發(fā)者快速實(shí)現(xiàn)各種功能,提高開發(fā)效率,本文來詳細(xì)的介紹一下,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-08-08vue列表數(shù)據(jù)發(fā)生變化指令沒有更新問題及解決方法
這篇文章主要介紹了vue中使用指令,列表數(shù)據(jù)發(fā)生變化指令沒有更新問題,本文給出了解決辦法,需要的朋友可以參考下2020-01-01Vue2.0 實(shí)現(xiàn)歌手列表滾動(dòng)及右側(cè)快速入口功能
這篇文章主要介紹了Vue2.0實(shí)現(xiàn)歌手列表滾動(dòng)及右側(cè)快速入口功能,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08Vue開發(fā)之watch監(jiān)聽數(shù)組、對象、變量操作分析
這篇文章主要介紹了Vue開發(fā)之watch監(jiān)聽數(shù)組、對象、變量操作,結(jié)合實(shí)例形式分析了vue.js使用Watch針對數(shù)組、對象、變量監(jiān)聽相關(guān)操作技巧,需要的朋友可以參考下2019-04-04Vue配合iView實(shí)現(xiàn)省市二級聯(lián)動(dòng)的示例代碼
本篇文章主要介紹了Vue配合iView實(shí)現(xiàn)省市二級聯(lián)動(dòng)的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07vue 動(dòng)態(tài)創(chuàng)建組件的兩種方法
這篇文章主要介紹了vue 動(dòng)態(tài)創(chuàng)建組件的兩種方法,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下2020-12-12