1、引入图表
在index.html引入这句代码
2、绘制图表
css
.echarts {
height: 500px;
width: 100%;
border-radius: 25px;
}
3、赋值
默认值
option: {
backgroundColor: "white",
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
// restore: {show: true},
// saveAsImage: {show: true}
}
},
"title": {
"text": "收支周汇总",
x: "8px",
y: "8px",
textStyle: {
color: 'black',
fontSize: '22',
},
subtextStyle: {
color: '#90979c',
fontSize: '16',
},
},
"grid": {
"borderWidth": 0,
"top": 110,
"bottom": 95,
textStyle: {
color: "#fff"
}
},
"legend": {
x: '8px',
top: '11%',
textStyle: {
color: '#90979c',
},
"data": ['金额(元)', '债权合计(元)']
},
"calculable": true,
"xAxis": [{
"type": "category",
"axisLine": {
lineStyle: {
color: '#90979c'
}
},
"splitLine": {
"show": false
},
"axisTick": {
"show": false
},
"splitArea": {
"show": false
},
"axisLabel": {
"interval": 0,
},
"data": this.xdata(),
}],
"yAxis": [{
"type": "value",
"splitLine": {
"show": false
},
"axisLine": {
lineStyle: {
color: '#90979c'
}
},
"axisTick": {
"show": false
},
"axisLabel": {
"interval": 0,
},
"splitArea": {
"show": false
},
}],
"series": [{
"name": "金额(元)",
"type": "bar",
"stack": "总量",
"barMaxWidth": 70,
"barGap": "10%",
"itemStyle": {
"normal": {
"color": "rgba(255,144,128,1)",
"label": {
"show": true,
"textStyle": {
"color": "#90979c"
},
"position": "insideTop",
formatter: function (p) {
return p.value > 0 ? (p.value) : '';
}
}
}
},
"data": this.czdata(),
},
]
},
weekarrays:[],
servicearrays:[]
初始化
mounted(){
this.getweekData()
var myChart = echarts.init(document.getElementById('planChart'));
myChart.setOption(this.option);
},
请求数据函数
getweekData(){
this.postRequest('/zpt/Statics/uCount', {
'depositPlanNo': this.$route.query.plan,
}).then(respond => {
console.log('周数据')
if(respond.data.code == 1000){
var weekarray = []
var servicearray = []
var array = respond.data.contractDetailCountVo
array.filter((d, i) => {
weekarray.push(d.week)
servicearray.push(d.serviceFee)
return d;
})
this.weekarrays = weekarray
this.servicearrays = servicearray
this.option.series[0].data = this.servicearrays;
this.option.xAxis[0].data = this.weekarrays;
}
})
},
检测值变化
watch: {
option: {
handler(newVal, oldVal) {
if (this.servicearrays.length > 0) {
var myChart1 = echarts.init(document.getElementById('planChart'));
if (myChart1) {
if (newVal) {
myChart1.setOption(newVal);
} else {
myChart1.setOption(oldVal);
}
}
}
},
immediate: true,
deep: true
}
},
效果如下
屏幕快照 2019-12-26 上午11.19.40.png