import React from 'react';
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/line';
interface IProps {
echartId: string,
data: ISeriesData,
chartOptions?: IEcharts,
gradients: boolean,
}
interface IEcharts {
[key: string]: any
}
interface IOption {
[key: string]: any
}
//传过来的数据格式
interface ISeriesData {
name: Array<string>,
value: Array<ISeriesValue>
}
interface ISeriesValue {
name: string,
value: Array<number>,
color: string
}
interface IState {
xAxisData: Array<string>,// 横坐标的显示值
legendData: Array<string>, //不同系列的标记(symbol)
seriesData: Array<Object> // 序列数据值 series:[{name,value:[1,2,3]},{name,value:[1,2,3]}]
option: IOption
}
class LineEchart extends React.Component<IProps>{
state: IState = {
xAxisData: [],
legendData: [],
seriesData: [],
option: {}
}
//把传过来的数据进行初始化
renderData() {
this.setState({ xAxisData: [...this.props.data.name] || [] })
//this.state.xAxisData = [...this.props.data.name] || []
this.props.data && this.props.data.value.length > 0 && this.props.data.value.forEach(item => {
this.props.gradients &&
this.state.seriesData.push({
name: item.name,
type: 'line',
smooth: true, //光滑线还是折现
symbol: 'none', //线上是否有查看点
data: [...item.value],
color: item.color,
areaStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0.5,
color: item.color // 0% 处的颜色
},
{
offset: 1,
color: "#FFFFFF" // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
opacity: 0.5
}
})
this.props.gradients || this.state.seriesData.push({
name: item.name,
type: 'line',
smooth: true,
data: [...item.value],
color: item.color
})
this.state.legendData.push(item.name)
})
}
initOptions() {
let _this = this;
let xAxis = JSON.parse(JSON.stringify(_this.state.xAxisData));
let seriesList = JSON.parse(JSON.stringify(_this.state.seriesData));
let optionConfig: IOption = {
title: {
show: false,
text: '',
x: '',
y: ''
},
legend: {
show: false,
data: _this.state.legendData,
right: "auto",
type: "scroll",
orient: "horizontal",
left: "center",
bottom: "1%",
},
tooltip: {
trigger: "",
},
xAxis: {
show: true,
data: xAxis,
boundaryGap: true,
axisLabel: {
interval: 0
},
nameLocation: 'start'
},
yAxis: {
name: "",
show: false,
axisLabel: {
},
toolbox: {},
animation: false
},
//图表太小,撑不开DIV问题
grid: {
},
series: seriesList
}
this.props.chartOptions && Object.keys(this.props.chartOptions).forEach((key) => {
optionConfig[key] = Object.assign(optionConfig[key] || {}, !!this.props.chartOptions && this.props.chartOptions[key])
})
this.setState({ option: optionConfig }, () => {
let lineChart = echarts.init(document.getElementById(this.props.echartId))
lineChart.resize();
lineChart.setOption(this.state.option)
lineChart.resize();
})
}
componentDidMount() {
this.renderData()
this.initOptions()
window.addEventListener("resize", this.resizeWin.bind(this));
}
componentDidUpdate(){
this.resizeWin()
}
resizeWin = () => {
let echartId=document.getElementById(this.props.echartId)
if (!!echartId) {
let lineChart = echarts.init(echartId)
lineChart.resize();
}
}
render() {
const styles = {
display: 'flex',
justifycontent: 'center',
alignitems: 'center',
width: '100%',
height: '100%'
}
return (
<div style={{ position: 'relative', width: '100%', height: '100%' }}>
<div id={this.props.echartId} style={styles} ></div>
</div>
)
}
}
export default LineEchart
解决问题1:图表按需引入,则需要建立****.d.ts文件
declare module 'echarts' {
const echarts: any;
export default echarts;
}
declare module 'echarts/lib/echarts'
declare module 'echarts/lib/chart/line'
declare module 'echarts/lib/chart/radar'
解决问题2:AntDesign 的TabPane切换时,改变浏览器大小,在切换回来图表的宽高变为100px
componentDidUpdate(){
this.resizeWin()
}
页面重新调用resize方法即可。
数据格式:
smartSupport: {
name: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
value: [{
name: 'Test',
value: [7, 5, 5, 4, 6, 6, 5, 5, 5, 2],
color: '#5B8FF9'
}]
}
或者
lineEchart: {
name: ["1", "5", "10", "15", "20", "25", "30"],
value: [
{
name: '我的总得分',
value: [100, 50, 110, 200, 250, 300, 400],
color: '#FF9D4D'
},
{
name: '行业前三得分',
value: [80, 80, 100, 120, 130, 200, 250],
color: '#5AD8A6'
},
{
name: '行业平均',
value: [80, 80, 100, 70, 80, 60, 50],
color: '#5B8FF9'
}
]
}
调用方式:
<LineEchart data={this.state.autoData} chartOptions={optionAuto} echartId="autoDataIdQuestion" gradients={true}/>
支持单条折线图或者多条折线图: