uni引入echarts

本文介绍了在uniapp项目中使用echarts的过程,包括放弃npm安装方式,选择uni插件市场的renderjs-echarts-demo作为解决方案,以及如何替换图表option和自定义areaStyle颜色的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在uniapp中使用echart

因为项目需要所以要使用echarts,如果只是想用图表展示数据的话还是推荐ucharts的。

百度过网上的很多方法 npm下载…由于更新问题就放弃了

最后使用的是uni插件市场上的一款插件 –renderjs-echarts-demo下载这个demo 可以看到他主要依靠的是: static/echarts.js 这个文件

当引入你需要的图表时只需要将data中的 option替换成你需要的图表的option即可.

当出现以下情况时 areaStyle 的normal的color需要自定义时

 series: [{
			         name: '注册总量',
			         type: 'line',
			         smooth: true, //是否平滑曲线显示
			         showAllSymbol: true,
			         symbol: 'circle',
			         symbolSize: 6,
			         lineStyle: {
			             normal: {
			                 color: "#fc9332", // 线条颜色
			             },
			         },
			         label: {
			             show: true,
			             position: 'top',
			             textStyle: {
			                 color: '#fc9332',
			             }
			         },
			         itemStyle: {
			             color: "#ffffff",
			             borderColor: "#fc891f",
			             borderWidth: 3
			         },
			         tooltip: {
			             show: false
			         },
			         areaStyle: {
			             normal: {
			                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			                         offset: 0,
			                         color: '#fbe9d9'
			                     },
			                     {
			                         offset: 1,
			                         color: '#efe8e2'
			                     }
			                 ], false),
			             }
			         },
			         data: [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200]
			     }]

只需要在export default 引入

import echarts from '../../static/echarts.js' (ps:根据自己将文件存放位置编写路径)

这样就实现了 uni引入echarts 如有错误之处请大佬指正。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值