**echarts-for-react插件中的简单demo,series 内的type控制展示类型,树状图,饼图,折线图等,注意树状图、折线图会自动延伸宽度!!文末附上完整代码 **
组装基本的数据内容
let echartsOption = {
title : {
text: '园区应急消耗分析 ',
},
tooltip : {
trigger: 'axis',
axisPointer : {// 坐标轴指示器,坐标轴触发有效
type : 'line'// 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
legend: {
data:['应急物资消耗数量'],
top:20
},
calculable : true,
xAxis : [
{
type : 'category',
data : ["催化剂事业部", "煤化一事业部", "新能源装备事业部"]/*这里是数据展示的列名字*/
}
],
yAxis : [
{
type : 'value'
}
],
color: colorArr,/*放在顶部let colorArr = ['#1890ff', '#2fc25b', '#facc14', '#223273', '#8543e0', '#13c2c2', '#3436c7', '#f04864'];*/
series : [
{
name:'应急物资消耗数量',
type:'bar',/*bar表示树状图,line表示折线图,pie表示为饼图*/
data:[1,1,1] /*这里是数据显示的数量*/
}
]
};
展示图
这里是插件本体只能设置高度,宽度最好让其自动适应
<div style={{left:"700px"}}>
<ReactEcharts
option={echartsOption }
style={{height: '700px' }}
theme="clear"
/>
</div>
这里是真实数据自动延伸效果,还要注意一个问题,数据列多的话,底座不会显示某几列数据名字,但是鼠标放在树状列表的话还是会显示出这个数据内容的。
完整代码
import React, { Component } from 'react';
import ReactEcharts from 'echarts-for-react';
import { connect } from 'react-redux';
import { Form } from 'antd';
let colorArr = ['#1890ff', '#2fc25b', '#facc14', '#223273', '#8543e0', '#13c2c2', '#3436c7', '#f04864'];
class Photo extends Component {
render() {
let echartsOption = {
title : {
text: '园区应急消耗分析 ',
},
tooltip : {
trigger: 'axis',
axisPointer : {// 坐标轴指示器,坐标轴触发有效
type : 'line'// 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
legend: {
data:['应急物资消耗数量'],
top:20
},
calculable : true,
xAxis : [
{
type : 'category',
data : ["催化剂事业部", "煤化一事业部", "新能源装备事业部"]/*这里是数据展示的列名字*/
}
],
yAxis : [
{
type : 'value'
}
],
color: colorArr,
series : [
{
name:'应急物资消耗数量',
type:'bar',/*bar表示树状图,line表示折线图,pie表示为饼图*/
data:[1,4,5] /*这里是数据显示的数量*/
}
]
};
return (
<div style={{left:"700px"}}>
<ReactEcharts
option={echartsOption }
style={{height: '700px' }}
theme="clear"
/>
</div>
)
}
}
谢谢观看,如遇到问题,请留言或wx16653144918