echarts柱状图的基础配置详解

option = {
  title: {
    text: '柱状图',
    subtext: '副标题'
  },
  
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
   tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
     trigger: 'axis',
     backgroundColor: 'rgba(32, 33, 36,.7)',
     borderColor: 'rgba(32, 33, 36,0.20)',
     borderWidth: 1,
     textStyle: { // 文字提示样式
       color: '#fff',
       fontSize: '12'
     },
     
},
 toolbox: {
    //右上角功能
    show: true,
    feature: {
      dataZoom: {
        yAxisIndex: 'none' //缩放区域，缩放还原区域
      },
      dataView: { readOnly: false }, //数据视图
      magicType: { type: ['line', 'bar'] }, //柱状/折线切换
      restore: {}, //还原
      saveAsImage: {} //保存图片
    }
  },

  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true, //阴影
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)' //阴影颜色
      },
      itemStyle: {
        //渐变色
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              { offset: 0, color: 'red' },
              {
                offset: 1,
                color: 'blue'
              }
            ],
            false
          )
        }
      }
    },
        {
      name: 'Placeholder',
      type: 'bar',
      stack: 'Total',
      itemStyle: {
        borderColor: 'transparent',
        color: 'transparent'
      },
      emphasis: {
        itemStyle: {
          borderColor: 'transparent',
          color: 'transparent'
        }
      },
      data: [0, 200, 400, 200, 300, 0]
    },
    {
      name: 'Life Cost',
      type: 'bar',
      stack: 'Total',
      label: {
        show: true,
        position: 'inside'
      },
      data: [300, 200, 300, 200, 200, 100]
    },
    {
      data: [120, 210, 150, 80, 70, 110, 130],
      type: 'bar',
      
      itemStyle: {
        //每个柱单独颜色
        normal: {
          color: function (params) {
            var colorlist = [
              'red',
              'yellow',
              'green',
              'blue',
              'pink',
              '#00ff77',
              'black'
            ];
            return colorlist[params.dataIndex];
          }
        }
      }
    }
  ]
};