// tsx
{chartData.map((item: any, index: any) => (
<div className="bot_charts_chart_item" key={index} ref={el => (chartRefList.current[index] = el)}></div>
))}
// 逻辑
const chartRefList = useRef<any>([]);
chartData.map((item: any, index: number) => {
const chartDom = chartRefList.current[index];
const myChart = echarts.init(chartDom);
const series = [
{
name: item.parameterName,
type,
smooth: true,
symbol: 'none',
animation: false,
areaStyle: {},
data: item.paramData.map((ele: any) => [ele.start, ele.val]),
markLine: {
data: markArr.map((ele: any) => {
if (ele === '1') {
ele = { type: 'max', name: '最大值', lineStyle: {} };
} else if (ele === '2') {
ele = { type: 'min', name: '最小值', lineStyle: {} };
} else if (ele === '3') {
ele = { type: 'average', name: '平均值', lineStyle: {} };
}
return ele;
}),
},
},
];
const option = {
tooltip: {
trigger: 'axis',
position: function (pt: any) {
return [pt[0], '10%'];
},
},
legend: {
// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
xAxis: {
type: 'time',
boundaryGap: false,
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
series,
};
option && myChart.setOption(option);
item.imgData = myChart.getDataURL({
type: 'png',
pixelRatio: 2,
backgroundColor: '#fff',
});
return item;
});
react中使用echarts实现多图表遍历渲染
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- //监听window的onresize事件,当窗口大小发生改变,那么就resize图表 window.onresi...
- Grid:并行显示多张图表 注意: 第一个图需为 有 x/y 轴的图,即不能为 Pie,其他位置顺序任意 Over...