echarts格式化数据formatter，拒绝无效重复渲染useMemo

学敲代码的Stars

已于 2023-03-21 16:57:15 修改

阅读量874

点赞数

分类专栏：前端文章标签： echarts 前端 javascript

于 2022-12-16 15:27:06 首次发布

本文链接：https://blog.csdn.net/xx20010124/article/details/128343109

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

格式化数据

坐标轴

yAxis: [
  {
 	type: 'value',
    position: 'right',
    axisLabel: {
      textStyle: {
        color: '#223254',
        fontSize: 14,
      },
      formatter: '{value}%', // 加上 %
      // 也可以是函数 (value) => {}
    },
  }
]

悬浮提示框

tooltip: {
  trigger: 'axis',
  formatter: function (params) {
    var str = params[0].name + '<br>';
    for (let item of params) {
      if (item.componentSubType === 'line') {
        str += `${item.marker}${item.seriesName}: ${item.data}%<br>`; // 为折线图时加 %
      } else {
        str += `${item.marker}${item.seriesName}: ${item.data}<br>`; // 保持不变
      }
    }
    return str;
  },
},

数据项

 series: [
   {
       name: 'name',
       type: 'line',
       data: [],
       itemStyle: {
            label: {
                show:true,
                position:'top',
                formatter:'{c}%' // 在柱状图每一项上方显示数据，加上 %
            }
        }
    }
]

拒绝无效重复渲染

// 一个组件内用了echarts图表
const Component = ({data}) => {
	return (
		<div>
			.......
			 <ReactEcharts style={{ width: '100%', height: '100%' }} option={option} />
			 .......
		</div>
	)
}

// 用useMemo封装
const getComponentMemo = useMemo(() => {
    return <Component data={currentData} />;
}, [currentData]);

// 调用封装的函数
<div>{getComponentMemo}</div>

React.memo与useMemo的选用

React.memo是一个高阶组件，useMemo是一个hook。
React.memo可以自定义更新比较方式，但需要注意传参为对象的情况，要进行深度比较

const Page = (props) => {}; // 页面组件

React.memo(Page, (props, nextProps) => {
	// 自定义比较code
  	return JSON.stringify(props) === JSON.stringify(nextProps); // 浅层比较
});