Vue中使用Echarts绘制柱状图

<template>
  <!-- 稽核日志界面 -->
  <div class="tile is-parent test ">
    <article class="tile is-child box">
      <Card>
        <Row :gutter="16">
          <Col span="12">
            <div id="echartContainer" style="width:500px; height:300px " ></div>
          </Col>
          <Col span="12">
            <div id="echartContainer2" style="width:500px; height:300px " ></div>
          </Col>
        </Row>
      </Card>
      <br/>
      <br/>
      <TableHead headName="稽核列表"></TableHead>
      <Table size="small"    border :columns="columnsName" :data="dataList"></Table>
       <Row type="flex" justify="space-between">
        <Col span="4">
        </Col>
        <Col>
       </Col>
      </Row>
    </article>
  </div>
</template>
<script>
import Vue from 'vue'
import axios from 'axios'
import TableHead from 'component/TableHead.vue'
 var echarts = require('echarts')

export default {
  components: {
    TableHead
  },
  mounted: function() {
    this.$Notice.config({
      top: 150,
      duration: 3
    });
    this.query();

  },
  name: 'debug',
  data: function() {
    return {
    dataList:[],
    columnsName: 
      [
        {
          title: "序号",
          type: "index",
          fixed: 'left',
          width: 75,
        },
        {
          title: "文件日期",
          key: 'fileDate',
          width: 130,
        },
        {
          title: "入库文件数",
          key: 'filesCloud',
          width: 130
        },
        {
          title: "源文件数",
          key: 'filesBill',
          width: 130,
        },
        {
          title: "入库条数",
          key: 'rowsCloud',
          width: 130,
        },
        {
          title: "源文件总条数",
          key: 'rowsBill',
          width: 130,
        },
        {
          title: "文件差值",
          key: 'fileDiff',
          width: 130,
        },
        {
          title: "总行数差值",
          key: 'rowsDiff',
          width: 130,
        },
        {
          title: "稽核时间",
          key: 'checkDate',
          width: 160,
        },
        {
          title: "更新时间",
          key: 'updateDate',
          width: 160,
        },



      ],


    }
  },
  methods: {
    query: function() {
     
      let that = this

          that.loading=true;
          axios.get("CheckBillsController/queryCheckBills",
          {
           
          })
            .then(function(res) {
              let charData =res.data.data;
              that.total = res.data.data.dataList.datasize;
              that.dataList=res.data.data.dataList;
              that.open(charData);
            })
            .catch(function(err) {
              console.log(err)
            })
             that.loading=false;
            
      
      
    },
    open(charData)
    {
      let that=this
      //文件稽核
      var myChartFile = echarts.init(document.getElementById('echartContainer'));
      //行数稽核
      var myChartRows = echarts.init(document.getElementById('echartContainer2'));
      // 绘制文件稽核图表
      myChartFile.setOption(
      {
          title: 
          { 
            text: "文件稽核" 
          },
          tooltip:
          {
            trigger: 'axis'
          },
          axisPointer : 
          {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          },
          //图形类目
          legend: 
          {
            data:['入库文件数','源文件数','源文件数差值']
          },
          //图形工具栏
          toolbox: 
          {
            show : true,
            feature : {
                        magicType : {show: true, type: ['line', 'bar']},
                      }
          },
          calculable : true,
          xAxis: 
          {
              data: charData.time,
              axisLabel:
              {
                //设置x轴文字倾斜显示
                interval:0,
                rotate:40
              },
              //设置x轴文字长度自动适应
              grid: 
              {
                left: '10%',
                bottom:'35%'
              }
          },
          yAxis: 
          {   
            //坐标显示内容
            axisLabel: 
            {
                  margin: 2,
                  formatter: function (value, index) {
                      if (value <= -10000000) {
                         value = value / 100000000 + "亿";
                      }
                      else if (value <= -10000 && value > -10000000) {
                          value = value / 10000 + "万";
                      } 
                      else if (value >= 10000 && value < 10000000) {
                          value = value / 10000 + "万";
                      } 
                      else if (value >= 10000000 && value < 100000000) {
                          value = value / 10000000 + "千万";
                      }
                      else if (value > 100000000 ) {
                         value = value / 100000000 + "亿";
                      }

                      return value;
                    }
              }
          },
          series: 
          [
            {
                name: '入库文件数',
                type: 'bar',
                data: charData.cloudFiles,
                //柱子颜色
                itemStyle:{
                          normal:
                            {
                              color:'#4ad2ff'
                            }
                          },
            },
            {
                name: '源文件数',
                type: 'bar',
                data: charData.billFiles,
                itemStyle:{
                            normal:
                              {
                                color:'#9966ff'
                              }
                          },
            },
            {
              name: '源文件数差值',
              type: 'bar',
              data: charData.diffFiles,
              itemStyle:
                {
                  normal:
                    {
                      color:'#434343'
                  }
                },
            }
          ]
      });
      myChartRows.setOption(
      {
          title: { text: "总行数稽核" },
          tooltip : {
                        trigger: 'axis',
                    },
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          },
          

          legend: {
                        data:['入库总行数','源文件总行数','总行数差值']
                    },
          toolbox: {
                      show : true,
                      feature : {
                          magicType : {show: true, type: ['line', 'bar']},
                      }
                  },
          calculable : true,

          xAxis: {
              data: charData.time,
              //设置x轴文字倾斜显示
              axisLabel:
              {
                  interval:0,
                  rotate:40,
              },
              //设置x轴文字长度自动适应
              grid: {
              left: '10%',
              bottom:'35%'
              }
          },
          yAxis: {
             type: 'value',
             // name: '营业额(元)',
              axisTick: {
                  inside: true
              },
              scale: true,
              axisLabel: {
                  margin: 2,
                  formatter: function (value, index) {
                      if (value <= -10000000) {
                         value = value / 100000000 + "亿";
                      }
                      else if (value <= -10000 && value > -10000000) {
                          value = value / 10000 + "万";
                      } 
                      else if (value >= 10000 && value < 10000000) {
                          value = value / 10000 + "万";
                      } 
                      else if (value >= 10000000 && value < 100000000) {
                          value = value / 10000000 + "千万";
                      }
                      else if (value > 100000000 ) {
                         value = value / 100000000 + "亿";
                      }
                      return value;
                  }
              }
          },
         
           
          series: [

          {
              name: '入库总行数',
              type: 'bar',
              data: charData.cloudRows,
              itemStyle:{
                                    normal:{
                                        color:'#19BE6B'
                                    }
                        },
          },
          {
              name: '源文件总行数',
              type: 'bar',
              data: charData.billRows,
              itemStyle:{
                                    normal:{
                                        color:'#2D8CF0'
                                    }
                        },
          },
          {
              name: '总行数差值',
              type: 'bar',
              data: charData.diffRows,
              itemStyle:{
                                    normal:{
                                        color:'#993300'
                                    }
                        },
          }
          ]
      }
      );
    }
  }
}
</script>

效果图