一、效果图：
二、使用步骤：
1. 安装echarts依赖
npm install echarts -S
或者使用淘宝的镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S
2. 创建图表
首先需要在main.js中全局引入
import echarts from 'echarts'
Vue.use(echarts)
Vue.prototype.$echarts = echarts
3. 在vue页面中使用
3.1.为了使折线图变得平滑可导入macarons.js
import "echarts/theme/macarons.js";
3.2.页面渲染图标的div（必须给div设置宽度高度，图表才可以正常渲染）
<div ref="chart" style="width:1200px;height:700px"></div>
3.3.初始化echart
data() {
return {
option: {
title: {
text: "认证次数/领取次数/领取金额统计",
textStyle: {
color: "#000",
fontSize: 16
}
},
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data: ["认证次数", "领取次数", "领取金额"] //统计的数据（认证次数，领取次数，领取金额）
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: [
{
type: "category",
//x轴字体颜色
axisLine: {
lineStyle: {
color: "#000"
}
},
splitLine: {
show: false //隐藏网格
},
data: [], //x轴的数据
axisPointer: {
type: "shadow",
shadowStyle: {
// 阴影指示器样式设置
color: "rgba(1,127,90,0.1)" // 阴影颜色
},
splitLine: {
show: false //隐藏网格
},
splitArea: {
show: false //隐藏网格
}
},
axisLabel: {
show: true
}
}
],
yAxis: [
{
type: "value",
x: "center",
name: "（认证次数/领取次数）",
min: 0,
// max: 100,
show: true,
//y轴颜色
axisLine: {
lineStyle: {
color: "#000"
}
},
splitLine: {
show: true //隐藏网格
},
splitArea: {
show: false //隐藏网格背景
}
},
{
type: "value",
name: "（领取金额）",
x: "center",
show: true,
min: 0,
// max: 100,
//y轴颜色
splitLine: {
show: false //隐藏网格
},
splitArea: {
show: false //隐藏网格背景
},
axisLine: {
lineStyle: {
color: "#000"
}
}
}
],
series: [] //图表的数据
},
};
},
}
3.4.将后端返回的数据渲染在charts上
methods: {
//加载红包统计数据
chartsInfo() {
this.option.series = [];
this.$axios
.get(`/xx/`, {
params: {
time_min: this.form.time[0],
time_max: this.form.time[1]
}
})
.then(res => {
this.option.xAxis[0].data = res.xAxis; //x轴的数据：日期
//认证次数-折线图
for (let i = 0; i < res.authorize_arr.length; i++) {
this.option.series.push({
name: "认证次数",
type: "line", //设置图表的类型：line：折线图；bar：柱状图
smooth: true, //让曲线平滑
yAxisIndex: 0, // 认证次数用的第一个y轴
color: "#017f5a", //设置折线图的颜色
data: res.authorize_arr[i].data, //折线图的数据
itemStyle: {
normal: {
label: {
show: true, //开启数值显示
textStyle: {
//数值样式
color: "#017f5a", //数值的颜色
fontSize: 12
}
},
lineStyle: {
width: 2 // 设置折线图线条的粗细
}
}
}
});
}
//领取次数-折线图
for (let i = 0; i < res.num_arr.length; i++) {
this.option.series.push({
name: "领取次数",
type: "line",
yAxisIndex: 0, // 领取次数用的第一个y轴
data: res.num_arr[i].data,
// stack: 'bar', // 柱状图叠加
color: "#ff7e00",
itemStyle: {
// 柱状图悬停颜色
emphasis: {
// 普通图表的高亮颜色
// color: color[j],
// 地图区域的高亮颜色
// areaColor: "blue"
},
normal: {
label: {
show: true, //开启数值显示
textStyle: {
//数值样式
color: "#ff7e00",
fontSize: 12
}
}
}
}
});
}
//领取金额-柱状图
for (let i = 0; i < res.amount_arr.length; i++) {
this.option.series.push({
name: "领取金额",
type: "bar",
barWidth: 20,
smooth: true, //让曲线平滑
yAxisIndex: 1, //领取金额用的第二个y轴
color: "#d8d8d8",
data: res.amount_arr[i].data,
itemStyle: {
normal: {
label: {
show: true, //开启数值显示
textStyle: {
//数值样式
color: "#000",
fontSize: 12
},
//改变数值显示的格式，金额前面加￥
formatter: function(value) {
return "￥" + value.data;
}
}
}
}
});
}
var chartDom = this.$refs.chart;
var myChart = this.$echarts.init(chartDom, "macarons"); //初始化echarts实例
myChart.setOption(this.option, true); //设置为true的话，就是notMerge，不合并；false的话，就Merge，之前的东西还保留~
window.onresize = myChart.resize; //图表自适应浏览器大小
})
},
},
