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_915921431 小时前
iOS 26 电耗监测与优化,耗电问题实战 + 多工具 辅助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915921431 小时前
苹果软件混淆与 iOS 应用加固白皮书,IPA 文件加密、反编译防护与无源码混淆方案全解析
android·ios·小程序·https·uni-app·iphone·webview
anyup1 小时前
🔥开源零配置!10 分钟上手:create-uni + uView Pro 快速搭建企业级 uni-app 项目
前端·前端框架·uni-app
你真的可爱呀1 小时前
uniapp学习【vue3在uniapp中语法,使用element,使用uView UI】
学习·uni-app
保利威直播2 小时前
保利威uniapp直播插件功能清单-开播端/主播端/观看端(持续测试更新中...)
uni-app·直播·直播平台
dcloud_jibinbin3 小时前
【uniapp】体验优化:开源工具集 uni-toolkit 发布
前端·webpack·性能优化·小程序·uni-app·vue
前端小菜袅3 小时前
uniapp配置自动导入uni生命周期等方法
前端·javascript·uni-app
焚 城3 小时前
UniApp中Flex布局学习
学习·uni-app
你真的可爱呀3 小时前
uniapp学习【整体实践】
前端·学习·uni-app·实践