echar设置label位置_echarts柱状图的label设置，动态设置position

先看效果：图一：

图二：

数值大于零的在x轴上方，label在柱状图上方，小于零的在x轴下方，label在轴下方；相关代码如下：

import { fontSize } from "@/utils/fn";

import ChartTitle from "@/components/welcome/chartTitle";

import bus from "@/components/js/bus";

let fs16 = fontSize(0.16);

let fs36 = fontSize(0.36);

let fs18 = fontSize(0.18);

let list = [];

export default {

components: { ChartTitle },

data() {

return {

myChart: null,

myChart2: null,

};

},

props: {

config: {

type: Object,

default: () => {},

},

},

mounted() {

// window.addEventListener("resize", this.resizeMyChart);

// bus.$on("collapse", (msg) => {

// });

this.initChart();

this.initChart2();

},

destroyed() {

// window.removeEventListener("resize", this.resizeMyChart);

},

methods: {

initChart() {

this.myChart = this.$echarts.init(document.getElementById("areaRate"));

let colorList = [

{

type: "linear",

x: 0,

y: 0,

x2: 0,

y2: 1,

colorStops: [

{

offset: 0,

color: this.config.oneTopColors[0], // 0% 处的颜色

},

{

offset: 1,

color: this.config.oneTopColors[1], // 100% 处的颜色

},

],

global: false, // 缺省为 false

},

{

type: "linear",

x: 0,

y: 0,

x2: 0,

y2: 1,

colorStops: [

{

offset: 0,

color: this.config.oneBottomColors[0], // 0% 处的颜色

},

{

offset: 1,

color: this.config.oneBottomColors[1], // 100% 处的颜色

},

],

global: false, // 缺省为 false

},

];

let option = {

grid: {

left: '5%',

right: '3%',

},

tooltip: {

formatter: "{b}
{a}：{c}",

},

toolbox: {

show: false,

},

xAxis: [

{

position: "bottom",

type: "category",

nameLocation: "middle",

offset:15,

nameGap: 0,

data: this.config.dataX,

splitLine:{

show:false,

color: ["#BFCCE3"]

},

axisTick:{

show:false

},

axisLine: {

lineStyle: {

color: 'rgb(191,204,227)',

type: 'solid'

}

}

},

],

yAxis: [

{

type: "value",

show: true,

axisLine: {

lineStyle: {

color:'#fff',

width:'2'

}

},

splitLine: {

show: true,

lineStyle: {

color:['#BFCCE3'],

type: 'dashed'

}

},

axisLabel:{

show: true,

color: "#A9B6CD",

formatter: '{value}%'

}

},

],

series: [

{

name: "学段课收增长率",

type: "bar",

fontSize: 20,

barWidth: 60,

// barGap: 1,

// barCategoryGap: 20,

data: this.config.dataTop.map(item => {

return {

value: item,

label: {

// 设置显示label

show: true,

// 设置label的位置

position: item > 0 ? 'top' : 'bottom',

// 设置label的文字颜色

color: '#6783EE',

// 格式化label文字

formatter: item > 0 ? '+'+'{c}%' : '{c}%'

},

itemStyle:{

color: item > 0 ? colorList[0] : colorList[1],

barBorderRadius: item > 0 ? [5, 5, 0, 0] : [0, 0, 5, 5]

}

}

}),

},

],

};

this.myChart.setOption(option, true);

},

initChart2() {

this.myChart2 = this.$echarts.init(document.getElementById("difference"));

let colorList = [

{

type: "linear",

x: 0,

y: 0,

x2: 0,

y2: 1,

colorStops: [

{

offset: 0,

color: this.config.twoTopColors[0], // 0% 处的颜色

},

{

offset: 1,

color: this.config.twoTopColors[1], // 100% 处的颜色

},

],

global: false, // 缺省为 false

},

{

type: "linear",

x: 0,

y: 0,

x2: 0,

y2: 1,

colorStops: [

{

offset: 0,

color: this.config.twoBottomColors[0], // 0% 处的颜色

},

{

offset: 1,

color: this.config.twoBottomColors[1], // 100% 处的颜色

},

],

global: false, // 缺省为 false

},

];

let option = {

// 直角坐标系内绘图网格

grid: {

left: '5%', // grid 组件离容器左侧的距离

right: '3%', // grid 组件离容器右侧的距离

},

// 提示框设置

tooltip: {

// 提示框浮层内容格式器

formatter: "{b}
{a}：{c}",

},

toolbox: {

show: false,

},

xAxis: [

{

position: "top", // x 轴的位置。

type: "category", // 坐标轴类型。

nameLocation: "middle", // 坐标轴名称显示位置。

offset:15, // X 轴相对于默认位置的偏移

nameGap: 0, // 坐标轴名称与轴线之间的距离。

data: this.config.dataX,

// 分割线设置

splitLine:{

show:false

},

// 坐标轴刻度相关设置。

axisTick:{

show:false

},

// 坐标轴轴线相关设置。

axisLine: {

lineStyle: {

color: 'rgb(191,204,227)',

type: 'solid'

}

}

},

],

yAxis: [

{

type: "value",

show: true,

// 坐标轴轴线相关设置

axisLine: {

lineStyle: {

color:'#fff', // 坐标轴线线的颜色

width:'2' // 坐标轴线线的宽度

}

},

// y轴分割线设置

splitLine: {

show: true, // 是否显示分割线

lineStyle: {

color:['#BFCCE3'], // 分割线颜色

type: 'dashed' // 分割线类型

}

},

// 坐标轴刻度标签的相关设置。

axisLabel:{

show: true, // 坐标轴标签是否显示

color: "#A9B6CD", // 坐标轴标签颜色

formatter: '{value}%' // 坐标轴标签文案

}

},

],

series: [

{

name: "学段课收差额",

type: "bar",

fontSize: 20,

// 标签设置

label: {

normal: {

show: true, // 标签

// 标签内容格式化

formatter: function(data){

if(data.value > 0){

return '{a|' + '+' + data.value + '%}'

} else {

return '{b|' + data.value + '%}'

}

},

// 自定义样式

rich: {

a: {

// 颜色设置

color: '#F68C9D',

},

b: {

// 颜色设置

color: '#74C7C6'

}

}

}

},

// 柱条的宽度

barWidth: 60,

data: this.config.dataBottom.map(item => {

return {

value: item,

label: {

// 设置显示label

show: true,

// 设置label的位置

position: item > 0 ? 'top' : 'bottom',

},

itemStyle: {

// 设置柱条的背景色

color: item > 0 ? '#F68C9D' : '#74C7C6',

barBorderRadius: item > 0 ? [5, 5, 0, 0] : [0, 0, 5, 5] // 设置倒角

}

}

}),

},

],

};

this.myChart2.setOption(option, true);

},

},

};

#areaRate {

height: 2.8rem;

}

#difference {

height: 2.8rem;

}