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_9159184127 分钟前
iOS 手机抓包软件怎么选?HTTPS 调试、TCP 数据流分析与多工具组合的完整实践
android·ios·智能手机·小程序·https·uni-app·iphone
游戏开发爱好者81 小时前
iOS 应用上架的工程实践复盘,从构建交付到审核通过的全流程拆解
android·ios·小程序·https·uni-app·iphone·webview
00后程序员张1 小时前
iOS App 如何上架,从准备到发布的完整流程方法论
android·macos·ios·小程序·uni-app·cocoa·iphone
Json____1 小时前
uni-app-数码购物商城h5手机端-前端静态网页
前端·uni-app·商城
wx_xsooop1 小时前
iOS 上架4.3a 被拒【uniapp专讲】
flutter·ios·uni-app·uniapp
脾气有点小暴19 小时前
uniapp滚动容器冲突
uni-app
鱼樱前端21 小时前
uni-app开发app之前提须知(IOS/安卓)
前端·uni-app
二狗mao1 天前
Uniapp使用websocket进行ai回答的流式输出
websocket·网络协议·uni-app
javaの历练之路2 天前
基于 SpringBoot+Vue2 的前后端分离博客管理系统(含 WebSocket+ECharts)
spring boot·websocket·echarts
良逍Ai出海2 天前
Build in Public|为什么我开始做一款相册清理 App(听说有竞品年收益40W)
ios·uni-app·ai编程·coding