解决办法:

在动态获取值的函数前面加 访问器属性  get ,去获取对象的属性

@inject('commonStore', 'reportUIStore')
@observer
class LineEcharts extends React.Component<Props> {
drawChart = () => {
const { nameArr } = this.props
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: 'rgba(24,144,255,0.2)',
},
},
formatter: (params: Params) => {
let tip = ``
if (params.length) {
tip += params[0].axisValue + '<br/>'
}
if (params.length && params.length === 1) {
tip +=
params[0].marker +
params[0].seriesName +
' :' +
params[0].data +
'<br>'
}
if (params.length > 1) {
let num = params[0].data - params[1].data
let rate = ((num / params[1].data) * 100).toFixed(2)
if (num === 0) {
rate = `0%`
} else {
rate = `${rate}%`
}
for (let i = 0; i < params.length; i++) {
if (nameArr && nameArr.length) {
params[i].seriesName = nameArr[i]
tip +=
params[i].marker +
params[i].seriesName +
' :' +
params[i].data +
'<br>'
}
}
tip += `变化:${num}(${rate})`
}
return tip
},
},
grid: {
left: '3%',
right: '6%',
bottom: '10%',
containLabel: true,
},
xAxis: {
axisLabel: {
textStyle: {
color: '#999',
},
},
type: 'category',
boundaryGap: true,
data: range(24).map(hour => `${hour}:00`),
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: '#ccc',
width: 1,
},
},
},
yAxis: [
{
type: 'value',
name: '',
min: 0,
max: 12000,
interval: 3000,
axisLabel: {
formatter: '{value}',
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: '#ccc',
width: 1,
},
},
splitLine: {
show: true,
lineStyle: {
color: '#eee',
},
},
},
{
type: 'value',
name: '',
min: 0,
max: 150,
interval: 50,
axisLabel: {
formatter: '{value}',
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: '#ccc',
width: 1,
},
},
splitLine: {
show: true,
lineStyle: {
color: '#eee',
},
},
},
],
series: this.handlData,
}
return option
} // 注意这儿: 添加了get 错误消失了
get handlData() {
let series: Series[] = []
let { dataArr, nameArr, colors } = this.props
dataArr.map((itm, i) => {
let serie = {
name: nameArr[i],
type: 'line',
symbol: 'circle',
color: colors[i],
symbolSize: 4,
itemStyle: {
normal: {
lineStyle: {
width: 2,
color: colors[i],
},
},
},
data: dataArr[i],
}
series.push(serie)
})
return series
}
render() {
return (
<div>
<Loading loading={false}>
       // 如果serie需要自定义,而且是可添加或删减的,可以使用 notMerge 使之不合并,从而及时更新数据
            <ReactEcharts notMerge  option={this.drawChart()} />  
       </Loading>
</div>
)
}
} export default LineEcharts export interface Props {
reportUIStore?: ReportUIStore
dataArr: number[][]
nameArr: string[]
colors: string[]
} export interface Params {
param: ParamsSingle[]
length: number
} export interface ParamsSingle {
seriesName: string
// 数据名,类目名
name: string
// 传入的原始数据项
data: Object
// 数据图形的颜色
color: string
marker: string
} export interface Series {
name: string,
type: string,
symbol: string,
color: string,
symbolSize: number,
itemStyle: {
normal: {
lineStyle: {
width: number,
color: string
}
}
},
data: number[],
}

使用echarts-for-react 绘制折线图 报错:`series.type should be specified `的更多相关文章

  1. 【带着canvas去流浪】(2)绘制折线图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 3.1 一般折线图 3.2 用贝塞尔曲线绘制平滑折线图 四. 大数据量场景 示例代码托管在:https://github.com/dashnowo ...

  2. 带着canvas去流浪系列之二 绘制折线图

    [摘要] 用canvasAPI实现echarts简易图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...

  3. 【Canvas】(2)---绘制折线图

    绘制折线图 之前在工作的时候,用过百度的ECharts绘制折线图,上手很简单,这里通过canvas绘制一个简单的折线图.这里将一整个绘制过程分为几个步骤: 1.绘制网格 2.绘制坐标系 3.绘制点 4 ...

  4. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. php中用GD绘制折线图

    php中用GD绘制折线图,代码如下: Class Chart{ private $image; // 定义图像 private $title; // 定义标题 private $ydata; // 定 ...

  6. UUChart的使用--iOS绘制折线图

    UUChart是一个用于绘制图表的第三方,尤其适合去绘制折线图. 二.下载地址: https://github.com/ZhipingYang/UUChartView 三.使用 第一步.首先我们将下载 ...

  7. html5绘制折线图

    html5绘制折线图详细代码 <html> <canvas id="a_canvas" width="1000" height="7 ...

  8. Android自己定义组件系列【9】——Canvas绘制折线图

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了非常多插件,可是非常多时候我们须要依据详细项目自己定义这些图表,这一篇文章我们一起来看看怎样在Android中使用Can ...

  9. JFreeChart绘制折线图实例

    JFreeChart是JAVA平台上的一个开放的第三方图表绘制类库.只要下载JFreeChart的类库,导入项目即可使用.下面是一个绘制折线图的实例.各处注释都已经写的比较清晰了. package c ...

随机推荐

  1. WEB框架-Django组件学习-分页器学习

    1.分页器基础学习 1.1 补充知识-批量创建 数据库中数据批量创建,不要每创建一个就往数据库中塞一个,会造成撞库,造成大量I/O操作,速速较慢,应该采用一次性创建大量数据,一次性将大量数据塞入到数据 ...

  2. 纯代码系列:Python实现验证码图片(PIL库经典用法用法,爬虫12306思路)

    现在的网页中,为了防止机器人提交表单,图片验证码是很常见的应对手段之一.这里就不详细介绍了,相信大家都遇到过. 现在就给出用Python的PIL库实现验证码图片的代码.代码中有详细注释. #!/usr ...

  3. iOS开发基础-UIScrollView实现图片缩放

    当用户在 UIScrollView 上使用捏合手势时, UIScrollView 会给 UIScrollViewDelegate 协议发送一条消息,并调用代理的 viewForZoomingInScr ...

  4. Asp.Net Core SignalR 用泛型Hub优雅的调用前端方法及传参

    继续学习 最近一直在使用Asp.Net Core SignalR(下面成SignalR Core)为小程序提供websocket支持,前端时间也发了一个学习笔记,在使用过程中稍微看了下它的源码,不得不 ...

  5. 三十、小程序解析HTML(对富文本返回数据的处理)

    1.首先需要下载插件wxParse 下载地址 https://github.com/ZCLegendary/WXNews 百度云盘有保存 WXML <import src="../.. ...

  6. 利用cocoapods管理开源项目,支持 pod install安装整个流程记录(github公有库)

    利用cocoapods管理开源项目,支持 pod install安装整个流程记录(github公有库),完成预期的任务,大致有下面几步: 1.代码提交到github平台 2.创建.podspec 3. ...

  7. 08-JavaScript中的函数

    JavaScript中的函数 1.函数简介 函数:就是将一些语句进行封装,然后通过调用的形式,执行这些语句. 函数的作用: 将大量重复的语句写在函数里,以后需要这些语句的时候,可以直接调用函数,避免重 ...

  8. C语言之概述

    //添加对函数的说明(规范) #include<stdio.h> /*A simple C progress*/ int main(void) { int num; /*Define an ...

  9. 用Python开发小学二年级口算自动出题程序

    版权声明:本文为博主原创文章,欢迎转载,并请注明出处.联系方式:460356155@qq.com 武汉光谷一小二年级要求家长每天要给小孩出口算题目,让孩子练习. 根据老师出题要求编写了Python程序 ...

  10. Python可变参数*和**

    可变参数 在Python函数中,还可以定义可变参数.顾名思义,可变参数就是传入的参数个数是可变的,可以是1个.2个到任意个,还可以是0个. 我们以数学题为例子,给定一组数字a,b,c……,请计算a2 ...