实例介绍
【实例简介】uniapp前端框架
【核心代码】
<template>
<view>
<block v-for="(item ,index) in info" :key="index">
<uni-card :title="item.title" :thumbnail="'/static/images/charts/' item.images" bgcolor='#f7f7fa' :images="item.demo" :texts="item.texts" :note="'Tips:' item.tips" @click="clickCard(item.url)">
</uni-card>
</block>
</view>
</template>
<script>
import uniCard from '@/components/uni-ui/uni-card/uni-card.vue'
export default {
data() {
return {
info: [{
title: 'scroll-view中使用',
texts:'本示例为演示在scroll-view中使用uChart的用法。',
images:'column2.png',
url:'demo/scroll',
demo:null,
tips:'点击查看示例'
},{
title: '(v-for)组件内使用示例',
texts:'通过v-for生成组件的示例，支持不固定的图表类型，支持拖拽，支持动态更新组件图表。',
images:'rect.png',
url:'demo/component',
tips:'点击查看示例'
},{
title: 'K线图与柱状图联动',
images:'candle.png',
url:'demo/candle',
demo:'/static/images/demo/demo3.png',
tips:'更新中'
},{
title: '单页多图表好性能',
images:'mix2.png',
url:'demo/index',
demo:'/static/images/demo/demo2.png',
tips:'点击查看示例'
},
/*
, {
title: '自定义图表背景颜色',
images:'line.png',
url:'demo/bgcolor',
demo:null,
tips:'更新中'
},{
title: 'tab加swpier中引用多图表',
images:'bar-contrast.png',
url:'demo/swpier',
demo:null,
tips:'更新中'
},
*/
],
};
},
components: {
uniCard
},
methods: {
clickCard(url) {
uni.navigateTo({
url: url
});
}
}
}
</script>
<style>
page{background-color: #f4f5f6;}
</style>
【文件目录】
uCharts
├── LICENSE
├── README.md
├── uCharts-for-H5
│ ├── u-charts.js
│ ├── u-charts.min.js
│ └── 使用方法在根目录《示例项目》文件夹.md
├── uCharts-for-QQ小程序（原生）
│ ├── u-charts.js
│ ├── u-charts.min.js
│ └── 使用方法在根目录《示例项目》文件夹.md
├── uCharts-for-UNIAPP（跨端）
│ ├── u-charts.js
│ ├── u-charts.min.js
│ └── 使用方法在根目录《示例项目》文件夹.md
├── uCharts-for-头条小程序（原生）
│ ├── u-charts.js
│ ├── u-charts.min.js
│ └── 使用方法在根目录《示例项目》文件夹.md
├── uCharts-for-微信小程序（原生）
│ ├── u-charts.js
│ ├── u-charts.min.js
│ └── 使用方法在根目录《示例项目》文件夹.md
├── uCharts-for-百度小程序（原生）
│ ├── u-charts.js
│ ├── u-charts.min.js
│ └── 使用方法在根目录《示例项目》文件夹.md
├── uCharts-for-支付宝小程序（原生）
│ ├── u-charts.js
│ ├── u-charts.min.js
│ └── 使用方法在根目录《示例项目》文件夹.md
└── 示例项目
├── H5
│ ├── README.md
│ ├── assets
│ │ └── js
│ │ ├── jquery-2.2.1.min.js
│ │ └── u-charts.js
│ ├── demo.html
│ └── pie.html
├── QQ小程序（原生）
│ ├── README.md
│ ├── app.js
│ ├── app.json
│ ├── app.qss
│ ├── pages
│ │ ├── index
│ │ │ ├── index.js
│ │ │ ├── index.json
│ │ │ ├── index.qml
│ │ │ └── index.qss
│ │ └── ucharts
│ │ └── u-charts.js
│ └── project.config.json
├── UNIAPP
│ ├── App.vue
│ ├── README.md
│ ├── common
│ │ ├── checker.js
│ │ ├── data.json
│ │ ├── documents.js
│ │ └── qiun.css
│ ├── components
│ │ ├── u-charts
│ │ │ ├── component.vue
│ │ │ ├── u-charts.js
│ │ │ └── u-charts.min.js
│ │ └── uni-ui
│ │ ├── uni-badge
│ │ │ ├── readme.md
│ │ │ └── uni-badge.vue
│ │ ├── uni-card
│ │ │ ├── readme.md
│ │ │ └── uni-card.vue
│ │ ├── uni-grid
│ │ │ └── uni-grid.vue
│ │ ├── uni-icon
│ │ │ ├── readme.md
│ │ │ └── uni-icon.vue
│ │ ├── uni-notice-bar
│ │ │ ├── readme.md
│ │ │ └── uni-notice-bar.vue
│ │ └── uni-swiper-dot
│ │ └── uni-swiper-dot.vue
│ ├── main.js
│ ├── manifest.json
│ ├── pages
│ │ ├── app
│ │ │ ├── demo
│ │ │ │ ├── candle.vue
│ │ │ │ ├── component.vue
│ │ │ │ ├── index.vue
│ │ │ │ └── scroll.vue
│ │ │ └── index.vue
│ │ ├── basic
│ │ │ ├── arcbar
│ │ │ │ ├── arcbar.vue
│ │ │ │ └── mix.vue
│ │ │ ├── area
│ │ │ │ ├── area.vue
│ │ │ │ └── time.vue
│ │ │ ├── candle
│ │ │ │ └── candle.vue
│ │ │ ├── column
│ │ │ │ ├── column-scroll.vue
│ │ │ │ ├── column.vue
│ │ │ │ ├── mark-line.vue
│ │ │ │ ├── meter.vue
│ │ │ │ ├── rotate.vue
│ │ │ │ └── stack.vue
│ │ │ ├── funnel
│ │ │ │ └── funnel.vue
│ │ │ ├── gauge
│ │ │ │ └── gauge.vue
│ │ │ ├── index.vue
│ │ │ ├── line
│ │ │ │ ├── curve.vue
│ │ │ │ ├── line-scroll.vue
│ │ │ │ ├── line.vue
│ │ │ │ └── rotate.vue
│ │ │ ├── map
│ │ │ │ └── map.vue
│ │ │ ├── mix
│ │ │ │ └── mix.vue
│ │ │ ├── pie
│ │ │ │ ├── pie.vue
│ │ │ │ ├── ring.vue
│ │ │ │ └── rose.vue
│ │ │ ├── radar
│ │ │ │ └── radar.vue
│ │ │ └── word
│ │ │ └── word.vue
│ │ ├── doc
│ │ │ ├── index.vue
│ │ │ └── view.vue
│ │ └── user
│ │ ├── about.vue
│ │ ├── account.vue
│ │ ├── feedback.vue
│ │ ├── index.vue
│ │ ├── login.vue
│ │ ├── message.vue
│ │ ├── register.vue
│ │ └── service.vue
│ ├── pages.json
│ ├── static
│ │ ├── images
│ │ │ ├── alert-warning.png
│ │ │ ├── avatar.png
│ │ │ ├── banner
│ │ │ │ ├── banner1.png
│ │ │ │ └── banner2.png
│ │ │ ├── charts
│ │ │ │ ├── arc-bar.png
│ │ │ │ ├── arcbar.png
│ │ │ │ ├── area-percen.png
│ │ │ │ ├── area.png
│ │ │ │ ├── area2.png
│ │ │ │ ├── bar-contrast.png
│ │ │ │ ├── bar-group.png
│ │ │ │ ├── bar-percent.png
│ │ │ │ ├── bar-stack.png
│ │ │ │ ├── bubble.png
│ │ │ │ ├── candle.png
│ │ │ │ ├── cloud.png
│ │ │ │ ├── column-fall.png
│ │ │ │ ├── column-group.png
│ │ │ │ ├── column-meter.png
│ │ │ │ ├── column-percent.png
│ │ │ │ ├── column-scroll.png
│ │ │ │ ├── column-stack.png
│ │ │ │ ├── column.png
│ │ │ │ ├── column2.png
│ │ │ │ ├── funnel.png
│ │ │ │ ├── gauge.png
│ │ │ │ ├── line-curve.png
│ │ │ │ ├── line-rotate.png
│ │ │ │ ├── line-scroll.png
│ │ │ │ ├── line.png
│ │ │ │ ├── map.png
│ │ │ │ ├── mark-line.png
│ │ │ │ ├── mix.png
│ │ │ │ ├── mix2.png
│ │ │ │ ├── pie.png
│ │ │ │ ├── point.png
│ │ │ │ ├── pyramid.png
│ │ │ │ ├── radar.png
│ │ │ │ ├── rect.png
│ │ │ │ ├── ring.png
│ │ │ │ ├── ring2.png
│ │ │ │ └── rose.png
│ │ │ ├── demo
│ │ │ │ ├── demo1.png
│ │ │ │ ├── demo2.png
│ │ │ │ └── demo3.png
│ │ │ ├── none.jpg
│ │ │ ├── qrcode.png
│ │ │ └── tabbar
│ │ │ ├── app-act.png
│ │ │ ├── app.png
│ │ │ ├── doc-act.png
│ │ │ ├── doc.png
│ │ │ ├── home-act.png
│ │ │ ├── home.png
│ │ │ ├── user-act.png
│ │ │ └── user.png
│ │ └── logo.png
│ ├── uni.scss
│ └── unpackage
│ └── dist
│ └── dev
│ └── mp-weixin
│ ├── app.js
│ ├── app.json
│ ├── app.wxss
│ ├── common
│ │ ├── main.js
│ │ ├── main.wxss
│ │ ├── runtime.js
│ │ └── vendor.js
│ ├── components
│ │ ├── u-charts
│ │ │ ├── component.js
│ │ │ ├── component.json
│ │ │ ├── component.wxml
│ │ │ └── component.wxss
│ │ └── uni-ui
│ │ ├── uni-card
│ │ │ ├── uni-card.js
│ │ │ ├── uni-card.json
│ │ │ ├── uni-card.wxml
│ │ │ └── uni-card.wxss
│ │ ├── uni-grid
│ │ │ ├── uni-grid.js
│ │ │ ├── uni-grid.json
│ │ │ ├── uni-grid.wxml
│ │ │ └── uni-grid.wxss
│ │ ├── uni-icon
│ │ │ ├── uni-icon.js
│ │ │ ├── uni-icon.json
│ │ │ ├── uni-icon.wxml
│ │ │ └── uni-icon.wxss
│ │ ├── uni-notice-bar
│ │ │ ├── uni-notice-bar.js
│ │ │ ├── uni-notice-bar.json
│ │ │ ├── uni-notice-bar.wxml
│ │ │ └── uni-notice-bar.wxss
│ │ └── uni-swiper-dot
│ │ ├── uni-swiper-dot.js
│ │ ├── uni-swiper-dot.json
│ │ ├── uni-swiper-dot.wxml
│ │ └── uni-swiper-dot.wxss
│ ├── pages
│ │ ├── app
│ │ │ ├── demo
│ │ │ │ ├── candle.js
│ │ │ │ ├── candle.json
│ │ │ │ ├── candle.wxml
│ │ │ │ ├── candle.wxss
│ │ │ │ ├── component.js
│ │ │ │ ├── component.json
│ │ │ │ ├── component.wxml
│ │ │ │ ├── component.wxss
│ │ │ │ ├── index.js
│ │ │ │ ├── index.json
│ │ │ │ ├── index.wxml
│ │ │ │ ├── index.wxss
│ │ │ │ ├── scroll.js
│ │ │ │ ├── scroll.json
│ │ │ │ ├── scroll.wxml
│ │ │ │ └── scroll.wxss
│ │ │ ├── index.js
│ │ │ ├── index.json
│ │ │ ├── index.wxml
│ │ │ └── index.wxss
│ │ ├── basic
│ │ │ ├── arcbar
│ │ │ │ ├── arcbar.js
│ │ │ │ ├── arcbar.json
│ │ │ │ ├── arcbar.wxml
│ │ │ │ ├── arcbar.wxss
│ │ │ │ ├── mix.js
│ │ │ │ ├── mix.json
│ │ │ │ ├── mix.wxml
│ │ │ │ └── mix.wxss
│ │ │ ├── area
│ │ │ │ ├── area.js
│ │ │ │ ├── area.json
│ │ │ │ ├── area.wxml
│ │ │ │ ├── area.wxss
│ │ │ │ ├── time.js
│ │ │ │ ├── time.json
│ │ │ │ ├── time.wxml
│ │ │ │ └── time.wxss
│ │ │ ├── candle
│ │ │ │ ├── candle.js
│ │ │ │ ├── candle.json
│ │ │ │ ├── candle.wxml
│ │ │ │ └── candle.wxss
│ │ │ ├── column
│ │ │ │ ├── column-scroll.js
│ │ │ │ ├── column-scroll.json
│ │ │ │ ├── column-scroll.wxml
│ │ │ │ ├── column-scroll.wxss
│ │ │ │ ├── column.js
│ │ │ │ ├── column.json
│ │ │ │ ├── column.wxml
│ │ │ │ ├── column.wxss
│ │ │ │ ├── mark-line.js
│ │ │ │ ├── mark-line.json
│ │ │ │ ├── mark-line.wxml
│ │ │ │ ├── mark-line.wxss
│ │ │ │ ├── meter.js
│ │ │ │ ├── meter.json
│ │ │ │ ├── meter.wxml
│ │ │ │ ├── meter.wxss
│ │ │ │ ├── rotate.js
│ │ │ │ ├── rotate.json
│ │ │ │ ├── rotate.wxml
│ │ │ │ ├── rotate.wxss
│ │ │ │ ├── stack.js
│ │ │ │ ├── stack.json
│ │ │ │ ├── stack.wxml
│ │ │ │ └── stack.wxss
│ │ │ ├── funnel
│ │ │ │ ├── funnel.js
│ │ │ │ ├── funnel.json
│ │ │ │ ├── funnel.wxml
│ │ │ │ └── funnel.wxss
│ │ │ ├── gauge
│ │ │ │ ├── gauge.js
│ │ │ │ ├── gauge.json
│ │ │ │ ├── gauge.wxml
│ │ │ │ └── gauge.wxss
│ │ │ ├── index.js
│ │ │ ├── index.json
│ │ │ ├── index.wxml
│ │ │ ├── index.wxss
│ │ │ ├── line
│ │ │ │ ├── curve.js
│ │ │ │ ├── curve.json
│ │ │ │ ├── curve.wxml
│ │ │ │ ├── curve.wxss
│ │ │ │ ├── line-scroll.js
│ │ │ │ ├── line-scroll.json
│ │ │ │ ├── line-scroll.wxml
│ │ │ │ ├── line-scroll.wxss
│ │ │ │ ├── line.js
│ │ │ │ ├── line.json
│ │ │ │ ├── line.wxml
│ │ │ │ ├── line.wxss
│ │ │ │ ├── rotate.js
│ │ │ │ ├── rotate.json
│ │ │ │ ├── rotate.wxml
│ │ │ │ └── rotate.wxss
│ │ │ ├── map
│ │ │ │ ├── map.js
│ │ │ │ ├── map.json
│ │ │ │ ├── map.wxml
│ │ │ │ └── map.wxss
│ │ │ ├── mix
│ │ │ │ ├── mix.js
│ │ │ │ ├── mix.json
│ │ │ │ ├── mix.wxml
│ │ │ │ └── mix.wxss
│ │ │ ├── pie
│ │ │ │ ├── pie.js
│ │ │ │ ├── pie.json
│ │ │ │ ├── pie.wxml
│ │ │ │ ├── pie.wxss
│ │ │ │ ├── ring.js
│ │ │ │ ├── ring.json
│ │ │ │ ├── ring.wxml
│ │ │ │ ├── ring.wxss
│ │ │ │ ├── rose.js
│ │ │ │ ├── rose.json
│ │ │ │ ├── rose.wxml
│ │ │ │ └── rose.wxss
│ │ │ ├── radar
│ │ │ │ ├── radar.js
│ │ │ │ ├── radar.json
│ │ │ │ ├── radar.wxml
│ │ │ │ └── radar.wxss
│ │ │ └── word
│ │ │ ├── word.js
│ │ │ ├── word.json
│ │ │ ├── word.wxml
│ │ │ └── word.wxss
│ │ ├── doc
│ │ │ ├── index.js
│ │ │ ├── index.json
│ │ │ ├── index.wxml
│ │ │ ├── index.wxss
│ │ │ ├── view.js
│ │ │ ├── view.json
│ │ │ ├── view.wxml
│ │ │ └── view.wxss
│ │ └── user
│ │ ├── about.js
│ │ ├── about.json
│ │ ├── about.wxml
│ │ ├── about.wxss
│ │ ├── account.js
│ │ ├── account.json
│ │ ├── account.wxml
│ │ ├── account.wxss
│ │ ├── feedback.js
│ │ ├── feedback.json
│ │ ├── feedback.wxml
│ │ ├── feedback.wxss
│ │ ├── index.js
│ │ ├── index.json
│ │ ├── index.wxml
│ │ ├── index.wxss
│ │ ├── login.js
│ │ ├── login.json
│ │ ├── login.wxml
│ │ ├── login.wxss
│ │ ├── message.js
│ │ ├── message.json
│ │ ├── message.wxml
│ │ ├── message.wxss
│ │ ├── service.js
│ │ ├── service.json
│ │ ├── service.wxml
│ │ └── service.wxss
│ ├── project.config.json
│ ├── sitemap.json
│ └── static
│ ├── images
│ │ ├── alert-warning.png
│ │ ├── avatar.png
│ │ ├── banner
│ │ │ ├── banner1.png
│ │ │ └── banner2.png
│ │ ├── charts
│ │ │ ├── arc-bar.png
│ │ │ ├── arcbar.png
│ │ │ ├── area-percen.png
│ │ │ ├── area.png
│ │ │ ├── area2.png
│ │ │ ├── bar-contrast.png
│ │ │ ├── bar-group.png
│ │ │ ├── bar-percent.png
│ │ │ ├── bar-stack.png
│ │ │ ├── bubble.png
│ │ │ ├── candle.png
│ │ │ ├── cloud.png
│ │ │ ├── column-fall.png
│ │ │ ├── column-group.png
│ │ │ ├── column-meter.png
│ │ │ ├── column-percent.png
│ │ │ ├── column-scroll.png
│ │ │ ├── column-stack.png
│ │ │ ├── column.png
│ │ │ ├── column2.png
│ │ │ ├── funnel.png
│ │ │ ├── gauge.png
│ │ │ ├── line-curve.png
│ │ │ ├── line-rotate.png
│ │ │ ├── line-scroll.png
│ │ │ ├── line.png
│ │ │ ├── map.png
│ │ │ ├── mark-line.png
│ │ │ ├── mix.png
│ │ │ ├── mix2.png
│ │ │ ├── pie.png
│ │ │ ├── point.png
│ │ │ ├── pyramid.png
│ │ │ ├── radar.png
│ │ │ ├── rect.png
│ │ │ ├── ring.png
│ │ │ ├── ring2.png
│ │ │ └── rose.png
│ │ ├── demo
│ │ │ ├── demo1.png
│ │ │ ├── demo2.png
│ │ │ └── demo3.png
│ │ ├── none.jpg
│ │ ├── qrcode.png
│ │ └── tabbar
│ │ ├── app-act.png
│ │ ├── app.png
│ │ ├── doc-act.png
│ │ ├── doc.png
│ │ ├── home-act.png
│ │ ├── home.png
│ │ ├── user-act.png
│ │ └── user.png
│ └── logo.png
├── 头条小程序（原生）
│ ├── README.md
│ ├── app.js
│ ├── app.json
│ ├── app.ttss
│ ├── pages
│ │ ├── index
│ │ │ ├── index.js
│ │ │ ├── index.ttml
│ │ │ └── index.ttss
│ │ └── ucharts
│ │ └── u-charts.js
│ └── project.config.json
├── 微信小程序（原生）
│ ├── README.md
│ ├── app.js
│ ├── app.json
│ ├── app.wxss
│ ├── pages
│ │ ├── index
│ │ │ ├── index.js
│ │ │ ├── index.json
│ │ │ ├── index.wxml
│ │ │ └── index.wxss
│ │ └── ucharts
│ │ └── u-charts.js
│ ├── project.config.json
│ └── sitemap.json
├── 百度小程序（原生）
│ ├── README.md
│ ├── app.js
│ ├── app.json
│ ├── images
│ │ └── smartapp.png
│ ├── pages
│ │ ├── index
│ │ │ ├── index.css
│ │ │ ├── index.js
│ │ │ ├── index.json
│ │ │ └── index.swan
│ │ └── ucharts
│ │ └── u-charts.js
│ ├── pkginfo.json
│ └── project.swan.json
└── 支付宝小程序（原生）
├── README.md
├── app.acss
├── app.js
├── app.json
├── pages
│ ├── index
│ │ ├── index.acss
│ │ ├── index.axml
│ │ ├── index.js
│ │ └── index.json
│ └── ucharts
│ └── u-charts.js
└── snapshot.png
104 directories, 443 files
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论