1:在项目里面安装折线图
cnpm install echarts --s
2:在需要用图表的地方引入
import echarts from 'echarts'
3:打开echarts.vue
继续写代码,代码如下:
<template>
<div>
<!--为echarts准备一个具备大小的容器dom-->
<div id="main" style="width: 600px;height: 400px;"></div>
</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
}]
})
}
},
//调用
mounted() {
this.$nextTick(function() {
this.drawLine('main')
})
}
}
</script>
4:这个时候,可以看到,加载出的折线图了,后面可以继续进行完善。
成功显示折线图
5:以上的数据是通过变量构造的
实际项目里面
需要用到axios请求后端接口
那么,我们今天就把接口写在mock里面吧
首先在mock里面新建一个echarts.json
{
"categories": [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12"
],
"data": [
3,
2,
4,
4,
5
]
}