uni-app:uCharts的使用步骤

崖上小松 發表於 2021-3-26 10:29:00

<h3>为何不用Echarts</h3>
<ul>
<li>相比Echarts及F2的复杂的设置，本插件几乎等于傻瓜式的配置。</li>
<li>Echarts在跨端使用更复杂，本插件只需要简单的两个<code><canvas></code>标签轻松区别搞定，代码整洁易维护。</li>
<li>Echarts在IOS端图表显示错位，只能引用网页解决。</li>
<li>本插件打包后的体积相比Echarts小很多很多，所以性能更好。</li>
<li>如果您是uni-app初学者，那么强烈建议您使用uCharts，并且目前可以跨全端通用，减少工作量，增强一致性体验。</li>
<li>图表样式均可自定义，懂js的都可以读懂插件源码，直接修改u-charts.js源码即可。</li>
<li>本插件经过大量测试，反复论证并加以改造而成，请各位放心使用。</li>
</ul>
扫码体验：
<img src="https://img2020.cnblogs.com/blog/2138872/202103/2138872-20210326090120023-2098720130.png" alt="" loading="lazy">
 以下代码参考官方示例：/pages/basic/line/curve.vue,下载地址：https://ext.dcloud.net.cn/plugin?id=271
以曲线图为例介绍使用步骤：
1、将u-charts.js拷贝到components目录下
<img src="https://img2020.cnblogs.com/blog/2138872/202103/2138872-20210326090953005-1217092385.png" alt="" loading="lazy">
 2、引入组件
<div class="cnblogs_code">
<pre>import uCharts from '@/components/u-charts/u-charts.js';</pre>
</div>
3、模板写法：
<div class="cnblogs_code">
<pre><view class="qiun-charts" >
 
 <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" 　　　　　　　　　　:style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchLineA"></canvas>
 
 
 <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
 
 </view></pre>
</div>
如果是支付宝小程序用上面那种，即
<div class="cnblogs_code">
<pre><view class="qiun-charts" >
 
 <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" 　　　　　　　　　　:style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchLineA"></canvas>
 
 </view></pre>
</div>
支付宝以外用下面那种，即
<div class="cnblogs_code">
<pre><view class="qiun-charts" >
 
 <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
 
 </view></pre>
</div>
4、样式写法
<div class="cnblogs_code">
<pre>.qiun-charts{
 width: 750upx;
 height:500upx;
 background-color: #FFFFFF;
 }
.charts{
 width: 750upx;
 height:500upx;
 background-color: #FFFFFF;
 }</pre>
</div>
5、实例化方法
<div class="cnblogs_code">
<pre>showLineA(canvasId,chartData){
 canvaLineA=new uCharts({
 $this:_self,
 canvasId: canvasId,
 type: 'line',
 fontSize:11,
 padding:[15,20,0,15],
 legend:{
 show:true,
 padding:5,
 lineHeight:11, // 控制标题的行高
 margin:0, // 控制标题的margin
 },
 dataLabel:true,
 dataPointShape:true,
 background:'#FFFFFF',
 pixelRatio:_self.pixelRatio,
 categories: chartData.categories,
 series: chartData.series,
 animation: true,
 xAxis: {
 type:'grid',
 gridColor:'#CCCCCC',
 gridType:'dash',
 dashLength:8,
 boundaryGap:'justify'
 },
 yAxis: {
 gridType:'dash',
 gridColor:'#CCCCCC',
 dashLength:8,
 splitNumber:5,
 format:(val)=>{return val.toFixed(0)+'元'}
 },
 width: _self.cWidth*_self.pixelRatio,
 height: _self.cHeight*_self.pixelRatio,
 extra: {
 line:{
 type: 'curve'
 }
 }
 });
 //下面是默认选中索引
 let cindex=3;
 //下面是自定义文案
 let textList=[{text:'我是一个标题',color:null},{text:'自定义1：值1',color:'#2fc25b'},{text:'自定义2：值2',color:'#facc14'}, 　　　　　　　　　　　　　　　　　　{text:'自定义3：值3',color:'#f04864'}];
 //下面是event的模拟,tooltip的Y坐标值通过这个mp.changedTouches.y控制
 let tmpevent={mp:{changedTouches:[{x: 0, y: 80}]}};
 setTimeout(()=>{
 canvaLineA.showToolTip( tmpevent , {
 index:cindex,
 textList:textList
 });
 },200)
 },
 touchLineA(e) {
 canvaLineA.touchLegend(e);
 canvaLineA.showToolTip(e, {
 format: function (item, category) {
 return category + ' ' + item.name + ':' + item.data
 }
 });
 },</pre>
</div>
数据模型中拷贝以下参数
<div class="cnblogs_code">
<pre>data() {
 return {
 cWidth:'',
 cHeight:'',
 pixelRatio:1,
 textarea:''
 }
 },</pre>
</div>
6、在实际项目中，我们是从后台获取数据存入chartData中，并调用实例化方法。这里我们先在数据模型中给出chartData的默认值，并在onLoad中调用实例化方法
<div class="cnblogs_code">
<pre>onLoad(options) {
 this.showLineA("canvasLineA",this.chartData)
 },</pre>
</div>
chartData数据示例：
<div class="cnblogs_code">
<pre>{
"categories":["2012","2013","2014","2015","2016","2017"],
"series":[
 {"name":"成交量A","data":[35,8,25,37,4,20]}
]
}</pre>
</div>
7、在onLoad生命周期函数中初始化cWidth和cHeight，来控制图标的宽和高
<div class="cnblogs_code">
<pre>this.cWidth=uni.upx2px(750);
 this.cHeight=uni.upx2px(500);</pre>
</div>
8、定义canvaLineA
<div class="cnblogs_code">
<pre>var canvaLineA=null;</pre>
</div>
效果如下图所示
<img src="https://img2020.cnblogs.com/blog/2138872/202103/2138872-20210326102255168-1847390591.png" alt="" loading="lazy">
 完整代码如下：
<div class="cnblogs_code">
<pre><template>
<view class="container">
 <view class="qiun-charts" >
 
 <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
 
 </view>
</view>
</template>

<script>
import uCharts from '@/components/u-charts/u-charts.js'; 　　var canvaLineA=null;
export default {
 data(){
 return {
 cWidth:'',
 cHeight:'',
 pixelRatio:1,
 textarea:'',
 chartData:{
 "categories":["2012","2013","2014","2015","2016","2017"],
 "series":[
 {"name":"成交量A","data":[35,8,25,37,4,20]}
 ]
 }
 }
 },
 onLoad(options) {
 console.log(options)this.cWidth = uni.upx2px(720);
 this.cHeight = uni.upx2px(420);
 this.showLineA("canvasLineA",this.chartData)
 },
 methods:{
 showLineA(canvasId,chartData){
 canvaLineA=new uCharts({
 $this:this,
 canvasId: canvasId,
 type: 'line',
 fontSize:11,
 padding:,
 legend:{
 show:true,
 padding:5,
 lineHeight:11,
 margin:0,
 },
 dataLabel:true,
 dataPointShape:true,
 background:'#FFFFFF',
 pixelRatio:this.pixelRatio,
 categories: chartData.categories,
 series: chartData.series,
 animation: true,
 xAxis: {
 type:'grid',
 gridColor:'#CCCCCC',
 gridType:'dash',
 dashLength:8,
 boundaryGap:'justify'
 },
 yAxis: {
 gridType:'dash',
 gridColor:'#CCCCCC',
 dashLength:8,
 splitNumber:5,
 format:(val)=>{return val.toFixed(0)+'元'}
 },
 width: this.cWidth*this.pixelRatio,
 height: this.cHeight*this.pixelRatio,
 extra: {
 line:{
 type: 'curve'
 }
 }
 });
 //下面是默认选中索引
 let cindex=3;
 //下面是自定义文案
 let textList=[{text:'我是一个标题',color:null},{text:'自定义1：值1',color:'#2fc25b'},{text:'自定义2：值2',color:'#facc14'}, 　　　　　　　　　　　　　　　　　　{text:'自定义3：值3',color:'#f04864'}];
 //下面是event的模拟,tooltip的Y坐标值通过这个mp.changedTouches.y控制
 let tmpevent={mp:{changedTouches:[{x: 0, y: 80}]}};
 setTimeout(()=>{
 canvaLineA.showToolTip( tmpevent , {
 index:cindex,
 textList:textList
 });
 },200)
 },
 touchLineA(e) {
 canvaLineA.touchLegend(e);
 canvaLineA.showToolTip(e, {
 format: function (item, category) {
 return category + ' ' + item.name + ':' + item.data
 }
 });
 },
 }
}
</script>

<style lang="scss" scoped>
.qiun-charts{
 width: 750upx;
 height:500upx;
 background-color: #FFFFFF;
 }
.charts{
 width: 750upx;
 height:500upx;
 background-color: #FFFFFF;
 }
</style></pre>
</div>
<code>touchLegend(e)</code> 图例点击交互事件
<code>showToolTip(e)</code> 图表中展示数据详细内容
 legend中的两个属性position和float来修改标题的位置：
<div class="cnblogs_code">
<pre>legend:{
 show:true,
 padding:5,
 lineHeight:11,
 margin:0,
 position: 'top',
 float: 'right'
 },</pre>
</div>
dataLabel属性用来修改曲线上是否显示数组，值为true表示显示数据，值为false表示隐藏数据
dataPointShape属性用来控制曲线上是否显示点。值为true表示显示点，值为false表示隐藏点
xAxis.labelCount：默认series.data.length，X轴可见区域<code>标签数量</code>（即X轴数刻度标签单屏幕限制显示的数量）
boundaryGap：折线图、区域图起画点结束点方法：center为单元格中间起画，justify为0点起画即两端对齐
当值为justify时是这样的：
<img src="https://img2020.cnblogs.com/blog/2138872/202103/2138872-20210326160851192-172288973.png" alt="" loading="lazy">
 
 当值为justify时是这样的：
<img src="https://img2020.cnblogs.com/blog/2138872/202103/2138872-20210326160956057-635959769.png" alt="" loading="lazy">
 
 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。toFixed(0)表示小数位数为0.
  
来源：https://www.cnblogs.com/zwh0910/p/14580867.html

頁: [1]

琼殿技术论坛's Archiver

uni-app:uCharts的使用步骤