Uniapp小程序中使用uEcharts图

本示例是基于uniapp小程序（使用工具创建的项目）使用uEcharts图的使用步骤说明

---

1.下载需要的js代码：https://gitee.com/uCharts/uCharts

2.下载之后的文件截屏如下

• 打开第一个（uCharts-for-UNIAPP（跨端））文件夹

• 拷贝js文件至项目文件夹（可根据自己得实际需要写）

• 打开第二个（示例项目）文件夹下的UNIAPP文件，再拷贝common中的前文件至项目的common中

注意：之前因为只是参考了官方的代码示例，但是没有引common中的js文件，结果项目一直报错，图表也不出来，之后看了示例项目的代码才解决的

3.页面引用js及定义变量

import uCharts from '@/components/u-charts/u-charts.min.js';
var _self;
var canvaArea = null;
export default {
  data() {
    return {
      cWidth: '',
      cHeight: '',
      pixelRatio: 1,
      pixelRatio2: 1
    };
  },
onLoad() {
    _self = this;
    //#ifdef MP-ALIPAY

    uni.getSystemInfo({
      success: function(res) {
        if (res.pixelRatio > 1) {
          _self.pixelRatio = 2;
        }
      }
});

//css样式的width和height一定要与定义的cWidth和cHeight相对应
   this.cWidth = uni.upx2px(630);
    this.cHeight = uni.upx2px(240);
    this.getServerData();
  },

//methods中写方法：
//模拟获取最高成绩的方法
    getServerData() {
      uni.request({
        // url: 'https://www.ucharts.cn/data.json',
        //注意url的请求地址须与小程序的request合法域名一致（数据的请求地址），否则会出现打包上传至服务器后uEcharts图表不显示的问题
        url: config.apiHost, 
        data: {},
        success: function(res) {
          let Area = {
            categories: ['2019年11月', '3月', '4月', '5月', '6月', '7月'],
            series: [
              {
                name: '得分',
                data: [70, 80, 85, 91, 75, 86],
                color: '#fff'
              }
            ]
          };
          _self.showArea('canvasArea', Area);
        },
        fail: () => {
          _self.tips = '网络错误，小程序端请检查合法域名';
        }
      });
    },

 //显示最高成绩的区域图--uEcharts的所有配置项
    showArea(canvasId, chartData) {
      canvaArea = new uCharts({
        $this: _self,
        canvasId: canvasId,
        type: 'area',
        fontSize: 11,
        legend: { show: false },
        dataLabel: false,
        dataPointShape: true,
        background: '#FFFFFF',
        pixelRatio: _self.pixelRatio,
        categories: chartData.categories,
        series: chartData.series,
        animation: true,
        padding:[15,20,5,20],
        dataPointShapeType: 'hollow',
        xAxis: {
          type: 'grid',
          dashLength: 8,
          disableGrid: true,
          fontColor: '#fff',
          axisLineColor: '#fff',
          boundaryGap: 'justify',
          fontSize: 8
        },
        yAxis: {
          dashLength: 8,
          splitNumber: 5,
          disabled: true,
          disableGrid: true
        },
        width: _self.cWidth * _self.pixelRatio,
        height: _self.cHeight * _self.pixelRatio,
        extra: {
          area: {
            opacity: 0.8,
            gradient: true
          }
        }
      });
    },
    //最高成绩的区域图的touch事件
    touchArea(e) {
      canvaArea.touchLegend(e);
      canvaArea.showToolTip(e, {
        format: function(item, category) {
          return category + ' ' + item.name + ':' + item.data;
        }
      });
    }

4.页面显示代码

<view class="qiun-charts">
   <canvas
      canvas-id="canvasArea"
      id="canvasArea"
      class="charts"
      :width="cWidth * pixelRatio"
      :height="cHeight * pixelRatio"
      :style="{ width: cWidth + 'px', height: cHeight + 'px' }"
      @touchstart="touchArea"
      ></canvas>
     <canvas canvas-id="canvasArea" id="canvasArea" class="charts" @touchstart="touchArea"></canvas>
</view>

5.Css代码

/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
.qiun-charts {
	width: 630upx;
	height: 240upx;
	background: transparent;
	margin: auto;
}

.charts {
	width: 630upx;
	height: 240upx;
	background: transparent;
}

补充1：页面效果:X轴时间显示不全可修改padding的值进行调整

解决办法：调整padding的距离即可（按照：上右下左）

补充2：饼图图例间距的调整legend的itemGap的距离即可

温馨提示：有时代码写好无误，数据图表就是不出来，有时需要清一下缓存哟

uEcharts官网地址：https://www.ucharts.cn/