echarts 可视化数据展示 竖柱状图

效果

initChart6() {
        // 竖直柱状图
        var option = {
          grid:{
              x:20,
              y:20,
              x2:20,
              y2:50,
              containLabel:true
          },
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'shadow'
              }
          },
          xAxis: {
            splitLine: {show: false},
            data: ['助洁','助餐','助医','助浴','助行','助聊'],
            axisLabel: {
              show: true,
                textStyle: {
                  color: '#fff',  //更改坐标轴文字颜色
                  fontSize : 12      //更改坐标轴文字大小
                }
            },
            axisTick: {
                show: false
            },
            axisLine:{
                lineStyle:{
                    color:'#5e97b5' //更改坐标轴颜色
                }
          }
        },
        yAxis: {
            splitLine:{    //分割线
            show:true,
            lineStyle:{
              color:'#5e97b5',
              width: 1,
              opacity:.5,
              }
            },
            axisLabel: {
              show: true,
                textStyle: {
                  color: '#5e97b5',  //更改坐标轴文字颜色
                  fontSize : 12      //更改坐标轴文字大小
                }
            },
            axisTick: {
                show: false
            },
            axisLine:{
                lineStyle:{
                    color:'#5e97b5' //更改坐标轴颜色
                }
          }
        },
          series: [{
              name: 'bar',
              type: 'bar',
              barWidth: 15,
              top: 0,
              bottom: 50,
              itemStyle: {
                  normal: {
                      barBorderRadius: 15,
                      color: new echarts.graphic.LinearGradient(
                          0, 0, 0, 1,
                          [
                              {offset: 0, color: '#4cfdf7'},
                              {offset: 1, color: '#2a72eb'}
                          ]
                      )
                  }
              },
              data: [650,700,800,900,1000,1200]
          }]
      };
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(
        document.getElementById("main6"),
        "walden"
      );
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },