Vue：echarts画图实战，异步获取数据在Vue上使用echarts进行画图

Vue：echarts画图实战，异步获取数据在Vue上使用echarts进行画图

---

---

一、效果图

---

---

二、资源

• 主题编辑器

• ECharts 教程

• 实现代码------想要进行实战的同学可以研究以下代码，下面的代码就是生成以上图片的代码，仔细研究10分钟就可以学会了，Vue上使用echarts还是很简单的

  <template>
    <div>
      <div>
        <p>
          <span>
            技术统计
          </span>
        </p>
      </div>
  
      <div id="myChart"
           style="
           width: 500px;
           height:500px;
           position: absolute;
           left: 19%;
           top: 24%;"
      >
      </div>
  
      <div id="myChart1"
           style="
             width: 500px;
             height:500px;
             position: absolute;
             left: 58%;
             top: 24%;"
      >
      </div>
  
    </div>
  </template>
  
  
  <script>
  import * as echarts from 'echarts';
  
  require('echarts/lib/chart/bar')
  require('echarts/lib/chart/pie')
  
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')
  
  
  export default {
  
    data(){
      return{
        allPeopleNum:0,
        superManagerNum:0,
        agencyNum:0,
        factoryManagerNum:0,
  
        factoryNum:0,
        equipmentNum:0,
        orderNum:0,
        productNum:0,
      }
    },
  
    mounted() {
      this.drawLine0();
      this.drawLine1();
    },
  
    methods: {
  
      async drawLine0() {
        const {data:res} = await this.$http.get("getBusinessNum");
        this.factoryNum=res.factoryNum;
        this.equipmentNum=res.equipmentNum;
        this.orderNum=res.orderNum;
        this.productNum=res.productNum;
  
        let myChart = echarts.init(document.getElementById('myChart'));
  
        myChart.setOption({
          title: {text: '                                     业务数据'},
          tooltip: {},
          xAxis: {
            axisLabel: {interval: 0 },
            data: ['云工厂', '工厂设备', '订单', '生产产品'],
          },
          yAxis: [
            {
              type: 'value',
              axisLabel: {formatter: '{value}'}
            }
          ],
          series: [{
            name: '名称',
            type: 'bar',
            data:[
              {
                value:this.factoryNum,
                itemStyle:{
                  normal:{color:'#516b91'}
                }
              },
              {
                value:this.equipmentNum,
                itemStyle:{
                  normal:{color:'#59c4e6'}
                }
              },
              {
                value:this.orderNum,
                itemStyle:{
                  normal:{color:'#edafda'}
                }
              },
              {
                value:this.productNum,
                itemStyle:{
                  normal:{color:'#93b7e3'}
                }
              }
            ],
          }]
        });
      },
  
      async drawLine1() {
  
        const {data:res} = await this.$http.get("getPeopleNum");
  
        this.allPeopleNum=res.allPeopleNum;
        this.superManagerNum=res.superManagerNum;
        this.agencyNum=res.agencyNum;
        this.factoryManagerNum=res.factoryManagerNum;
  
  
        let myChart = echarts.init(document.getElementById('myChart1'))
  
        myChart.setOption({
          title: {text: '                                      人员数据'},
          series : [
            {
              type: 'pie',
              color: [
                '#6a92ea','#B6A2DE','#2EC7C9','#FFCB8C'
              ],
              radius: '67%',
              data:[
                {value:this.allPeopleNum, name:'总人数'},
                {value:this.superManagerNum, name:'超级管理员'},
                {value:this.agencyNum, name:'经销商'},
                {value:this.factoryManagerNum, name:'云工厂管理员'},
              ]
            }
          ]
        });
      },
  
    },
  
  }
  </script>
  
  
  
  <style lang="less" scoped>
  
  p {
    text-align: center;
    text-indent: -2em;
  
    span {
      font-weight: bolder;
      font-size: 21px;
    }
  }
  
  </style>