uniapp使用百度图表echarts的简要过程记录

uniapp中使用百度图表echarts的pie饼图简要过程记录

比如要实现如下图的功能:

1.安装echarts,在项目目录中运行

npm i echarts

2.模板代码:

<div id="chartbox1" style="width: 100%;height:100%;min-height:200px;"></div>

3.js调用

import * as echarts from "echarts"

var that = this;

var myChart = echarts.init(document.getElementById("chartbox1"));

// 指定图表的配置项和数据

var option = {

tooltip: {

trigger: 'item'

},

series: [

{

name: '销量',

type: 'pie',

data: [

{value: 20, name: '基金'},

{value: 735, name: 'GC001'},

{value: 580, name: '股票'}

]

}

]

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

相关推荐
00后程序员张8 小时前
iOS 上架费用全解析 开发者账号、App 审核、工具使用与开心上架(Appuploader)免 Mac 成本优化指南
android·macos·ios·小程序·uni-app·cocoa·iphone
前端与小赵15 小时前
uni-app开发安卓app时控制屏幕常亮不息屏
android·gitee·uni-app
2501_9160088917 小时前
HTTPS 请求抓包,从原理到落地排查的工程化指南(Charles / tcpdump / Wireshark / Sniffmaster)
ios·小程序·https·uni-app·wireshark·iphone·tcpdump
xiaohe060117 小时前
🥳 Uni ECharts 2.1 发布:正式支持鸿蒙,零成本迁移、全平台兼容、跨端开发零负担!
vue.js·uni-app·echarts
2501_915909061 天前
WebView 调试工具全解析,解决“看不见的移动端问题”
android·ios·小程序·https·uni-app·iphone·webview
2501_915106321 天前
App 怎么上架 iOS?从准备资料到开心上架(Appuploader)免 Mac 上传的完整实战流程指南
android·macos·ios·小程序·uni-app·iphone·webview
行走的陀螺仪1 天前
uni-app + Vue3 实现折叠文本(超出省略 + 展开收起)
前端·javascript·css·uni-app·vue3
小禾青青1 天前
uniapp安卓打包遇到报错:Uncaught SyntaxError: Invalid regular expression: /[\p{L}\p{N}]/
android·uni-app
前端_Danny1 天前
使用 ECharts + ECharts-GL 生成 3D 环形图
3d·信息可视化·echarts
环信即时通讯云1 天前
实现小程序 uniApp 输入框展示自定义表情包
小程序·uni-app