在vue-cli项目中使用echarts

1.安装echarts依赖

npm install echarts -S

2.或者使用国内的淘宝镜像：

安装：npm install -g cnpm --registry=https://registry.npm.taobao.org

使用：cnpm install echarts -S

3.创建图表　　

　.全局引入main.js

// 引入echarts
import echarts from 'echarts'

Vue.prototype.$echarts = echarts 

　　.eharts.vue

<div style="display: flex;justify-content:space-between;">
    <div id="left"  :style="{width: '42%', height: '300px'}"></div>
    <div id="right"  :style="{width: '42%', height: '300px'}"></div>
</div>

　　

<script>
import * as index from '@/api/index'
import * as filter from '@/filters/index'
  export default {
    data() {
      return {
        listLeft: [], //左边客户统计图
        listRight: []  //右边融资信息统计图
      };
    },
    mounted(){
          // 左侧 客户接入统计
          index.page('', `/api/admin/bank/getGwBankInfo`)
            .then(res => {
              this.listLeft = res.data.content
              this.initChart(this.listLeft)
            })
          
       
          // 右侧 融资信息统计
            index.page('', `/api/scf/dealerDataProduct/getDataProductInfo`)
              .then(res => {
                this.listRight = res.data.content
                this.initChart(this.listRight)
              })
    },
    methods: {
      initChart(){
            // 基于准备好的dom，初始化echarts实例 -- 左边图
        let leftChart = echarts.init(document.getElementById('left'))
        leftChart.setOption({
             color:['#03b8cc'],
              title: {
                  text: '客户接入统计(单位：家)',
                  subtext: ''
              },
              tooltip: {},
              legend: {},
              xAxis: {
                  data : ['已上线','未激活','已激活','已取消']
              },
              yAxis: {},
              series: [{
                  name: '数量',
                  type: 'bar',
                  data:[this.listLeft.onlineNum, this.listLeft.notActiveNum, this.listLeft.activeNum, this.listLeft.canceledNum]
              }]
        })

            // 基于准备好的dom，初始化echarts实例 -- 右边图
        let rightChart = echarts.init(document.getElementById('right'))
        rightChart.setOption({
             color:['#03b8cc'],
              title: {
                  text: '融资信息统计(单位：家)',
                  subtext: ''
              },
              tooltip: {},
              legend: {},
              xAxis: {
                  data : ['授信数量','放款数量','还款数量']
              },
              yAxis: {},
              series: [{
                  name: '数量',
                  type: 'bar',
                  data:[this.listRight.applyCount, this.listRight.loanCount, this.listRight.repaymentCount]
              }]
        })
    　}
    }
  };
</script>

　注意： 这里echarts初始化应在钩子函数mounted()中，这个钩子函数是在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用　

 

 

4.多条图表渲染的问题

<div class="filter-container">
        <!-- 柱形图 -->
        <div style="display: flex;justify-content:space-between;">
             <div  v-for="item in listBar" :key="item" :id="item.flag"  :style="{width: '42%', height: '300px'}"></div>
        </div>
         <!-- 分页 -->
          <div class="pagination-container" style="margin:0 5% 2% 20%;" v-if="listBar.length != 0">
              <el-pagination background @size-change="handleSizeChangeBar" @current-change="handleCurrentChangeBar" :current-page.sync="listQueryBar.page"
                         :page-size="listQueryBar.rows" layout="total, prev, pager, next" :total="totalBar"></el-pagination>
          </div>
  </div>

 

<script>
import * as index from '@/api/index'
import * as filter from '@/filters/index'
  export default {
    data() {
      return {
        idIndex: '',
        listBar:[], //柱形图
        listQueryBar: { //柱形图
          page: 1,
          rows: 2
        } 
      };
    },
    created() {
      this.getBarList();  //柱形图

    },
    updated() {
      this.$nextTick(function () {
          for( let i = 0; i < this.listBar.length ; i ++ ){
                this.initChart(this.listBar[i], i); //图表
            }
      })
    },

    methods: {
      initChart(row,i){

            // 基于准备好的dom，初始化echarts实例
        let pg = echarts.init(document.getElementById(`index${i}`))
        pg.setOption({
             color:['#03b8cc'],
              title: {
                  text: '客户接入统计(单位：家)',
                  subtext: row.name
              },
              tooltip: {},
              legend: {
                  // data:['销量']
              },
              xAxis: {
                  data : ['已上线','未激活','已激活','已取消']
              },
              yAxis: {},
              series: [{
                  name: '数量',
                  type: 'bar',
                  data:[row.onlineNum, row.notActiveNum, row.activeNum, row.canceledNum]
              }]
        })
    },
    getBarList() {
          index.page(this.listQueryBar, `/api/admin/organization/listGwOrgInfo`)
          .then(res => {
            let data = res.data.content.content
            data.forEach((row, index) => {
              row.flag = `index${index}`
            });
            
            this.listBar = data
            this.totalBar = res.data.content.totalElements
          })
       
      },
        handleSizeChangeBar(val) {
            this.listQueryBar.rows = val;
            this.getBarList()
        },
        handleCurrentChangeBar(val) {
            this.listQueryBar.page = val;
            this.getBarList()
        },
       
    }
  };
</script>