React封装折线图
实现思路:外层直接传入整个完整的options,实现渲染效果
·
实现思路:外层直接传入整个完整的options,实现渲染效果
xAxisData: x轴数据
seriesData: 系列数据
legend: 图例设置
tooltip: 悬浮窗设置
import React, { useState, useEffect } from 'react';
import EchartInit from '../EchartInit/index'
// 中间数据处理层
export default function MiddleLine(props: any) {
const {seriesData, xAxisData} = props;
const [options, setOptions] = useState({});
let colorDefault = ['#BA55D3', '#8A2BE2', '#FFB6C1', '#DB7093']
// formatter options
const init = () => {
let option = {
color:colorDefault,
legend: {
show: true,
},
// 悬浮提示框
tooltip: {
show: true,
trigger:'axis',
},
// x轴
xAxis: {
type: 'category',
data: xAxisData,
},
// y轴
yAxis: {
type: 'value'
},
// 显示数据
series: seriesData,
};
setOptions(option);
}
useEffect(() => {
init();
}, [seriesData])
return (
<EchartInit options={options} />
)
}
let xAxisData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
let seriesData = [
{
name: 'Forest',
data: [8120, 932, 1901, 934, 1290, 41330, 1320],
type: 'line',
smooth: true,
symbol:'none',
},
{
name: 'Steppe',
data: [1020, 732, 9901, 41934, 1290, 13300, 11320],
type: 'line',
smooth: true,
symbol:'none',
},
{
name: 'Banans',
data: [4020, 3732, 6901, 41934, 9290, 23300, 61320],
type: 'line',
smooth: true,
symbol:'none',
}
]
<div className="line">
<Line seriesData={seriesData} xAxisData={xAxisData} />
</div>
更多推荐
所有评论(0)