美文网首页
React 中使用Echarts实现多系列渐变色柱状图

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

作者: 念雅_a9ef | 来源:发表于2020-09-11 17:14 被阅读0次

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

    相关文章

      网友评论

          本文标题:React 中使用Echarts实现多系列渐变色柱状图

          本文链接:https://www.haomeiwen.com/subject/tjezlktx.html