echarts柱状图、曲线图案例，鼠标滚轮控制缩放
1.定义图表标签
<div id="graph_count" style="height: 500px;"></div>
2.引入echarts资源
import axios from "axios";//用于访问接口获取数据
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/gauge';
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/lines';
import 'echarts/lib/chart/graph';
import 'echarts/lib/component/dataZoom';
import 'echarts/lib/component/axis';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/dataZoom';
import 'echarts/lib/component/markPoint';
import 'echarts/lib/component/tooltip';
3.在标签处初始化echarts
mounted(){
this.graph_count = echarts.init(document.getElementById('graph_count'));
this.getCount();
},
3.获取数据创建图表
methods:{
async getCount(){
const res = await axios.get(baseUrl + '/actionapi/AccountApi/GetLoginCount');
let xdata = [];
let ydata = [];
if(res.data.Message.length > 0){
res.data.Message.forEach(item=>{
xdata.push(item.User.RealName + ' ' + item.User.UserName);
ydata.push(item.Sum)
});
}
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false
},
formatter: '{b0}
{a}: {c0}次',
fontSize:13
},
grid:{
top:"10%",
left:"80",
right:'25',
bottom: '10%'
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#363e83'
}
},
axisTick: {
inside: true,
length:5,//刻度线长度
},
axisLabel:{
// interval: 1,//坐标轴刻度标签的显示间隔，在类目轴中有效
},
splitLine: {
show: false
},
data: xdata
},
yAxis: {
type: 'value',
name:'登录统计',
// boundaryGap: [0, '10%'],
axisTick: {
inside: true,
length:5,//刻度线长度
},
axisLine: {//坐标轴线
type: 'dashed',
lineStyle: {
color: '#363e83'
}
},
splitLine:{
show: true,//是否显示分隔线
lineStyle:{
color:'#363e83',
opacity:0.1,
width:2
}
},
},
dataZoom: [
{
id: "dataZoomX",
type: "inside",
xAxisIndex: [0],
filterMode: "none",
start: 0,
end: 15,
},
],
series: [{
name: '登录次数',
type: 'bar',//柱状图
smooth: true,
showSymbol: false,
hoverAnimation: false,
color: ['#1dd9fb'],
itemStyle:{
normal:{
// 0,0,1,0表示从左向右 0,0,0,1表示从右向左 0, 1, 0, 0从下到上 1, 0, 0, 0从上到下
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{offset: 0, color: '#1dd9fb'},
{offset: 1, color: '#7c68e4'}
]
),
},
},
barWidth:20,
data: ydata
},{
name: '登录次数',
type: 'line',//曲线图
smooth: true,
color: ['#00a65a'],
data: ydata
}]
};
this.graph_count.setOption(option);
},
}