在做的项目的时候需要全局引入,但是如果自己写一个demo页面可以选择按需引入,这里主要是来谈全局引入
1、首先:在编辑器(我使用的是vscode)的终端输入命令行npm install echarts --save,安装Echarts
2、其次:在入口文件main.js里面引入,import echarts from 'echarts' Vue.prototype.$echarts = echarts
3、最后:
在html页面加入放置饼状图和柱状图的div,但是必须为div设置宽和高;
< div id = "myPie" :style = " {width: '600px' ,height: '500px' ,left: '80px' } " > div >
div >
< div style = "display:inline-block;left:230px;" id = "myBar" :style = " {width: '600px' ,height: '500px' ,} " > div >
在js中引入
export default {
data(){
return{
monthNumber: [],
monthRevenue: [],
}
}
mounted() {
this .queryRecentlyMonth();
this .monthNumber = this .calculateMonth();
this .queryRevenueExpenditureData();
},
methods:{
//初始化数据
queryRevenueExpenditureData() {
let that = this ;
queryRevenueExpenditure( this .queryRevenueExpenditureParam).then( response => {
that.revenueExpenditure = response.data;
that.drawLine();
} );
queryRevenuesForRecentMonths().then(response => {
let res = response.data.monthRevenues;
that.monthRevenue = that.calculateRevenueByMonth(res);
that.drawLine();
});
},
//计算最近6个月
calculateMonth() {
//创建现在的时间
var data = new Date();
//获取年
var year = data.getFullYear();
//获取月
var mon = data.getMonth() + 1 ;
var arry = new Array();
arry[ 0 ] = mon;
for ( var i = 1 ; i < 6 ; i ++ ) {
mon = mon - 1 ;
if (mon <= 0 ) {
year = year - 1 ;
mon = mon + 12 ;
}
arry[i] = mon;
}
return arry.reverse();
},
//计算指定月的收入
calculateRevenueByMonth(data) {
let revenues = [];
let months = this .monthNumber;
if (data) {
months.forEach(m => {
let flag = false ;
data.forEach(n => {
let currentMonth = n.monthNumber;
if (currentMonth == m) {
revenues.push(n.monthRevenue);
flag = true ;
return ;
}
});
if ( ! flag) {
revenues.push( 0 );
}
});
}
return revenues;
},
drawLine() {
// 基于准备好的dom,初始化echarts实例
let myPie = this .$echarts.init(document.getElementById( "myPie" )); //饼状图
let myBar = this .$echarts.init(document.getElementById( "myBar" )); //柱状图
// 饼状图
myPie.setOption({
tooltip: {
trigger: "item"
// formatter: "{a}
{b}: {c} ({d}%)"
},
color: [ "#32CD32" , "#63B8FF" , " #EE4000" ],
legend: {
bottom: 10 ,
left: "center" ,
data: [ "总收入" , "总支出" , "收支差额" ]
},
series: [
{
type: "pie" ,
radius: "65%" ,
center: [ "50%" , "50%" ],
selectedMode: "single" ,
label: {
normal: {
position: "inner" ,
// show: false,
formatter: "¥{c}" //自定义显示格式(b:name, c:value, d:百分比)
}
},
data: [
{ value: this .revenueExpenditure.totalRevenue, name: "总收入" },
{value: this .revenueExpenditure.totalExpenditure, name: "总支出" },
{value: this .revenueExpenditure.revenueExpenditureBalance, name: "收支差额" }
]
}
]
});
// 绘制图表柱状图
myBar.setOption({
title: { text: "" ,
subtext: ""
},
tooltip: { show: true },
//grid 区域是否包含坐标轴的刻度标签
// grid: { left: "1%", right: "1%", bottom: "4%", containLabel: true },
xAxis: {
type: "category" ,
name: "月份" ,
data: this .monthNumberLabel
},
yAxis: {
type: "value" ,
splitLine: { show: false }, //改设置不显示坐标区域内的y轴分割线
name: "收入(元)"
// data:this.monthRevenue
},
series: [
{
type: "bar" ,
itemStyle: {
normal: { color: "#CCCCCC" }
// label:{show:true,formatter:function(){return }}
},
emphasis: {
shadowBlur: 40 ,
shadowOffsetX: 10 ,
shadowColor: "rgba(0, 0, 0, 0.5)"
},
data: this .monthRevenue
} ],
label: {
//以下为是否显示,显示位置和显示格式的设置了
show: true , //开启显示
position: "top" , //在上方显示
formatter: "¥{c}" ,
textStyle: {
//数值样式
color: "red" ,
fontSize: 16
}
}
});
},
//计算属性
computed: {
monthNumberLabel: function () {
let result = [];
if ( this .monthNumber) {
this .monthNumber.forEach(x => {
result.push(x + "月" );
});
}
return result;
}
}
}
}