uniapp,app端使用echarts不兼容，就使用uchats

单独u-charts.js插件使用，下载u-charts.js，将u-charts.js放入components/u-echarts文件夹里，配置可以在https://www.bookstack.cn/read/ucharts/9aef5e44422b4a56.md里找，touchstart方法可以点击图表的时候显示格式

注：u-charts.js文件，在qiun-data-charts(uni_modules)\js_sdk\u-charts里，插件下载路径

<template>
  <view>
    <canvas canvas-id="mayChart" class="chart-canvas" 
					 :style="{width: '100%', height: '100%'}" @touchstart="touchRing"></canvas>
  </view>
</template>

<script>
// 引入uCharts
import uCharts from '../../components/u-echarts/u-charts'; //引入uCharts
export default {
  data() {
    return {
      // 图表
		chart:null,
		pixelRatio:1,
		serverData:'',
		chartData:{
			"series": [
				{
					data: [{"name":"待激活","value":2},{"name":"已激活","value":1}]
				}
			]
		}
    };
  },
  onReady() {
	  this.initChart('mayChart', this.chartData)	
    },
  methods: {
    // 图表
		initChart(canvasId,chartData){
			const _self = this
			this.cWidth = uni.upx2px(250);
			this.cHeight = uni.upx2px(250); //设置宽高
			let ctx = uni.createCanvasContext('mayChart', this);
			this.chart=new uCharts({
				$this:_self,
				context:ctx,
				canvasId: canvasId,
				type: 'ring',
				dataLabel: true,
        		enableScroll: false,
				legend:{show:false},
				rotate: false,
        		rotateLock: false,
				fontSize:11,
				background:'#FFFFFF',
				pixelRatio:_self.pixelRatio,
				animation: true,
				color: ["#AD2926","#FFBB20"],
				// categories: chartData.categories,
				series: chartData.series,
				xAxis: {
					// disableGrid:true,
				},
				yAxis: {
					//disabled:true
				},
				dataLabel: true,
				width: _self.cWidth*_self.pixelRatio,
				height: _self.cHeight*_self.pixelRatio,
				disablepieStrok:true,
				dataLabel:false,
				extra: {
					ring: {
						// ringWidth:40*_self.pixelRatio,
						ringWidth:15,
						offsetAngle: -45,
						labelWidth:15,
					}
				}
			});
		},
		touchRing(e){
			this.chart.showToolTip(e, {
				format: function (item) {
					return item.name + ':' + item.data +'(台)'
				}
			});
		},
  }
};
</script>

<style scoped>
  .chart-canvas{
    width: 100%;
    height: 500rpx;
  }
</style>

使用组件式调用，先下载ucharts插件，插件下载路径

import uCharts from '@/components/qiun-data-charts(uni_modules)/components/qiun-data-charts/qiun-data-charts'
 components: {
    'qiun-data-charts': uCharts
    },
    data(){
    return{
    	time:[],
            chartData:{},
            option:{
            name:'天',
            grid: {
                top: 10,
            },
            color: ['#164CFF'],
            dataLabel: false,
            dataPointShape: false,
            animation: true,
            background: "#FFFFFF",
            color: ["#164CFF"],
            padding: [10,0,0,0],
            xAxis: {
            name:'日',
            fontSize:12,
            labelCount: 6,
            dashLength: 4,
            gridEval: 1,
            fontColor:'rgba(255,255,255,0.85)',
            fontSize:12,
            format:'xAxisDemo1',
            data:[
                {
                    fontColor:'rgba(255,255,255,0.85)',
                    fontSize:12,
                    format:'xAxisDemo1',
                }
            ]
            },
            yAxis: {
                data: [{
                    axisLine:false,
                    axisLineColor: '#fff',
                    fontColor:'rgba(255,255,255,0.85)',
                    fontSize:12,
                    format:'yAxisDemo1',
                }]

            },
            extra: {
            area: {
                type: "curve", // 区域图类型，可选值："straight"尖角折线模式,"curve"曲线圆滑模式,"step"时序图模式
                opacity: 0.1, // 	区域图透明度
                addLine: true, // 是否叠加相应的折线
                width: 2, // 叠加的折线宽度
                gradient: true, // 是否开启区域图渐变色
                shadowColor: '#2276FC', // 阴影颜色
                activeType: "hollow" ,// 激活指示点类型，可选值："none"不启用激活指示点,"hollow"空心点模式,"solid"实心点模式
                gridColor: '#2276FC'
            },
            tooltip: {
                showBox: true,
                showArrow: false,
                gridType: 'dash',
                gridColor: '#F7DB4D',
                }
            },
            legend: {
            show: false,
            },
            },
            // 在ucharts的配置中设置tooltipFormat
            tooltipFactor:'tooltipDemo1',
    }
    }

使用

<qiun-data-charts type="area" :opts="option" :chartData="chartData"
                :tooltipFormat="tooltipFactor"/>

// 初始化图
        initChart(){
            setTimeout(() => {
                let chartData = {
                    categories:this.time,
                    series: [
                    {
                        name:'日',
                        data: this.data,
                        type: 'curve', // 指定图表类型为区域图
                        opacity: 0.2,
                        addLine: false,
                        width: 2,
                        gradient: true,
                        activeType: "hollow",
                        activeBgColor: "#000000", //选中背景颜色
                        activeBgOpacity: 0.05, //选中背景透明度
                        labelPosition: "", //设置柱子上面的数值位置
                        // 如果开启渐变不设置customColor属性就是由上面设置颜色的值由深变浅，第二个图就是
                        customColor: ["#164CFF", "#000"], //这里设置渐变颜色的上面部分，渐变颜色的底部颜色在series里面设置
                        colorStop: "1" //渐变比例
                    },
                    ]
                };
                this.chartData = chartData;
                // this.chartData = JSON.parse(JSON.stringify(chartData));
            }, 500);
      }