ReactEcharts 基本用法
相信很多新手对于 echarts 在React 中的使用会有许多疑惑,本文一起学习下,实现多系列渐变色柱状图!fighting!!
echarts 十分强大,能够完美做到适配多重屏幕尺寸,不得不感慨,这些程序员用心做事情,值得我们学习、致敬!
多系列渐变色柱状图.png
一、导入
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';// 引入柱状图
import 'echarts/lib/component/tooltip';// 引入提示框和标题组件
import 'echarts/lib/component/title';// 引入标题组件
二、参数配置
//柱状图 图表样式 数据参数配置
const getOption = () => {
return {
legend: {//图例配置
right: "10%",
icon: 'circle',
textStyle: {
color: 'rgba(161,169,183,1)',
fontSize: 12,
},
itemGap: 3,//间距
},
//表头配置
title: {
text: "区域统计",
subtext: '单位:(个)',
subtextStyle: {
fontSize: 11,
color: '#939fbd',
},
textStyle: {
fontSize: 14,
align: "left",
color: '#435372',
},
},
dataset: {
source: [
['可为空', '在线11数量', '离线11数量', '在线22数量', '离线22数量'],
['上海', 665, 62, 958,94],
['北京', 202, 22, 880,60],
['浙江', 583,50, 300, 55],
['广州', 816,80, 550, 40],
],
},
tooltip: {},//配置指示器
xAxis: [{
type: 'category',
nameTextStyle: {
color: "rgba(147,159,189,1)",//这个是无效的,默认取axisLine.lineStyle的颜色
fontSize: 12,
},
axisLine: {
show: false,
lineStyle: {
color: "rgba(147,159,189,1)"
}
},
axisTick: {
show: false
}
}],
yAxis: [{
show: true,
nameTextStyle: {
color: "rgba(147,159,189,1)",
fontWeight: "normal",
fontSize: 12,
},
axisLine: {
show: false,
lineStyle: {
color: "rgba(147,159,189,1)"
}
},
axisTick: {
show: false
}
}],
series: [
{
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#c6b3fc'},
{offset: 1, color: '#9c7bf7'}
]
),
},
barWidth: 12,
barCategoryGap: '2%',
barGap: '40%',
},
{
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#57d2ff'},
{offset: 1, color: '#33a8ff'}
]
),
},
barWidth: 12,
barCategoryGap: '2%',
barGap: '40%',
},
{
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#76f4ad'},
{offset: 1, color: '#11d2cd'}
]
),
},
barWidth: 12,
barCategoryGap: '2%',
barGap: '40%',
},
{
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#FFB5C5'},
{offset: 1, color: '#EEA9B8'}
]
),
},
barWidth: 12,
barCategoryGap: '2%',
barGap: '40%',
}
]
};
}
三、布局引入
return <div>
<div className={styles.bar}>
<ReactEcharts
option={getOption()}
notMerge={true}
lazyUpdate={true}
style={{width: '100%', height: '100%'}}
/>
</div>
</div>
四、css样式
.bar {
margin-top: 15px;
border-radius: 4px;
background-color: #ffffff;
/* width: calc(100vw * 3 / 5); */
width: 100%;
@media screen and (max-width: 1280px) {
width: 90vw;
}
height: calc(34 / 100 * 100vh);
padding: 19px 0px 0px 24px;
}
网友评论