uni-app中使用Echarts绘画图表

叁歲伎倆 2022-01-31 03:25 329阅读 0赞

###### 1、下载安装 ######

npm install echarts mpvue-echarts --save

###### 这时，在node\_modules里面会多出 echarts、mpvue-echats 、zrender 三个目录 ######

（修改，npm下载的不太好用，这里建议直接components里放入文件夹，文件如下：）  
蒜了不如下了，我不会上传文件…先在线求怎么上传文件(ʃƪ ˘ ³˘) 2020-09-15

###### 2、页面引入 ######

业务层

<template>
         	<view class="container">
           		<view>
           			<view class="canvasView">
    					<mpvue-echarts class="ec-canvas" @onInit="lineInit" canvasId="line" ref="lineChart" />
    				</view>
           		</view>
           	</view>
    </template>

逻辑层

<script>
    	import * as echarts from '@/components/echarts/echarts.simple.min.js';
    	import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue';
    	export default {
    		data() {
    			return {
    				updateStatus: false,
    				line: {
    					legend: {
    						data: ['邮件营销']
    					},
    					xAxis: {
    						type: 'category',
    						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    					},
    					yAxis: {
    						type: 'value',
    						data: []
    					},
    					dataZoom: [{
    						type: 'slider',
    						start: 30,
    						end: 100,
    						zoomLock: false,
    					}],
    					grid: {
    						left: 40,
    						right: 40,
    						bottom: 20,
    						top: 40,
    						containLabel: true
    					},
    					series: [{
    						data: [],
    						data: [820, 932, 901, 934, 1290, 1330, 1320],
    						type: 'line',
    						color: ['#5eb4e2'], //折线条的颜色
    					}]
    				}
    			}
    		},
    		methods: {
    			lineInit(e) {
    				let {
    					width,
    					height
    				} = e;
    				let canvas = this.$refs.lineChart.canvas
    				echarts.setCanvasCreator(() => canvas);
    				let lineChart = echarts.init(canvas, null, {
    					width: width,
    					height: height
    				})
    				canvas.setChart(lineChart)
    				lineChart.setOption(this.line)
    				this.$refs.lineChart.setChart(lineChart)
    			},
    		},
    		components: {
    			mpvueEcharts
    		}
    	}
    </script>

样式自己设定

<style>
    
    	.ec-canvas {
    		display: flex;
    		height: 100%;
    		flex: 1;
    	}
    
    	.canvasView {
    		width: 700upx;
    		height: 500upx;
    	}
    	
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，329人围观）

还没有评论，来说两句吧...

相关阅读

相关在vue中使用Echarts图表工具

一、第一步，下载`Echarts`，通过`npm install echarts --save` 或者是 `cnpm install echarts --save` 命令进行下

曾经终败给现在/ 2023年06月25日 10:18/ 0 赞/ 73 阅读

相关如何在vue中使用echart图表

人狠话不多，先上效果图！ ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

川长思鸟来/ 2023年03月13日 05:14/ 0 赞/ 30 阅读

相关 uniapp使用echarts绘制各种图表（附带完整案例）

uniapp中使用echarts方案一、在项目中安装echarts插件 1.实现的效果图

àì夳堔傛蜴生んèń/ 2022年11月24日 14:28/ 0 赞/ 2215 阅读

相关 QT5中使用Echarts图表组件

1 背景介绍自从开发使用Qt后一直寻找一款Qt下的图形控件库，网上有很多推荐的文章推荐使用ChartDirector和QWT，由于以前在Java下使用了比较多的基于WE

Myth丶恋晨/ 2022年08月18日 13:14/ 0 赞/ 532 阅读

相关 Echarts 图表使用（一）

折线图和柱状图对比通过点击Echart 图表右上角的色块可以控制对应图表的显隐。但在多条柱状图中，对应的图形复杂（可以调整柱状图之间的距离解决），不符合图表直观清晰

傷城~/ 2022年05月27日 09:18/ 0 赞/ 339 阅读

相关 Vue中使用echarts图表

一、安装引入echarts插件安装 npm install echarts -S 在main.js中配置引入 // 引入echarts i

水深无声/ 2022年05月19日 04:08/ 0 赞/ 313 阅读

相关 Echarts图表的使用

一次分享会上知道了Echarts这个插件，刚好需要用到就去了解了一下，可以很方便地生成各种图表，在这里简单分享一下如何生成饼状图和柱状图，如果你想要更好的呈现你的图，可以去[E

淡淡的烟草味﹌/ 2022年04月14日 04:37/ 0 赞/ 385 阅读

相关 uni-app中使用Echarts绘画图表

1、下载安装 npm install echarts mpvue-echarts --save 这时，在node\_modules里面会多出 echarts、

叁歲伎倆/ 2022年01月31日 03:25/ 0 赞/ 330 阅读

相关 mpvue - 使用Echarts图表

安装依赖包 npm install echarts vue-echarts --save yarn add echarts mpvue-echarts

蔚落/ 2021年07月26日 12:33/ 0 赞/ 797 阅读

相关 echarts中图表适配

(function () { // 1. 实例化对象 var myChart = echarts.init(document.

曾经终败给现在/ 2021年07月26日 00:00/ 0 赞/ 468 阅读