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>

效果图