uni-app学习笔记-实现一个简单统计图（三）

根据原型需要，先来写一个统计图，其实和vue实现一个统计图的方法是一样的。axios请求Echarts折线图
https://www.jianshu.com/p/9f872bee0e6a

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>

uni-app学习笔记-实现一个简单统计图（三）相关推荐

Flutter学习笔记 —— 完成一个简单的新闻展示页
Flutter学习笔记 -- 完成一个简单的新闻展示页前言思路分析案例代码结束语上图前言刚学Flutter不久,今天我们来看看如何使用 Container & ListView实 ...
HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
golang游戏开发学习笔记-开发一个简单的2D游戏(基础篇）
此文写在golang游戏开发学习笔记-创建一个能自由探索的3D世界之后,感兴趣可以先去那篇文章了解一些基础知识,在这篇文章里我们要创建一个简单的2D游戏场景以及配套的人物,并实现人物运动和碰撞检测功能 ...
Windows程序设计学习笔记(1):一个简单的windows程序
<Windows程序设计>(第五版)(美Charles Petzold著) 1 #include<windows.h> 2 3 LRESULT CALLBACK WndProc ...
OpenCascade学习笔记-创建一个简单的OpenCascade单文档
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! Open ...
学习笔记:latex.一个简单的个人实验报告模板及部分语法说明
首先建立一个 my_report.cls 的配置文件.(以后可能会随着使用进行一些修改和补充) \ProvidesClass{my_report}%------------------------ ...
得到app文稿导出_得到app学习笔记作为知识付费者，如何把所学内容快速输出？...
原标题:得到app学习笔记作为知识付费者,如何把所学内容快速输出? 零.引子昨天看到老公票圈更新了一条段子: 我就是那个伪勤奋者,在知识焦虑的胁迫下,这些年买了不知多少视频.微课.教程还有得到专栏. ...
PHP学习笔记03：简单网上调查站点
PHP学习笔记03:简单网上调查站点网上调查站点由两个页面构成.第一个页面(vote.html文件)是一份问卷,问卷上只有一个问题"开发MySQL应用程序你最喜欢哪种编程语言?" ...
Flutter高级进阶实战仿哔哩哔哩APP学习笔记
Flutter高级进阶实战仿哔哩哔哩APP学习笔记近年来各大公司对Flutter技能的要求越来越高,甚至设立了专门岗位,但掌握Flutter高阶技能的人才寥寥无几,市面上干货Flutter高阶课程 ...

uni-app学习笔记-实现一个简单统计图（三）

uni-app学习笔记-实现一个简单统计图（三）相关推荐

最新文章

热门文章