1. 直接引入echarts
創(chuàng)新互聯(lián)專注于博白網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供博白營銷型網(wǎng)站建設(shè),博白網(wǎng)站制作、博白網(wǎng)頁設(shè)計(jì)、博白網(wǎng)站官網(wǎng)定制、重慶小程序開發(fā)服務(wù),打造博白網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供博白網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
先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 = { //畫一條簡(jiǎn)單的線 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的兩種方式,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持!
本文標(biāo)題:詳解Vue中使用Echarts的兩種方式
轉(zhuǎn)載源于:http://jinyejixie.com/article12/jopedc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、網(wǎng)站排名、靜態(tài)網(wǎng)站、用戶體驗(yàn)、App開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)