ReactEcharts 基本用法
相信很多新手對于 echarts 在React 中的使用會有許多疑惑，本文一起學習下，實現(xiàn)多系列漸變色柱狀圖葫笼！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';// 引入標題組件

二、參數(shù)配置

  //柱狀圖 圖表樣式 數(shù)據(jù)參數(shù)配置
  const getOption = () => {
    return {
      legend: {//圖例配置
        right: "10%",
        icon: 'circle',
        textStyle: {
          color: 'rgba(161,169,183,1)',
          fontSize: 12,
        },
        itemGap: 3,//間距
      },

      //表頭配置
      title: {
        text: "區(qū)域統(tǒng)計",
        subtext: '單位：(個)',
        subtextStyle: {
          fontSize: 11,
          color: '#939fbd',
        },
        textStyle: {
          fontSize: 14,
          align: "left",
          color: '#435372',
        },
      },
      dataset: {
         source: [
          ['可為空', '在線11數(shù)量', '離線11數(shù)量', '在線22數(shù)量', '離線22數(shù)量'],
          ['上海', 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;
}