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);

相关推荐
2501_9160074711 小时前
深入理解HTTPS对称与非对称加密机制及Charles抓包实践
网络协议·http·ios·小程序·https·uni-app·iphone
小徐_233311 小时前
AI 写 wot-ui 总在猜 API?我们把 Skills、MCP 和 CLI 都配好了
前端·uni-app·ai编程
winfredzhang12 小时前
用 wxPython + ECharts + 阿里矢量地图,做一个可离线兜底的上海雨量看板
前端·javascript·echarts
Liu.77412 小时前
uni-app 组件 uni-easyinput 常见 Bug 及解决方案
uni-app·bug
小徐_23331 天前
uni-app 项目别再从零搭了!3 个 Wot UI 起手模板怎么选?
前端·uni-app
蜡台1 天前
uniapp pdf文件预览组件
pdf·uni-app·合同·pdfh5
瑞瑞小同学1 天前
处理echarts x轴内容过多,重叠问题
前端·javascript·echarts
凡泰AI1 天前
如何借助MCP打通企业APP内部服务:从统一调用到小程序承接
小程序·uni-app·app·mpaas·mcp·小程序容器
华玥作者1 天前
uniapp 万条数据不卡顿:我写了个虚拟列表组件 hy-list,原生支持瀑布流
数据结构·uni-app·list·vue3
这是个栗子1 天前
uni-app 微信小程序开发:常用函数总结(一)
微信小程序·小程序·uni-app·getcurrentpages