hy.big_screen/src/views/Butcher/charts/EBottom3.vue

<template>
    <div class="container">
        <div id="EBottom3" style="height: 100%"></div>
    </div>
</template>

<script>
export default {
    name: "EBottom3",
    data() {
        return {
            X: [1500, 1858, 1955, 2485, 3857],
            Y: ["其他", "江苏", "上海", "福建", "浙江"],
        };
    },
    mounted() {
        this.drawChart();
    },
    methods: {
        drawChart() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(
                document.getElementById("EBottom3")
            );
            // 指定图表的配置项和数据
            let option = {
                title: {
                    text: "销售地排行",
                    left: "4%",
                    top: "4%",
                    textStyle: {
                        fontSize: 25,
                        color: "#fff",
                    },
                },
                grid: {
                    x: "5%",
                    y: "15%",
                    x2: "8%",
                    y2: "5%",
                    containLabel: true,
                },
                tooltip: {
                    trigger: "axis",
                    // formatter(val) {
                    //     console.log(val)
                    // },
                    textStyle: {
                        fontSize: 25,
                        color: "#fff",
                    },
                },
                yAxis: {
                    data: this.Y,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: "solid",
                            color: "#fff", //左边线的颜色
                            width: "2", //坐标线的宽度
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#fff",
                            fontSize: 20,
                        },
                    },
                    // name: "(时间)",
                    nameTextStyle: {
                        fontSize: 20,
                        color: "#fff",
                    },
                },
                xAxis: {
                    splitLine: { show: false },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: "solid",
                            color: "#fff", //左边线的颜色
                            width: "2", //坐标线的宽度
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#fff",
                            fontSize: 20,
                        },
                    },
                    // name: "(万元)",
                    nameTextStyle: {
                        fontSize: 20,
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#fff",
                            fontSize: 20,
                        },
                    },
                },
                series: [
                    {
                        //真实数据所在
                        name: "胴体",
                        type: "bar",
                        barWidth: "60%",
                        itemStyle: {
                            color: new this.$echarts.graphic.LinearGradient(
                                0,
                                0,
                                1,
                                0,
                                [
                                    {
                                        offset: 0,
                                        color: "#10303F",
                                    },
                                    {
                                        offset: 0.4,
                                        color: "#16AFB8",
                                    },
                                    {
                                        offset: 1,
                                        color: "#16AFB8",
                                    },
                                ]
                            ),
                            barBorderRadius: [0, 100, 100, 0],
                        },
                        label: {
                            show: true, //开启显示
                            position: "right", //在上方显示
                            textStyle: {
                                //数值样式
                                fontSize: 20,
                                color: '#7CF5E9'
                            },
                            formatter: "{c}",
                        },
                        data: this.X,
                    },
                    {
                        type: "bar",
                        itemStyle: {
                            color: "#052E3D",
                            barBorderRadius: 3,
                            barBorderRadius: [0, 100, 100, 0],
                        },
                        barGap: "-100%",
                        barWidth: "60%",
                        z: -1,
                        data: [...this.X].fill(
                            Math.ceil(Math.max(...this.X) / 1000) * 1000
                        ),
                    },
                ],
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
    },
};
</script>

<style lang="scss" scoped>
</style>