根據(jù)原型需要陈醒,先來寫一個統(tǒng)計圖纯丸,其實和vue實現(xiàn)一個統(tǒng)計圖的方法是一樣的锉走。axios請求Echarts折線圖
http://www.reibang.com/p/9f872bee0e6a
1:在HBuilderX里面
下載一個內(nèi)置的終端插件,或者直接使用cmd命令
2:打開終端记劈,在項目里面安裝折線圖
cnpm install echarts --s
2:在需要用圖表的地方引入
import echarts from 'echarts'
3:寫vue頁面代碼
<template>
<view>
<!--為echarts準備一個具備大小的容器dom-->
<view id="main" style="width: 720rpx;height: 600rpx;"></view>
</view >
</template>
<script>
import echarts from 'echarts'
export default {
data() {
return {
name: '',
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>