ysx_柱状图echarts 柱状配置项内容和展示

测试

      //5.0以下版本效果更好
 var xData = (function () {
        var data = []
        //最大月数
        for (var i = 1; i < 7; i++) {
          data.push(i + '月')
        }
        return data
      })()
option = {
  backgroundColor:'#010429',
        title: {
          text: '数量',
          left: '1%',
          top: '1%',
          textStyle: {
            color: '#fff'
            //  type: 'dashed',
          }
        },
        // backgroundColor: '#020D20',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            textStyle: {
              color: '#fff'
            }
          },
          backgroundColor: '#05294D',
          borderColor: '#135469',
          borderWidth: 2
          // padding: [20, 20, 20, 20]
        },
        grid: {
          left: '4%',
          top: '15%',
          right: '3%',
          bottom: '18%',
          // borderWidth: 0,
          // top: '20%',
          // left: '10%',
          // bottom: '25%',
          // width: '88%', // 宽度
          // height: '58%', // 高度
          textStyle: {
            color: '#fff'
          }
        },
        legend: {
          top: '0%',
          // right: '10%',
          textStyle: {
            fontSize: '25px',
            fontFamily: 'MicrosoftYaHeiUI',
            color: '#FFFFFF'
          },
          // itemWidth: 28,
          // itemHeight: 28,
          data: [
            // {
            //     name: '周转量',
            //     icon:
            //         'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAA1ElEQVR4Xu2WsQ2AMBADP4ghYBtGZxsYAhHEAMQ19tF+g+/PSVqFfy08fwEAA8IJUIFwATgEqQAVCCdABcIF4BagAlQgnAAVCBeAW4AKUIFwAlQgXABuASpABcIJjCtw9O3vfOaquta2f+UYApjO3v8O4P3/e2mfOQEw2jAGpFeg0g9BhwNQZeAlqAi5zzHAfcMqHwYoQu5zDHDfsMqHAYqQ+xwD3Des8mGAIuQ+xwD3Dat8GKAIuc8xwH3DKh8GKELucwxw37DKhwGKkPscA9w3rPI9drIYQbytq9EAAAAASUVORK5CYII=',
            // },
            // {
            //     name: '趋势',
            //     icon:
            //         'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA1UlEQVRYR+2UMQ7CMAxFvxdyFtqVhREpZ+AEnIyRM1RiY2NsOQgTXYzSUlVNm9ZWhwrJnvPjpxfHhI2LNu4PAzADZsAM/I+BT5FnAF8JqBl0cb6sNFu0z/N751+nLisy0ISJb2DkTZBQgukshYjyT+ergxhgEA6NQwUQIcQoH4HPGpgKtwZ+NhYglpq3MhM1F5ZcLDmTBJCE1wImZ0DSvAuvfaKRAU3zJIRySAczUBfZg4GjdMInIZTfNALY3wFy6xaNblGJFpFm42nPGoAZMANmwAx8ASjjyiGj/fCxAAAAAElFTkSuQmCC',
            // },
          ]
        },
        dataZoom: [
          {
            type: 'slider',
            xAxisIndex: 0,
            startValue: 0,
            endValue: 12,
            filterMode: 'filter',
            height: 3,
            bottom: 20,
            handleSize: '300%',
            handleIcon:
              'image://data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTg2NDg1MzkzMjI2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ3MzUiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNTEyIDBDMjI2Ljc0Mjg1NyAwIDAgMjI2Ljc0Mjg1NyAwIDUxMnMyMjYuNzQyODU3IDUxMiA1MTIgNTEyIDUxMi0yMjYuNzQyODU3IDUxMi01MTItMjI2Ljc0Mjg1Ny01MTItNTEyLTUxMnogbTAgODc3LjcxNDI4NmMtMjA0LjggMC0zNjUuNzE0Mjg2LTE2MC45MTQyODYtMzY1LjcxNDI4Ni0zNjUuNzE0Mjg2czE2MC45MTQyODYtMzY1LjcxNDI4NiAzNjUuNzE0Mjg2LTM2NS43MTQyODYgMzY1LjcxNDI4NiAxNjAuOTE0Mjg2IDM2NS43MTQyODYgMzY1LjcxNDI4Ni0xNjAuOTE0Mjg2IDM2NS43MTQyODYtMzY1LjcxNDI4NiAzNjUuNzE0Mjg2eiIgZmlsbD0iIzRBQkRDRiIgcC1pZD0iNDczNiI+PC9wYXRoPjxwYXRoIGQ9Ik01MTIgNTEybS0zNjUuNzE0Mjg2IDBhMzY1LjcxNDI4NiAzNjUuNzE0Mjg2IDAgMSAwIDczMS40Mjg1NzIgMCAzNjUuNzE0Mjg2IDM2NS43MTQyODYgMCAxIDAtNzMxLjQyODU3MiAwWiIgZmlsbD0iI0ZGRkZGRiIgcC1pZD0iNDczNyI+PC9wYXRoPjwvc3ZnPg==',
            handleStyle: {
              color: '#0E1557'
            },
            backgroundColor: '#1c3a75',
            fillerColor: '#295fcc',
            borderColor: 'transparent',
            textStyle: {
              color: 'transparent'
            },
            dataBackground: {
              areaStyle: {
                opacity: 0
              },
              lineStyle: {
                opacity: 0
              }
            }
          }
        ],
        xAxis: [
          {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,.5)'
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitArea: {
              show: false
            },
            axisLabel: {
              interval: 0,
              color: 'rgba(255,255,255,0.7)',
              //X轴字体大小
              fontSize: 20
            },
            data: xData
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              //坐标轴在 grid 区域中的分隔线。 #1C2F44
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#343654'
              }
            },
            axisLine: {
              //是否显示刻度标签
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              color: '#588D9E', //'rgba(255,255,255,0.5)',
              //Y轴字体大小
              fontSize: 20
            },
            splitArea: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '周转量', //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列
            type: 'bar', //type 决定自己的图表类型
            // "stack": "总量",
            barMaxWidth: 15, //柱条的最大宽度
            barGap: '10%', //不同系列的柱间距离，为百分比（如 '30%'，表示柱子宽度的 30%）
            itemStyle: {
              //自定义特殊 itemStyle，仅对该数据项有效
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#0080FF' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#03CDFA' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              }
            },
            data: [100, 60, 70, 30, 150, 250],
            label: {
              show: true,
              position: 'top',
              distance: 10,
              fontSize: 20,
              color: '#01fff4'
            }
          },
          {
            name: '趋势',
            type: 'line', //折线
            symbol: 'circle',
            itemStyle: {
              normal: {
                color: 'rgba(15, 210, 236, 1)', //圆点颜色
                barBorderRadius: 1
              }
            },
            lineStyle: {
              normal: {
                width: 1,
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#05E0FB' // 0% 处的颜色
                    },
                    {
                      offset: 0.45,
                      color: '#05E0FB' // 45% 处的颜色
                    },
                    {
                      offset: 0.85,
                      color: '#05E0FB' // 85% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#05E0FB' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              }
            },
            data: [100, 60, 70, 30, 150, 250]
          }
        ]
      }