echarts-for-react 简单demo
**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
