Vue+Echarts實現(xiàn)簡單折線圖

更新時間：2022年03月21日 16:54:41 作者：ZPeng_Yan

這篇文章主要為大家詳細介紹了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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: