数组数据柱状图

效果图

drawLines(){
          var chartDom = document.getElementById('myChart');
          var myChart = echarts.init(chartDom);
          var option;
          option = {
            legend: {
              top:'6%',
              right:'10%',
              icon: "circle",
              textStyle: {
                color: "#fff"
              },
            },
            tooltip: {},
            dataset: {
              source: [
                ['product', '好评', '中评', '差评'],
                ['城隍庙',284, 85.8, 27],
                ['风动碑',284, 73.4,27],
                ['广惠寺',284, 65.2,27],
                ['荣国府',168, 53.9,27],
                ['龙兴寺',284, 53.9,27],
                ['天宁寺',115, 53.9,27],
                ['赵云庙',284, 53.9,27],
              ]
            },
            grid:{
              left:'3%',
              right:'4%',
              bottom:'3%',
              // 显示左侧刻度
              containLabel:true,
              // show:true,
              // borderColor:'rgba(101, 124, 168, 1)'
            },
            xAxis: { 
                type: 'category',
                // 是否让折线和坐标轴留空隙
                // boundaryGap:true,
                boundaryGap: ['10%', '10%'],
                // 控制文字样式 比如颜色 大小
                axisLabel:{
                    color:'#999999',
                    fontSize:'12px',
                    fontFamily: 'Microsoft YaHei',
                    fontWeight: '400',
                },
                // X轴样式不显示
                axisLine:{
                    show:false
                },
                // 去除刻度
                axisTick:{
                    show:false
                },
                data: ['城隍庙','风动碑','广惠寺','荣国府','龙兴寺','天宁寺','赵云庙'],
                axisPointer: {
                  type: 'shadow'
                },
                splitLine:{
                    // X轴分割线颜色
                    lineStyle:{
                    color:'#1793C7'
                    }
                }
            },
            yAxis: {
                type: 'value',
                name:"人数/时间",
                // nameLocation:"start",
                nameTextStyle:{
                    color:"#fff",
                    fontSize:"12px"
                },
                boundaryGap: ['20%', '20%'],
                // name: 'Precipitation',
                min: 0,
                max: 300,
                interval: 60,
                axisTick:{
                    show:false
                },
                axisLabel: {
                    color:'#999999',
                    fontSize:'12px'
                },
                axisLine:{
                    show:false
                },
                // 
                splitLine:{
                    // Y轴分割线颜色
                    lineStyle:{
                    color:'#1793C7'
                    }
                }
            },
            series: [
              { type: 'bar',
              // 柱形宽度
                barWidth:'8%',
                borderColor: "#00CCFF",
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: 'rgba(15, 176, 249, 1)' },
                    { offset: 1, color: 'rgba(0, 204, 255, 0.2)' }
                  ]),
                }

              },
              { type: 'bar',
                barWidth:'8%',
                  itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: 'rgba(15, 252, 253, 1)' },
                    { offset: 1, color: 'rgba(15, 252, 253, 0.5)' }
                  ]),
                }

              }, 
              { type: 'bar',
                barWidth:'8%',
                  itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: 'rgba(255, 155, 82, 1)' },
                    { offset: 1, color: 'rgba(255, 155, 82, 0.5)' }
                  ]),
                }
              }
            ]
          };
        option && myChart.setOption(option);
      }
    }