SOURCE

<template>
  <div class="home">
    <div id="myChart" :style="{width: '400px',height:'280px',marginTop:'100px'}"></div>
  </div>
</template>
<script>
let echarts = require('echarts')
export default {
  name: 'Home',
  components: {},
  mounted(){
    this.drawBar();
  },
  methods: {
    drawBar(){
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart'))
      let option = {
        title: {
          text: '柱状图示例',
          textStyle:{					//---主标题内容样式
            color:'#000',
          },

          subtext:'作者：Axjy',			//---副标题内容样式
          subtextStyle:{
            color:'#bbb'
          },

          padding:[10,0,0,0]				//---标题位置,因为图形是是放在一个dom中,因此用padding属性来定位

        },
        xAxis: {
          show:true,			//---是否显示
          name:'月份',      //---轴名称
          position:'bottom',	//---x轴位置'top','bottom'
          offset:15,		//---x轴相对于默认位置的偏移
          nameLocation:'start',	//---轴名称相对位置'start','center','end'
          nameTextStyle:{	//---坐标轴名称样式
            color:"#000",
            padding:[5,0,0,-5],	//---坐标轴名称相对位置
          },
          nameGap:15,					//---坐标轴名称与轴线之间的距离
          nameRotate:0,			//---坐标轴名字旋转
          data: ['1月', '2月', '3月', '4月', '5月','6月', '7月'],
        },
        yAxis: {
          position:'right',
          name:'销量',				//---轴名称
        },
        series: [{
          name: '销量',
          type: 'bar',
          //设置柱状图大小
          barWidth: 20,
          //设置柱状图渐变颜色
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "#1268f3" // 0% 处的颜色
                }, {
                  offset: 0.6,
                  color: "#08a4fa" // 60% 处的颜色
                }, {
                  offset: 1,
                  color: "#01ccfe" // 100% 处的颜色
                }], false),
              label: {
                show: true,		//开启显示
                position: 'top',	//在上方显示
                textStyle: {	    //数值样式
                  color: 'black',
                  fontSize: 14
                }
              }
            }
          },
          data: [10, 52, 200, 334, 390, 330, 220]
        }]
      }
      // 指定图表的配置项和数据
      myChart.setOption(option);
    }
  }
}
</script>