uniapp 小程序echarts 使用

冷不防 2021-09-18 11:50 1004阅读 0赞

1.创建一个文件夹 **npm init**

**2.下载类库 **

npm install echarts mpvue-echarts --save

3.将这三个文件夹复制粘贴到项目 **echarts**、**mpvue-echats** 、**zrender**

**4.**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05laWxfMTk5Mw_size_16_color_FFFFFF_t_70][]

5.

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05laWxfMTk5Mw_size_16_color_FFFFFF_t_70 1][]

<template>
    	<view class="content">
    		<image class="logo" src="../../static/logo.png"></image>
    		<view>
    			<text class="title">{
       {title}}</text>
    			<view class="iconfont icon-wode1" style="width: 50px;height: 50px;"></view>
    		</view>
    
    		<view class="box1">
    			
    			<mpvue-echarts canvasId="chat1" :echarts="echarts" :onInit="fn1OnInit" />
    		</view>
    
    		<view class="box1">
    			<mpvue-echarts canvasId="chat2" :echarts="echarts" :onInit="fn2OnInit" />
    		</view>
    
    	</view>
    </template>

6.

<script>
    	//导入库
    	import * as echarts from 'echarts'
    	import mpvueEcharts from 'mpvue-echarts'
    
    	//命名一个方法名称，方便自己识别，也方便多个图表引用时易区别。
    	//切记这方法不能写到export default中。
    	function fn1(canvas, width, height) {
    		const chart = echarts.init(canvas, null, {
    			width: width,
    			height: height
    		})
    		canvas.setChart(chart);
    
    		let option = {
    			title: { 
    				text: '未来一周气温变化',
    				subtext: '纯属虚构'
    			},
    			tooltip: {
    				trigger: 'axis'
    			},
    			legend: {
    				data: ['最高气温', '最低气温']
    			},
    			toolbox: {
    				show: true,
    				feature: {
    					mark: {
    						show: true
    					},
    					dataView: {
    						show: true,
    						readOnly: false
    					},
    					magicType: {
    						show: true,
    						type: ['line', 'bar']
    					},
    					restore: {
    						show: true
    					},
    					saveAsImage: {
    						show: true
    					}
    				}
    			},
    			calculable: true,
    			xAxis: [{
    				type: 'category',
    				boundaryGap: false,
    				data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    			}],
    			yAxis: [{
    				type: 'value',
    				axisLabel: {
    					formatter: '{value} °C'
    				}
    			}],
    			series: [{
    					name: '最高气温',
    					type: 'line',
    					data: [11, 11, 15, 13, 12, 13, 10],
    					markPoint: {
    						data: [{
    								type: 'max',
    								name: '最大值'
    							},
    							{
    								type: 'min',
    								name: '最小值'
    							}
    						]
    					},
    					markLine: {
    						data: [{
    							type: 'average',
    							name: '平均值'
    						}]
    					}
    				},
    				{
    					name: '最低气温',
    					type: 'line',
    					data: [1, -2, 2, 5, 3, 2, 0],
    					markPoint: {
    						data: [{
    							name: '周最低',
    							value: -2,
    							xAxis: 1,
    							yAxis: -1.5
    						}]
    					},
    					markLine: {
    						data: [{
    							type: 'average',
    							name: '平均值'
    						}]
    					}
    				}
    			]
    		};
    
    
    		chart.setOption(option)
    		return chart
    	};
    
    
    	function fn2(canvas, width, height) {
    		const chart = echarts.init(canvas, null, {
    			width: width,
    			height: height
    		})
    		canvas.setChart(chart);
    
    		var option = {
    			// ...一些表格配置（ 参考echarts官方文档根据自己需求配置即可）
    		}
    
    		chart.setOption(option)
    		return chart
    	};
    
    
    	export default {
    		components: {
    			mpvueEcharts
    		},
    		data() {
    			return {
    				title: 'Hello',
    				//初始化图表
    				echarts,
    				//图表数据绑定（我们定义的两个方法绑定）
    				fn1OnInit: fn1,
    				fn2OnInit: fn2
    			}
    		},
    		onLoad() {
    
    		},
    		methods: {
    
    		}
    	}
    </script>
    
    <style>
    	.content {
    		text-align: center;
    		height: 400upx;
    	}
    
    	.logo {
    		height: 200upx;
    		width: 200upx;
    		margin-top: 200upx;
    	}
    
    	.title {
    		font-size: 36upx;
    		color: #8f8f94;
    	}
    
    	.box1 {
    		width: 100%;
    		height: 100%;
    	}
    </style>

前端PHP交流群：836383650

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05laWxfMTk5Mw_size_16_color_FFFFFF_t_70]: /images/20210724/40a8fd9a23604a4dbee05edbe9d6fc38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05laWxfMTk5Mw_size_16_color_FFFFFF_t_70 1]: /images/20210724/ae1c8e80db554494849c26f81f4c6390.png

发表评论取消回复

表情：

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

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

相关阅读

相关使用Uniapp开发小程序注意事项

1. 在新增页面之后，需要重新运行小程序，才可生效，点击运行-运行到小程序模拟器-微信开发者工具 ![20210428105827332.png][] 未完待续

朱雀/ 2023年01月17日 08:47/ 0 赞/ 155 阅读

相关 uniapp 小程序打包发布

1、在项目的manifest.json中选择小程序,配置AppID ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_s

怼烎@/ 2022年12月15日 12:41/ 0 赞/ 346 阅读

相关小程序里面怎么使用Echarts图表组件？

1：下载 GitHub 上的项目 https://github.com/ecomfe/echarts-for-weixin ![8143e4bf8edb5c03f32eb

心已赠人/ 2022年12月05日 10:21/ 0 赞/ 167 阅读

相关 uniapp 小程序图标不显示

不要把icon写在text里面不然小程序显示不了， H5可以显示 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shado

ゝ一世哀愁。/ 2022年11月01日 05:45/ 0 赞/ 519 阅读

相关 uniapp+echarts微信小程序实现中国地图

uniapp+echarts微信小程序实现中国地图前言需求问题 1、按原文章步骤下载文件，没有map文件 2、地图没有颜

落日映苍穹つ/ 2022年09月15日 12:44/ 0 赞/ 678 阅读

相关微信小程序使用echarts以及tooltip功能

const app = getApp() import as echarts from '../../components/ec-canvas/echarts

谁践踏了优雅/ 2022年08月29日 15:52/ 0 赞/ 904 阅读

相关小程序echarts太大

当在小程序里面使用echarts，发现项目过大的时候，可以在线定制（[https://echarts.baidu.com/builder.html][https_ech

谁践踏了优雅/ 2022年04月27日 22:52/ 0 赞/ 256 阅读

相关 uniapp 小程序echarts 使用

1.创建一个文件夹 npm init 2.下载类库 npm install echarts mpvue-echarts --save 3.将这三个文件夹复制粘贴

冷不防/ 2021年09月18日 11:50/ 0 赞/ 1005 阅读

相关微信小程序中使用Echarts统计图

效果图 ![在这里插入图片描述][20201105103346917.gif_pic_left] 注意：ec-canvas 一定要在 wxss 文件里设置宽和

旧城等待，/ 2021年09月02日 09:50/ 0 赞/ 1292 阅读

相关 uniapp 小程序打包发布

1、在项目的manifest.json中选择小程序,配置AppID 2、在微信小程序后台配置线上合法域名 ![在这里插入图片描述][watermark_type_Z

客官°小女子只卖身不卖艺/ 2021年07月24日 11:10/ 0 赞/ 776 阅读