ucharts 图例用view标签生成实现点击过滤图表数据

最近做一个微信小程序 图表图例需要自定义样式 经过各种尝试 发现还原UI很困难，想着直接view写图例样式 模拟图表图例点击过滤数据的功能

1.导入秋云ucharts组件，在需要的地方引入组件  :canvas2d="true" 这个需要设置

 opts中update 设置成true  

<qiun-data-charts 
     type="area"
     :canvas2d="true"
     :opts="opts" 
     :chartData="chartData"
     ref="uchartsRef"
     canvasId="uchartsRef"/>


     opts: {        //这个属性记得加上
					update:true,
					// 不显示这线上的数字
					dataLabel: false,
					dataPointShape: false,
					color: ['#D43030', '#FF8D1A', '#FFEB3B', '#2A82E4'],
					padding: [15, 20, 25, 20],
					legend: {
						show:false
					},
					xAxis: {
						// 折线从x轴0开始到x轴末端
						boundaryGap: "justify",
						// 开启辅助分割线
						disableGrid: false,
						// 分割先类型 实线
						gridType: "solid",
						dashLength: 1,
						// 纵向网格线数量 貌似没起作用
						splitNumber: 2,
						// 刻度文字旋转
						rotateLabel: true,
						// 刻度文字距离x轴的偏移量
						marginTop: 10,
						// x轴显示的刻度个数每屏显示8个刻度
						labelCount: 8,
						marginTop:14
					},
					yAxis: {
						gridType: "solid",
						gridColor: '#EAEAEA',
						dashLength: 1,
						splitNumber: 4
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.8,
							addLine: true,
							width: 0.5,
							gradient: false,
							activeType: "hollow",
							labelPosition: ''
						}
					}
				}

2.在组件下方直接用css html 画出图例样式添加图例点击事件

<view class="legends" v-if="chartData.categories">
	<view class="legend-item"
         v-for="item in legends" 
         :key="item.id" 
         @tap="()=>filterData(item)" 
         :class="{filter:!item.showData}">
		  <view class="rect" :style="{backgroundColor:`${item.color}`}"></view>
		  <view class="text">{{item.name}}</view>
	 </view>
</view>

//series 数组中每一项都可以通过show属性控制数据显示不显示，
//这个属性就是图例点击时会控制图例样式和对应数据显示隐藏的属性
filterData(legend){
    this.chartData.series[legend.id].show = !this.chartData.series[legend.id].show
	this.legends[legend.id].showData=!this.legends[legend.id].showData
    //组件属性 设置的 canvasId="uchartsRef"
	this.$refs.uchartsRef['_updataUChart']('uchartsRef')				
}
//this.chartData 数据格式时这样的
{
categories:['10-1',10-2',10-3',10-4'],
series:[
  {
	name: "I级警报",
	data: [0,1,1,2],
	show:true
  },
  {
	name: "II级警报",
	data: [0,1,1,2],
	show:true
  },
  {
	name: "III级警报",
	data: [0,1,1,2],
	show:true
  },
  {
	name: "IV级警报",
	data: [0,1,1,2],
	show:true
  },
 ]
}

过程中出现的问题：

1.数据更新的方法最终找到了，数据更新使用的时_updataUChart方法，从百度上找到的基本上都是updataUChart，但是这个方法不适用这种组件引入的方式，换成 _updataUChart方法后需要传入 cid，通过设置在组件canvasId  canvasId="uchartsRef" 作为参数，如果不设置的话有个默认值'uchartsid',最好是设置一下

2.点击图例实现数据显示隐藏式 画面抖动闪动非常严重，经过查询和尝试 给组件加上canvas2d属性 并设置成:canvas2d="true" 问题解决