vue引用echarts实现数据集柱状图，修改基本样式。

 代码

---

<template>
  <div id="project-overview">
    
        <div class="Chart_one" id="myChartCurveb">
     
        </div>

  </div>
</template>

<script>
export default {
  mounted() {
    this.drawLine()
  },
  methods: {
    drawLine() {
      let myChart = this.$echarts.init(document.getElementById('myChartCurveb'))
      let options = {
        legend: {
         // 图例的位置 
          bottom: '0px',
          textStyle: {
            fontSize: '12',
            color: '#fff'
          }
        },
        tooltip: {
          axisPointer: {          
            type: 'shadow'          // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '1%',
          right: '1%',
          top: '5%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: {     //设置x轴
          type: 'category',
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          splitLine: {show: false},//去除网格线
          axisLabel: {
            show: true,  // 是否显示
            interval: 0,
            textStyle: {
              fontSize: '12',
              color: '#fff'
            }

          },
          axisTick:{       //x轴刻度线
            show:false,
          },
          axisLine: {       // 坐标轴 轴线
            show: false,  // 是否显示
          },
        },
        yAxis: {
          show: false,  // 是否显示
          splitLine: {
            show: false
            },//去除网格线

            // 轴线颜色及轴线文字颜色，但有单独设置文字颜色的，可以覆盖这个颜色
          axisLine: {      
            show: false,  // 是否显示
            // ------   线 ---------
            lineStyle: {
              type: 'solid'
            }
          },
          // 轴字体样式
          axisLabel: {
            interval: 0,
            textStyle: {
              fontSize: '12',
              color: '#fff'
            }
          },
        },
        series: [{
          name: "女生",
          type: "bar",
          barGap: '0%',
          barWidth: '25%',
          data: [5, 20, 40, 10, 10, 20, 49],
          itemStyle: {
            // 给每个柱子设置渐变颜色
            normal: {
              color: new this.$echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#17AAF7'},
                    {offset: 1, color: 'rgba(23, 170, 247, 0.3)'}
                  ]
              ),
              label: {
                show: true,  //开启显示
                position: 'top',  //在上方显示
                textStyle: {  //数值样式
                  fontSize: '10',
                  color: '#fff'
                }
              }
            }
          }
        },
          {
            name: "男生",
            type: "bar",
            barGap: '0%',
            barWidth: '25%',
            data: [190, 29, 46, 12, 90, 70, 23],
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: '#999999'},
                      {offset: 1, color: 'rgba(153, 153, 153, 0.3)'}
                    ]
                ),
                label: {
                  show: true,  //开启显示
                  position: 'top',  //在上方显示
                  textStyle: {  //数值样式
                    fontSize: '10',
                    color: '#fff'
                  }
                }
              }
            }
          }],
      }
      myChart.setOption(options)
    },


  }
}

</script>

<style lang="less" scoped>
#project-overview {
  width: 100%;
  height: 100%;
    .Chart_one {
      width: 100%;
      height: 100%;
      padding: 10px;
      box-sizing: border-box;

    }
    .Chart_one-title{
      display:inline-block;
      width: 100%;
      height: 10px;
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 10px;
    }
 
}
</style>

初来乍到，有啥规矩，评论区记得 叮！！ 一下哦。