先看效果:图一:
图二:
数值大于零的在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: