根据原型需要,先来写一个统计图,其实和vue实现一个统计图的方法是一样的。axios请求Echarts折线图
1:在HBuilderX里面
下载一个内置的终端插件,或者直接使用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 }] }) } }, //调用 mounted() { this.$nextTick(function() { this.drawLine('main') }) } } </script>