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}<br />{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);
            },
}