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

相关推荐
willow2 天前
uniapp实战
uni-app
只会cv的前端攻城狮2 天前
兼容性地狱-Uniapp钉钉小程序环境隔离踩坑实录
前端·uni-app
这个实现不了4 天前
echarts实例:可堆叠的立体柱形图+特殊symbol的折线图
echarts
这个实现不了4 天前
echarts实例:进度条加描述
echarts
这个实现不了4 天前
echarts实例:最高最低标识-并列立体柱形图
echarts
这个实现不了4 天前
echarts实例:双轴水平条形图(菱形和三角形的symbol)
echarts
这个实现不了4 天前
echarts实例:雷达图做出时钟效果
echarts
这个实现不了4 天前
echarts实例:圆环内衬图
echarts
codingWhat4 天前
小程序里「嵌」H5:一套完整可落地的 WebView 集成方案
前端·uni-app·webview
小时前端5 天前
微信小程序选不了本地文件?用 web-view + H5 一招搞定
前端·微信小程序·uni-app