uniapp使用uCharts制作趋势图

最新推荐文章于 2024-08-29 17:53:35 发布

小菜鸡 NO.1

最新推荐文章于 2024-08-29 17:53:35 发布

阅读量2.4k

点赞数 1

文章标签： uni-app

本文链接：https://blog.csdn.net/weixin_49296337/article/details/118543912

版权

本文介绍了如何在uniapp中利用uCharts组件来创建趋势图。首先，通过引入uCharts库，然后从后端读取数据，将数据赋值给图表配置，最后展示图表并实现点击图表显示详细内容的功能。uCharts支持H5和APP，并提供丰富的图表定制选项。

摘要由CSDN通过智能技术生成

前言

uniapp使用uCharts制作趋势图，适用于小程序。

提示：以下是本篇文章正文内容，下面案例可供参考

一、uCharts是什么？

uCharts v2.3上线，支持nvue！全新官方图表组件，支持H5及APP用ECharts渲染图表，uniapp可视化首选组件

二、使用步骤

1.引入库

//网站地址秋云 ucharts echarts 高性能跨全端图表组件 - DCloud 插件市场

import uCharts from '../components/achieve/leiqch-ucharts/js/u-charts.js'

2.读入数据

代码如下（示例）：

<template>

 <view class="bottomContainer">
      <canvas :canvasId="canvasLineA" id="canvasListA" class="charts" @touchstart="touchstart"></canvas>
 </view>

 
</template>

<script>

import uCharts from '../components/achieve/leiqch-ucharts/js/u-charts.js'
var canvaLineA=null
export default{
  data () {
    return {
    
    cWidth:'',
      cHeight:'',
      pixelRatio:1,
      canvasLineA:"canvasLineA"
    }
  },
  components: {

  },
  
  methods: {
       uni.hideLoading();
    },
    
    //趋势图
   tendencyChartList(agentId){
    //访问后端数据
    this.$api.achieve.tendencyChart(agentId).then((res)=>{
        //获取后端返回数据
        let lineA={
            categories:[],
            series:[{
                name:'客',
                data:[],
                color:'#5B8FF9'
            },
            {
                name:'我',
                data:[],
                color:'#5AD8A6'
            }]
         }
         
        //把数据放在lineA中
         res.data.forEach((item)=>{
             lineA.categories=lineA.categories.concat(item.selectDate)
             lineA.series[0].data=lineA.series[0].data.concat(item.visitCount)
             lineA.series[1].data=lineA.series[1].data.concat(item.shareCount)
         })
         console.log("lineA",lineA)
         this.showLineA(this.canvasLineA,lineA)
     })
    },
    
    //创建趋势图
    showLineA(canvasId,chartData){
        canvaLineA=new uCharts({
            $this:this,
            canvasId: canvasId,
            type: 'line',
            fontSize:11,
            legend:{show:true},
            dataLabel:false,
            dataPointShape:true,
            background:'#FFFFFF',
            pixelRatio:this.pixelRatio,
            categories: chartData.categories,
            series: chartData.series,
            animation: true,
                
            
            // x轴显示的内容
            xAxis: {
                type:'grid',
                gridColor:'#DADDE6',
                gridType:'solid',
                dashLength:8,
                disableGrid:true,
                rotateLabel:true,

            },
            // y轴显示的内容
            yAxis: {
                gridType:'solid',
                gridColor:'#DADDE6',
                dashLength:8,
                splitNumber:5,
                min:0,
                // format:((val)=>{return val.toFixed(1)})
            },
            width: this.cWidth*this.pixelRatio,
            height: this.cHeight*this.pixelRatio,
            extra: {
                line:{
                    type: 'straight'
                }
            }

        })
    },
    
    // 点击图表显示的内容
    touchstart(e){
        console.log("图表显示的内容",e)
        canvaLineA.showToolTip(e,{
            
            format: function (item, category) {
                
                return category + ' ' + item.name + ':' + item.data 
            }
        })
    },

  

   
     
  },

  onLoad() {
    
     this.tendencyChartList(10)
  },
  
}
</script>

<style>

</style>

该处使用的url网络请求的数据。