Vue+Echarts實(shí)現(xiàn)簡(jiǎn)單折線圖
本文實(shí)例為大家分享了Vue+Echarts實(shí)現(xiàn)簡(jiǎn)單折線圖的具體代碼,供大家參考,具體內(nèi)容如下
Vue+Echarts實(shí)現(xiàn)一個(gè)折線圖,打開vue的項(xiàng)目:
1、在項(xiàng)目里面安裝echarts
npm install echarts --save
2、在需要用圖表的地方引入
import echarts from 'echarts'
3、打開my.vue
繼續(xù)寫代碼,代碼如下:
<template> ? ? <!--為echarts準(zhǔn)備一個(gè)具備大小的容器dom--> ? ? <div id="main" style="width: 600px;height: 400px;"></div> </template> <script> ? ? import echarts from 'echarts' ? ? export default { ? ? ? ? name: '', ? ? ? ? data() { ? ? ? ? ? ? return { ? ? ? ? ? ? ? ? charts: '', ? ? ? ? ? ? /* ?opinion: ["1", "3", "3", "4", "5"],*/ ? ? ? ? ? ? ? ? opinionData: ["3", "2", "4", "4", "5"] ? ? ? ? ? ? } ? ? ? ? }, ? ? ? ? methods: { ? ? ? ? ? ? drawLine(id) { ? ? ? ? ? ? ? ? this.charts = echarts.init(document.getElementById(id)) ? ? ? ? ? ? ? ? this.charts.setOption({ ? ? ? ? ? ? ? ? ? ? tooltip: { ? ? ? ? ? ? ? ? ? ? ? ? trigger: 'axis' ? ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? ? ? legend: { ? ? ? ? ? ? ? ? ? ? ? ? data: ['近七日收益'] ? ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? ? ? grid: { ? ? ? ? ? ? ? ? ? ? ? ? left: '3%', ? ? ? ? ? ? ? ? ? ? ? ? right: '4%', ? ? ? ? ? ? ? ? ? ? ? ? bottom: '3%', ? ? ? ? ? ? ? ? ? ? ? ? containLabel: true ? ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? ? ? ? toolbox: { ? ? ? ? ? ? ? ? ? ? ? ? feature: { ? ? ? ? ? ? ? ? ? ? ? ? ? ? saveAsImage: {} ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? ? ? xAxis: { ? ? ? ? ? ? ? ? ? ? ? ? type: 'category', ? ? ? ? ? ? ? ? ? ? ? ? boundaryGap: false, ? ? ? ? ? ? ? ? ? ? data: ["1","2","3","4","5"] ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? ? ? yAxis: { ? ? ? ? ? ? ? ? ? ? ? ? type: 'value' ? ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? ? ? ? series: [{ ? ? ? ? ? ? ? ? ? ? ? ? name: '近七日收益', ? ? ? ? ? ? ? ? ? ? ? ? type: 'line', ? ? ? ? ? ? ? ? ? ? ? ? stack: '總量', ? ? ? ? ? ? ? ? ? ? ? ? data: this.opinionData ? ? ? ? ? ? ? ? ? ? }] ? ? ? ? ? ? ? ? }) ? ? ? ? ? ? } ? ? ? ? }, ? ? ? ? //調(diào)用 ? ? ? ? mounted() { ? ? ? ? ? ? this.$nextTick(function() { ? ? ? ? ? ? ? ? this.drawLine('main') ? ? ? ? ? ? }) ? ? ? ? } ? ? } </script> <style scoped> ? ? * { ? ? ? ? margin: 0; ? ? ? ? padding: 0; ? ? ? ? list-style: none; ? ? } </style>
這個(gè)時(shí)候,可以看到,加載出的折線圖了,后面可以繼續(xù)進(jìn)行完善。
這是最基本的折線圖,里面的折線點(diǎn)需要替換的話,要注意一些事情
如下代碼 所示
<template> ? ? <!--為echarts準(zhǔn)備一個(gè)具備大小的容器dom--> ? ? <div id="main" style="width: 600px;height: 400px;"></div> </template> <script> ?? ?import {getorder} from '../api/api.js' ? ? import echarts from 'echarts' ? ? export default { ? ? ? ? name: '', ? ? ? ? data() { ? ? ? ? ? ? return { ? ? ? ? ? ? ? ? charts: '', ? ? ? ? ? ? ?? ?/* ?opinion: ["1", "3", "3", "4", "5"],*/ ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ?? ?//opinionData: ["3", "2", "4", "4", "5"] ? ? ? ? ? ? ? ? opinionData: [], ? ? ? ? ? ? ? ? temp:[], ? ? ? ? ? ? ? ? id:1, ? ? ? ? ? ? } ? ? ? ? }, ? ? ? ? methods: { ? ? ? ? ? ? drawLine(id) { ? ? ? ? ? ? ?? ?// 前端向后端發(fā)送請(qǐng)求,獲取數(shù)據(jù)(折線點(diǎn)) ? ? ? ? ? ? ?? ?// 發(fā)送請(qǐng)求 要寫在drawLine方法里面,不然的話 opinionData 賦予不上數(shù)據(jù),做無(wú)用功 ? ? ? ? ? ? ?? ?// params 里面的是 要向后端傳遞的一些參數(shù),為了獲取數(shù)據(jù)庫(kù)中的數(shù)據(jù),要替換成你自己的參數(shù) ? ? ? ? ? ? ? ? let params = {typ:9,id:this.id} ? ? ? ? ? ? ? ? // 這是我個(gè)人的 axios 封裝,有興趣的話,可以看我 axios 封裝的文章 ? ? ? ? ? ? ? ? getorder(params).then((result)=>{ ? ? ? ? ? ? ? ? this.temp = result.data.tempdic ? ? ? ? ? ? ? ? // console.log(this.temp) ? ? ? ? ? ? ? ? // 進(jìn)行賦值 ? ? ? ? ? ? ? ? for (let i = 0; i < this.temp.length; i++) { ? ? ? ? ? ? ? ? ? ? var str = '' ? ? ? ? ? ? ? ? ? ? str += this.temp[i].temp ? ? ? ? ? ? ? ? ? ? this.opinionData.push(str) ? ? ? ? ? ? ? ? ? ? // console.log(this.temp[i].temp) ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? // 折線圖 自帶的代碼 ? ? ? ? ? ? ? ? this.charts = echarts.init(document.getElementById(id)) ? ? ? ? ? ? ? ? this.charts.setOption({ ? ? ? ? ? ? ? ? ? ? tooltip: { ? ? ? ? ? ? ? ? ? ? ? ? trigger: 'axis' ? ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? ? ? legend: { ? ? ? ? ? ? ? ? ? ? ? ? data: ['溫度展示'] ? ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? ? ? grid: { ? ? ? ? ? ? ? ? ? ? ? ? left: '3%', ? ? ? ? ? ? ? ? ? ? ? ? right: '4%', ? ? ? ? ? ? ? ? ? ? ? ? bottom: '3%', ? ? ? ? ? ? ? ? ? ? ? ? containLabel: true ? ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? ? ? ? toolbox: { ? ? ? ? ? ? ? ? ? ? ? ? feature: { ? ? ? ? ? ? ? ? ? ? ? ? ? ? saveAsImage: {} ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? ? ? xAxis: { ? ? ? ? ? ? ? ? ? ? ? ? type: 'category', ? ? ? ? ? ? ? ? ? ? ? ? boundaryGap: false, ? ? ? ? ? ? ? ? ? ? data: [] ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? ? ? yAxis: { ? ? ? ? ? ? ? ? ? ? ? ? type: 'value', ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? ? ? ? series: [{ ? ? ? ? ? ? ? ? ? ? ? ? name: '溫度展示', ? ? ? ? ? ? ? ? ? ? ? ? type: 'line', ? ? ? ? ? ? ? ? ? ? ? ? stack: '總量', ? ? ? ? ? ? ? ? ? ? ? ? data: this.opinionData ? ? ? ? ? ? ? ? ? ? }] ? ? ? ? ? ? ? ? }) ? ? ? ? ? ? ? ? ? ? ? ? }) ? ? ? ? ? ? ? ? } ? ? ? ? }, ? ? ? ? //調(diào)用 ? ? ? ? mounted() { ? ? ? ? ? ? this.$nextTick(function() { ? ? ? ? ? ? ? ? this.drawLine('main') ? ? ? ? ? ? }) ? ? ? ? } ? ? } </script> <style scoped> ? ? * { ? ? ? ? margin: 0; ? ? ? ? padding: 0; ? ? ? ? list-style: none; ? ? } </style>
這樣就能展示出,我們想展示的數(shù)據(jù)的折線圖了!
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
jenkins自動(dòng)構(gòu)建發(fā)布vue項(xiàng)目的方法步驟
這篇文章主要介紹了jenkins自動(dòng)構(gòu)建發(fā)布vue項(xiàng)目的方法步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01vuex+axios+element-ui實(shí)現(xiàn)頁(yè)面請(qǐng)求loading操作示例
這篇文章主要介紹了vuex+axios+element-ui實(shí)現(xiàn)頁(yè)面請(qǐng)求loading操作,結(jié)合實(shí)例形式分析了vuex+axios+element-ui實(shí)現(xiàn)頁(yè)面請(qǐng)求過(guò)程中l(wèi)oading遮罩層相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2020-02-02koa2+vue實(shí)現(xiàn)登陸及登錄狀態(tài)判斷
這篇文章主要介紹了koa2+vue實(shí)現(xiàn)登陸及登錄狀態(tài)判斷,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-08-08解決vue項(xiàng)目運(yùn)行出現(xiàn)warnings?potentially?fixable?with?the?`--fix
這篇文章主要介紹了解決vue項(xiàng)目運(yùn)行出現(xiàn)warnings?potentially?fixable?with?the?`--fix`?option的報(bào)錯(cuò)問(wèn)題,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2021-11-11詳解從新建vue項(xiàng)目到引入組件Element的方法
本篇文章主要介紹了詳解從新建vue項(xiàng)目到引入組件Element的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08Vue通過(guò)Blob對(duì)象實(shí)現(xiàn)導(dǎo)出Excel功能示例代碼
這篇文章主要介紹了Vue通過(guò)Blob對(duì)象實(shí)現(xiàn)導(dǎo)出Excel功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07vue配置請(qǐng)求本地json數(shù)據(jù)的方法
這篇文章主要介紹了vue配置請(qǐng)求本地json數(shù)據(jù)的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04