echart React使用折线图
/** * @file 发电碳排放强度 */ import * as echarts from 'echarts'; import { useEffect, useRef } from 'react'; import { xDataYear } from '.'; interface DataProps { powerHotData: number[][]; } export const ElectricityChart = (props: DataProps) => { const chartRef = useRef<HTMLDivElement>(null); const echartsInstance = useRef<echarts.ECharts>(); const ecahrtsOption = { title: { text: '发电行业碳排放强度', subtext: '单位:tCO₂/MWh或tCO₂/GJ', }, tooltip: { trigger: 'axis', }, legend: { data: ['供电排放强度', '供热排放强度'], top: '24', }, grid: { top: '15%', left: '5%', right: '5%', bottom: '22', }, xAxis: { type: 'category', data: xDataYear(), }, yAxis: { type: 'value', }, series: [ { name: '供电排放强度', type: 'line', stack: 'Total', data: props?.powerHotData?.[0], }, { name: '供热排放强度', type: 'line', stack: 'Total', data: props?.powerHotData?.[1], }, ], }; useEffect(() => { echartsInstance.current = echarts.init(chartRef.current as HTMLDivElement); echartsInstance.current?.setOption(ecahrtsOption); }, [props.powerHotData]); return <div ref={chartRef} style={{ width: '100%', height: '490px' }} />; };
<ElectricityChart powerHotData={powerHotData} />