Vue+Echarts實現(xiàn)簡單折線圖
本文實例為大家分享了Vue+Echarts實現(xiàn)簡單折線圖的具體代碼,供大家參考,具體內(nèi)容如下
Vue+Echarts實現(xiàn)一個折線圖,打開vue的項目:
1、在項目里面安裝echarts
npm install echarts --save
2、在需要用圖表的地方引入
import echarts from 'echarts'
3、打開my.vue
繼續(xù)寫代碼,代碼如下:
<template> ? ? <!--為echarts準備一個具備大小的容器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>
這個時候,可以看到,加載出的折線圖了,后面可以繼續(xù)進行完善。
這是最基本的折線圖,里面的折線點需要替換的話,要注意一些事情
如下代碼 所示
<template> ? ? <!--為echarts準備一個具備大小的容器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ā)送請求,獲取數(shù)據(jù)(折線點) ? ? ? ? ? ? ?? ?// 發(fā)送請求 要寫在drawLine方法里面,不然的話 opinionData 賦予不上數(shù)據(jù),做無用功 ? ? ? ? ? ? ?? ?// params 里面的是 要向后端傳遞的一些參數(shù),為了獲取數(shù)據(jù)庫中的數(shù)據(jù),要替換成你自己的參數(shù) ? ? ? ? ? ? ? ? let params = {typ:9,id:this.id} ? ? ? ? ? ? ? ? // 這是我個人的 axios 封裝,有興趣的話,可以看我 axios 封裝的文章 ? ? ? ? ? ? ? ? getorder(params).then((result)=>{ ? ? ? ? ? ? ? ? this.temp = result.data.tempdic ? ? ? ? ? ? ? ? // console.log(this.temp) ? ? ? ? ? ? ? ? // 進行賦值 ? ? ? ? ? ? ? ? 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ù)的折線圖了!
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
jenkins自動構(gòu)建發(fā)布vue項目的方法步驟
這篇文章主要介紹了jenkins自動構(gòu)建發(fā)布vue項目的方法步驟,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01vuex+axios+element-ui實現(xiàn)頁面請求loading操作示例
這篇文章主要介紹了vuex+axios+element-ui實現(xiàn)頁面請求loading操作,結(jié)合實例形式分析了vuex+axios+element-ui實現(xiàn)頁面請求過程中l(wèi)oading遮罩層相關(guān)操作技巧與使用注意事項,需要的朋友可以參考下2020-02-02koa2+vue實現(xiàn)登陸及登錄狀態(tài)判斷
這篇文章主要介紹了koa2+vue實現(xiàn)登陸及登錄狀態(tài)判斷,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-08-08解決vue項目運行出現(xiàn)warnings?potentially?fixable?with?the?`--fix
這篇文章主要介紹了解決vue項目運行出現(xiàn)warnings?potentially?fixable?with?the?`--fix`?option的報錯問題,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2021-11-11Vue通過Blob對象實現(xiàn)導(dǎo)出Excel功能示例代碼
這篇文章主要介紹了Vue通過Blob對象實現(xiàn)導(dǎo)出Excel功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07