在vue項目中使用echarts做柱狀圖的數據展示

　　這是用的echarts做的圖表數據展示效果

　　　　

 

　　1.先去在官網中下載echarts到項目中 地址:https://echarts.apache.org/zh/index.html 

　　　　下載:  npm install echarts --save

 　　2.在項目main.js中導入引用echarts

 

　　　　import echarts from 'echarts'
　　　　Vue.prototype.$echarts = echarts

 

　　3.然后就可以在vue里面正常使用了,

 mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
      // 基於准備好的dom，初始化echarts實例
      let myChart3 = this.$echarts.init(document.getElementById('myChart3'))
      // 繪制圖表
      myChart3.setOption({
        title: { text: '近七日的情況' },  //圖表標題

        tooltip: {},
        xAxis: {
          name: '日期',     //x軸標題
          data: ["1","2","3","4","5","6","7"]  ////x軸數據
        },
        yAxis: {
          name: '人數',     //y軸標題
          type: 'value',
        },
        series: [{
          type: 'bar',      //圖表形狀
          //柱狀圖的顏色
          itemStyle:{
            normal:{
              color:'#4ad2ff'
            }
          },
          barWidth : 10,    //柱圖寬度
          data: [120, 150, 80, 70, 110,35,46],  //圖表數據
        }]
      });

    }
  }

　　4.展示結果

  <div id="myChart3" :style="{width: '400px', height: '300px'}"></div>

　　以上就是在vue項目中使用echarts的全部過程了,數據換成自己的就可以啦! 有需要的快去試試吧