Echarts横向柱状图，带标题

效果图:

 

 

 首先安装echarts，看官网安装文档即可

然后要用的文件引入一下

import * as echarts from 'echarts';

我用的vue3，setup放标签里的

 

 

 

 

 代码如下：

<div class="card">
    <IdcTopTitleView :isShowPicker="true" bigText="辅材采购金额占比" />
    <div id="centerFoot" style='height: 100%;width: 100%' />
</div>

<script setup>
import * as echarts from 'echarts';

import { onMounted, ref } from "vue";
import IdcTopTitleView from "./components/IdcTopTitleView.vue";

onMounted(() => {

　　const centerFoot = echarts.init(document.getElementById('centerFoot')); 
    centerFoot.setOption({
        grid: {
            left: "6%",
            width: "80%",
            top: "2%",
        },
        xAxis: {
            type: "value",
            show: false
        },
        yAxis: [
            {
                type: "category",
                inverse: true,
                show: false,
                axisTick: {
                    show: false
                },
            },
            //      左侧上方名称
            {
                type: 'category',
                offset: -10,
                position: "left",
                axisLine: {
                    show: false
                },
                inverse: false,
                axisTick: {
                    show: false
                },
                axisLabel: {
                    interval: 0,
                    align: "left",
                    verticalAlign: "bottom",
                    lineHeight: 44,
                    fontSize: 14
                },
                data: ['空调滤清器', '碳纤维轮毂', '轮胎锁', '轮胎密封胶', '动力轮毂']
            },
            //      右侧上方名称
            {
                type: 'category',
                position: "right",
                axisLine: {
                    show: false
                },
                inverse: false,
                axisTick: {
                    show: false
                },
                axisLabel: {
                    interval: 0,
                    color: '#737373',
                    align: "right",
                    verticalAlign: "bottom",
                    lineHeight: 44,
                    fontSize: 14
                },
                //------------------文字描述----------------------------
                data: ['500/1000', '400/1000', '300/1000', '200/1000', '100/1000']
            }
        ],
        series: [
            {
                zlevel: 1,
                type: "bar",
                barWidth: "15px",
                animationDuration: 1500,
                //------------------数据及其样式----------------------------
                data: [
                    {
                        value: 10,
                        itemStyle: {
                            color: "#007CFF",
                        }
                    },
                    {
                        value: 20,
                        itemStyle: {
                            color: "#007CFF"
                        }
                    },
                    {
                        value: 30,
                        itemStyle: {
                            color: "#007CFF"
                        }
                    },
                    {
                        value: 40,
                        itemStyle: {
                            color: "#007CFF"
                        }
                    },
                    {
                        value: 50,
                        itemStyle: {
                            color: "#007CFF"
                        }
                    },
                ],
                align: "center",
            },
            {
                type: "bar",
                barWidth: 15,
                barGap: "-100%",

                //------------------背景按最大值----------------------------
                data: [100, 100, 100, 100, 100],
                itemStyle: {
                    normal: {
                        color: "#DEEDFF",
                        width: "100%",
                    },
                }
            }
        ]
    })
}）

简洁一点：

const centerFoot = echarts.init(document.getElementById('centerFoot'));
centerFoot.setOption({
    grid：{//设置位置},
    xAxis: {
            type: "value",
            show: false
     },
    yAxis: [
        {// y轴样式},
        {// 左侧标题},
        {// 右侧数据}
    ],
    series:[
        {// 主柱状图样式},
        {// 背景柱状图样式}
    ]
    
}）