echarts 柱状图

记录echarts 柱状图基础案例以及相关配置。

1.基础柱状图

在这里插入图片描述

    const myChart = this.$echarts.init(this.$refs.echartsZx);const option = {title: {text: '本周考试记录'},//提示框tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar'}]}// 绘制图表myChart.setOption(option);

2.背景色的柱状图

在这里插入图片描述

    const myChart = this.$echarts.init(this.$refs.echartsZx);const option = {title: {text: '本周考试记录'},//提示框tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar',showBackground: true, //是否显示柱条的背景色backgroundStyle: {color: 'rgba(180, 180, 180, 0.2)', //柱条的颜色borderColor: "rgba(208, 38, 38, 1)", //柱条的描边颜色// borderWidth:1,//柱条的描边宽度，默认不描边。// borderType:'dashed',//柱条的描边类型，默认为实线，支持 'dashed', 'dotted'。borderRadius: 0//圆角半径，单位px，支持传入数组分别指定 4 个圆角半径}}]}// 绘制图表myChart.setOption(option);

3.条形图

在这里插入图片描述

    // 基于准备好的dom，初始化echarts实例const myChart = this.$echarts.init(this.$refs.echartsZx);const option = {title: {text: '本周考试及格表'},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow',},//给提示框提示数据加单位formatter: (params) => {console.log(params);var relVal = params[0].namefor (var i = 0, l = params.length; i < l; i++) {relVal += '<br/>' + params[i].seriesName + ' ' + params[i].marker + ' ' + params[i].value + ' %'}return relVal},},legend: {},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'value',boundaryGap: [0, 0.01]},yAxis: {type: 'category',data: this.dataList.map(item => item.name)},series: [{name: '及格',type: 'bar',data: this.dataList.map(item => item.hege)},{name: '不及格',type: 'bar',data: this.dataList.map(item => item.buhege)}]}// 绘制图表myChart.setOption(option);

4.折柱混合图

在这里插入图片描述

    // 基于准备好的dom，初始化echarts实例const myChart = this.$echarts.init(this.$refs.echartsZx);const option = {title:{text:'折柱混合',},//提示框tooltip: {trigger: 'axis',axisPointer: {type: 'cross', //指示器类型。crossStyle: {color: '#999' //axisPointer.type 为 'cross' 时有效。}}},//工具栏toolbox: {feature: {dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'bar'] },restore: { show: true },saveAsImage: { show: true }}},legend: {data: ['Precipitation', 'Temperature']},xAxis: [{type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],axisPointer: {type: 'shadow'}}],yAxis: [{type: 'value',name: 'Precipitation',min: 0,max: 250,interval: 50,axisLabel: {formatter: '{value} ml'}},{type: 'value',name: 'Temperature',min: 0,max: 25,interval: 5,axisLabel: {formatter: '{value} °C'}}],series: [{name: 'Precipitation',type: 'bar',tooltip: {valueFormatter: function (value) {return value + ' ml';}},data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]},{name: 'Temperature',type: 'line',yAxisIndex: 1,tooltip: {valueFormatter: function (value) {return value + ' °C';}},data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]}]};// 绘制图表myChart.setOption(option);