uniapp 图表插件 qiun-data-charts

<view class="charts-box"><!-- 开启onmovetip后，同时开启canvas2d模式（需要传canvasId），否则在小程序端会很卡。--><qiun-data-chartstype="line":canvas2d="true":canvasId="canvasId":chartData="chartData"background="none":ontouch="true":onmovetip="true":animation="false":opts="lineOpts"tooltipFormat="tooltipIncome"/>
</view>data(){
return {chartData: {},canvasId: '',lineOpts: {"type": "line","canvasId": new Date().getTime(),"canvas2d": false,"background": "none","animation": true,"timing": "easeOut","duration": 1000,"color": ["#47C5FF","#FFCD30","#3DF366"],"padding": [20,20,10,5],"rotate": false,"errorReload": true,"fontSize": 12,"fontColor": "#999999","enableScroll": false,"touchMoveLimit": 60,"enableMarkLine": false,"dataLabel": false,"dataPointShape": false,"dataPointShapeType": "solid","xAxis": {"disabled": false,"axisLine": false,"axisLineColor": "#EEEEEE","calibration": false,"fontColor": "#999999","fontSize": 12,"rotateLabel": false,"labelCount": 10, "boundaryGap": "justify","disableGrid": true,"gridColor": "#CCCCCC","gridType": "dash","dashLength": 4,"gridEval": 1},"yAxis": {"disabled": false,"disableGrid": false,"splitNumber": 4,"gridType": "solid","dashLength": 2,"gridColor": "#CCCCCC","padding": 10,"showTitle": false,"data": [{"position": "left","disabled": false,"axisLine": true,"axisLineColor": "#fff","calibration": false,"fontColor": "#999999","fontSize": 12,"textAlign": "right","title": "","titleFontSize": 13,"titleOffsetY": 0,"titleOffsetX": 0,"titleFontColor": "#666666","min": null,"max": null,"tofix": 2,"unit": "","format": ""}]},"legend": {"show": true,"position": "bottom","float": "center","padding": 5,"margin": 5,"backgroundColor": "rgba(0,0,0,0)","borderColor": "rgba(0,0,0,0)","borderWidth": 0,"fontSize": 12,"fontColor": "#999999","lineHeight": 20,"hiddenColor": "#CECECE","itemGap": 10},"extra": {"tooltip": {"showBox": true,"showArrow": true,"showCategory": false,"borderWidth": 0,"borderRadius": 5,"borderColor": "#000000","borderOpacity": 0.7,"bgColor": "#000000","bgOpacity": 0.7,"gridType": "solid","dashLength": 4,"gridColor": "#CCCCCC","fontColor": "#FFFFFF","splitLine": true,"horizentalLine": false,"xAxisLabel": false,"yAxisLabel": false,"labelBgColor": "#FFFFFF","labelBgOpacity": 0.7,"labelFontColor": "#666666"},"markLine": {"type": "solid","dashLength": 4,"data": []}}},
}
}onLoad() {this.canvasId = this.randomString();
}methods： {
// 生成32位随机字符串
randomString() {let len = 32;let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';let maxPos = chars.length;let result = '';for (let i = 0; i < len; i++) {result += chars.charAt(Math.floor(Math.random() * maxPos));}return result;
}
}

uniapp 图表插件 qiun-data-charts相关推荐

Vue 使用图表插件 -- Echarts
目前常用的图表插件有: charts Echarts highcharts d3.js 这次根据Vue 项目中 Echarts 的应用记一笔. 安装插件 npm install echarts -S ...
vue全局安装jquery，vue使用bootstrap框架，vue中封装websocket通讯，vue引入element-ui 组件库，引入highcharts图表插件
vue安装jquery: 1.使用vue-cli创建好vue项目后,在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 2.修改项目文件 build ...
wx-charts 微信小程序图表插件
阅读数:9460 微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧,支持图表类型饼图.线图.柱状图 .区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好 ...
数据可视化图表插件_7个最佳数据可视化WordPress插件（图表和图表）
数据可视化图表插件 Do you want to show colorful charts, graphs, pictograms, or infographics on your website? ...
wxml 点击图片下载_小程序图表插件
最近做小程序需要统计一些数据,需要用到图表插件,所有在网上找了找,找到了wx-charts这个插件,看着挺好用的,和jq的echarts类似,所有选择用这个插件来画图表,wx-charts是基于can ...
微信小程序图表插件（wx-charts）
微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧支持图表类型饼图.线图.柱状图 .区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个. wx- ...
【jQuery】兼容IE6的图表插件Highcharts
在网页中有时候需要画出统计图,尤其是一些OA系统中,这样能够给各位看官一个直观的数据显示.图表用很多东西都能画出来,比如JSP可以利用JAVA本身就有的绘图函数,php有jpgraph插件,具体请看& ...
微信小程序-wx-charts 图表插件
微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧,支持图表类型饼图.线图.柱状图 .区域图等图表图形绘制. 支持图标类型饼图 pie 圆环图 ring 线图 line 柱状图 ...
微信小程序图表插件 - wx-charts
微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧支持图表类型饼图.线图.柱状图 .区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个. wx-c ...

uniapp 图表插件 qiun-data-charts

uniapp 图表插件 qiun-data-charts相关推荐

最新文章

热门文章

uniapp 图表 插件 qiun-data-charts

uniapp 图表 插件 qiun-data-charts相关推荐

最新文章

热门文章

uniapp 图表插件 qiun-data-charts

uniapp 图表插件 qiun-data-charts相关推荐