ucharts tooltip自定义换行及自定义弹窗位置

ucharts tooltip自定义换行及自定义弹窗位置

以下通过条形图进行演示

 <!-- 重点: 
 1. 绑定 @getIndex 事件 
 2. 绑定 canvasId
 -->
<qiun-data-charts
   	type="bar"
    :chartData="topChartData"
    :opts="topChartOpts"
    background="none"
    :inScrollView="true"
    :tapLegend="false"
    :canvas2d="false"
    canvasId="canvas2dNeedIdbar1"
    @getIndex="showMyTooltip"                        
/>

import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js';
data() {
	topName: [],
	topChartData: {
	    categories: [],
	    series: [{
	        name: "商品销售排名前10",
	        data: [],
	    }],
	},
	topChartOpts: {
     dataLabel: true,
     color: ["#0086F8"],
     xAxis: {
         disabled: true, // 不绘制X轴
         disableGrid: true,  // 不绘制纵向网格(即默认绘制网格)
     },
     extra: {
         tooltip: {
             // showArrow: false, // 去除箭头
             borderRadius: 5
         }
     },
     yAxis: {},
 	},
}

methods:{
// 获取数据, 对y轴文字超长处理, 省略..., 后期通过tooltip 弹窗提示完整内容
async getData() {
 const req = new this.Request(api.GetGdsSaleTopOrBottom, id:1);
 const { data} = await req.fetch();
 var _monthDetail = data.ObjectData || [];
 _monthDetail.forEach(item => {
      var _name = item.c_name;
      // y轴文字过长 截取文字, ...省略展示
      if (_name.length > 6) {
          _name = _name.substring(0, 6) + '...';
      }
      this.topChartData.categories.push(_name);
      this.topChartData.series[0].data.push(item.c_at);
      this.topName.push( item.c_name);
    
  });
},
showMyTooltip(e) {
	console.log("获取点击索引事件",e);
	console.log("获取uCharts实例",uCharts.instance[e.id]);
	//uCharts.option[e.id]代表当前的图表的opts（除APP端，APP不可在组件外调用uCharts的实例）
	console.log("uCharts的option",uCharts.option[e.id]);
	//从option（opts）中获取数据
	let categories = uCharts.option[e.id].categories;
	let series = uCharts.option[e.id].series;
	//注意v2.1.2版本后，e.currentIndex是对象，而e.currentIndex.index是索引值，如果是时间轴图表，index在多个series的情况下会是数组
	let index = e.currentIndex.index;
	// 如果之前做了截取 可以通过text: this.topName[index]展示完整信息
	let textList = [{ text: categories[index], color: null }];
	for (let i = 0; i < series.length; i++) {
	   textList.push({text: "销售额" + ": " + series[i].data[index], color: series[i].color})
	}
	uCharts.instance[e.id].showToolTip({ 
	   changedTouches: [e.event], // changedTouches:点击的坐标值, 可自定义位置[{x: 100, y: 10}]
	},{
		index: index, 
		textList: textList
	});
	// #endif
	
	},
}