uniapp小程序echarts插件----秋云 ucharts echarts 高性能跨全端图表组件

首先下载地址如下秋云 ucharts echarts 高性能跨全端图表组件，如果是用uni_modules的形式引入的话，可以在页面上直接使用，不用再import引入,下面是一个示例，切记此插件和scroll-view不可以同时使用，不然会出现图表随滚动条滚动的情况

<template><view style="height:300px"><qiun-data-charts style="height:100%" type="column" :loadingType="0" :eopts="columneopts" :opts="options":chartData=" chartsDataColumn1" :echartsH5="true" :echartsApp="true" @complete="complete" /></view>
</template>
<script>export default {data() {return {//以下配置是个人配置，详细配置可以去查看官网的columneopts: {xAxis: {axisLabel: {color: '#666666'}},seriesTemplate: {itemStyle: {normal: {barBorderRadius: [30, 30, 0, 0]},},barMaxWidth: 20},grid: {left: 10,right: 10},},options: {yAxis: {show: false},legend: {show: false},radiusAxis: {nameTextStyle: {barBorderRadius: [20, 20, 0, 0],}},extra: {column: {"width": 20,barBorderRadius: [30, 30, 0, 0]},bar: {linearType: 'custom',barBorderCircle: true}},seriesTemplate: {itemStyle: {normal: {barBorderRadius: "[30, 30, 0, 0]"}}}},chartsDataColumn1: {},}   },onLoad() {this.getEcharts()},methods:{complete(e) {console.log("渲染完成事件", e);},// 获取echarts数据getEcharts() {this.chartsDataColumn1.series = [];//如果数据要切换更新，这里必须置空this.chartsDataColumn1 = {categories: ["专属粉丝", "普通粉丝", "潜在粉丝"],series: [{name: "粉丝数量",data: [34, 12, 1],color: '#FF7979',style: "curve"}],}}},
}
</script>

uniapp小程序echarts插件----秋云 ucharts echarts 高性能跨全端图表组件相关推荐

【ucharts】uniapp -- 使用秋云 ucharts echarts高性能跨全端图表组件
uCharts简介 uCharts是一款基于canvas API开发的适用于所有前端应用的图表库,开发者编写一套代码,可运行到 Web.iOS.Android(基于 uni-app / taro ). ...
uni-app如何导入秋云 ucharts echarts 高性能跨全端图表组件
感性认识想在 uni-app 中使用 ucharts 官方提供了两种方法: uni_modules版本非 uni_modules版本何为 uni_modules?请看官方文档 uni_modul ...
uni-app项目使用uCharts高性能跨全端图表组件
前言: uCharts全新图表组件,全端全平台支持,开箱即用,可选择uCharts引擎全端渲染,也可指定PC端或APP端单独使用ECharts引擎渲染图表.支持极简单的调用方式,只需指定图表类型及传入 ...
高性能跨全端图表组件--uCharts
安装注意前提条件[版本要求:HBuilderX 3.3.8+] 使用HBuilderX导入插件:https://ext.dcloud.net.cn/plugin?id=271 导入成功后项目会多一个 ...
Uni-app 小程序使用腾讯云IM实时通讯
// IM 小程序 SDK npm install tim-wx-sdk --save // 发送图片.文件等消息需要的 COS SDK 如果不需要发送图片等文件不需要下载在APP.vue中配置好 ...
uniapp 使用秋云uCharts图表组件、echarts图表组件
一.uniapp 使用秋云uCharts图表组件 1.我们的项目是依赖uniapp的vue-cli项目操作:将uni_modules目录复制到src目录,即src/uni_modules. 2.页面 ...
uniapp 中使用图表（秋云uCharts图表组件）
在用uniapp做项目时,遇到要做折线图的需求,但是又不想用echarts,在uniapp中dom操作非常的麻烦.于是找到了一个专门为app而生的图表插件uCharts(秋云uCharts图表组件), ...
微信小程序点播插件_小程序云直播amp;云点播插件限时降价了！！！
普惠音视频开发者小程序·云直播&云点播插件降价啦! 买200TB流量包免1年插件授权费用小程序直播插件流量费支持资源包抵扣点播插件免收播放次数费用限时降价买赠活动时间:2020年10 ...
uni-app小程序云开发函数——记录
uniapp云开发 1. 初始化 2. 实例操作 3. 增加记录 4. 获取记录 5. 更新(修改数据) 6. 删除创建云函数因为最近要有小程序项目所以接触下小程序,没想到小程序能够云开发,可以自 ...

uniapp小程序echarts插件----秋云 ucharts echarts 高性能跨全端图表组件

uniapp小程序echarts插件----秋云 ucharts echarts 高性能跨全端图表组件

uniapp小程序echarts插件----秋云 ucharts echarts 高性能跨全端图表组件相关推荐

最新文章

热门文章