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

相关推荐
@AfeiyuO20 小时前
Vue3 高德地图
vue·echarts
一壶纱1 天前
UniApp + Pinia 数据持久化
前端·数据库·uni-app
小林攻城狮1 天前
echarts 参考线实现数据项之间的差异值标注
前端·echarts
酒醉的胡铁1 天前
uniapp解决video组件在ios上全屏页面旋转90度,组件旋转180度
ios·uni-app
@AfeiyuO1 天前
Vue3 中国地图
vue·echarts
2501_915918411 天前
iOS App的tcp、udp数据包抓取在实际开发中的使用方式
android·tcp/ip·ios·小程序·udp·uni-app·iphone
_木棠1 天前
uniapp:H5端reLaunch跳转后,返回还有页面存在问题
前端·uni-app
小庄梦蝶1 天前
uniapp增加在线更新的功能---整体
uni-app
带着梦想扬帆启航1 天前
uni-app 全端动态换肤方案 (Vue2 + uView 1.0)
uni-app·uview·换肤·换色·切换主题色
小钟不想敲代码1 天前
uni-app全局文件
uni-app