echarts环境4.1.0
<template><div id="threefour"></div>
</template>
<script>
import * as echarts from "echarts"
export default {name:"",components:{},data(){return {}},methods:{getdata(){var myCharts = echarts.init(document.getElementById('threefour'))var districtList = ['一年级1班', '一年级2班', '一年级3班', '一年级4班', '一年级5班', '一年级6班', '一年级7班', '一年级8班', '一年级9班']var lN = [43, 40, 38, 41, 40, 42, 42, 43, 39, ] //应到人数var bN = [40, 40, 37, 40, 40, 40, 39, 41, 38, ] //实到人数var cN = [2, 0, 1, 1, 0, 2, 1, 1, 1, ] //请假人数var dN = [5, 3, 6, 4, 2, 1, 4, 4, 0,] //迟到人数var tN = [1, 0, 0, 0, 0, 0, 2, 1, 0,] //其它let option = {tooltip: {trigger: 'axis',axisPointer: {lineStyle: {color: 'rgba(0, 255, 233,0)',},},},legend: {x: '85%', //用百分比 处理块与文字位置y: 'center',orient: 'vertical',textStyle: {fontSize: 12,lineHeight: 45,color: '#666',},//selectedMode: false, //选中哪个图例 false后图例不可点击data: ['x数', 'y数']},xAxis: {type: 'category',data: districtList,axisLine: {lineStyle: {color: '#E6E6FA'}},axisLabel: {interval:0,rotate:22,}},yAxis: {type: 'value',// minInterval: 500,axisLine: {lineStyle: {color: '#F0F8FF'}},},grid: { //用于处理图标放入过多空白问题top: '3%', //距上边距left: '10%', //距离左边距right: '5%', //距离右边距bottom: '22%', //距离下边距},dataZoom: [{ // 缩放条type: 'inside',start: 30,end: 80}, {start: 30,end: 80}],series: [{name: '应到人数',data: lN,type: 'bar',color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#FB8C8C'}, {offset: 1,color: '#F70909'}]),showBackground: false,}, {name: '实到人数',data: bN,type: 'bar',color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#FAA46B'}, {offset: 1,color: '#F87219'}]),showBackground: false,},{name: '请假人数',data: cN,type: 'bar',color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#FBFB7C'}, {offset: 1,color: '#F9F93A'}]),showBackground: false,},{name: '迟到人数',data: dN,type: 'bar',color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#7792FF'}, {offset: 1,color: '#0033FF'}]),showBackground: false,},{name: '其它',data: tN,type: 'bar',color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#80F6F6'}, {offset: 1,color: '#21EFEF'}]),showBackground: false,},]};myCharts.setOption(option)}},mounted(){this.getdata()}
}
</script>
<style>#threefour { width: 100%; height: 27vh; }
</style>