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

效果

  initChart2() {
        var option = {
          grid: {          //图表位置
            left: "2%",
            // right: "4%",
            top: "4%",
            // bottom: "20px",
            containLabel: true
          },
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'shadow'
              }
          },
          legend: {
            data: ['签约老人（千人）', '服务单数（千单）'],
            x:'left',
            y:'80%',
            icon:"circle",    //按钮样式
            textStyle:{ 
                fontSize: 14,
                color: '#ffffff'
            }
          },
          xAxis: {             //xy轴的数据
              type:'value',
              show:false,
          },
          yAxis: {
              type:'category',
              data: ['转塘','三墩','蒋村','西溪','留下','双浦'],
              splitLine: {show: false},
              axisLine: {
                  lineStyle: {
                      color: '#fff',
                  }
              },
            axisLabel: {
            show: true,
            textStyle: {
                color: '#fff',
                fontSize:'14'
            }
            }
          },
          series: [{
              name: '签约老人（千人）',
              type: 'bar',
              barWidth: 10,    //柱状图粗细
              itemStyle: {
                  normal: {
                      barBorderRadius: 20,
                      color: new echarts.graphic.LinearGradient(
                          0, 0, 1, 0,
                          [
                              {offset: 0, color: 'rgba(42,114,235,.5)'},   //渐变色
                              {offset: 1, color: 'rgba(42,114,235,1)'},
                          ]
                      )
                  }
              },
              data:[20,30,30,10,30,50]
          },{
              name: '服务单数（千单）',
              type: 'bar',
              barWidth: 10,
              itemStyle: {
                  normal: {
                      barBorderRadius: 20,
                      color: new echarts.graphic.LinearGradient(
                          0, 0, 1, 0,
                          [
                              {offset: 0, color: 'rgba(76,253,247,.5)'},
                              {offset: 1, color: 'rgba(76,253,247,1)'},
                          ]
                      )
                  }
              },
              data:[30,40,50,60,70,80]   //数据量
          }]
      };
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main2"));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },