npm install echarts --save

import echarts from 'echarts'

<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>

<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>