React 中使用Echarts实现多系列渐变色柱状图

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;
}