使用echarts建立一个柱状图

1. 安装echarts

npm install echarts --save-dev

2. 在index.js中引入echarts组件

import echarts from '../components/echarts.vue' //引入组件

3. 在主页面放置一个大的div盒子

<div id="ref" style="{ width:100%, height: 50% }"></div>

4. 在主页面引入echarts

import * as echarts from 'echarts' //引入echarts文件

//引入echarts
import * as echarts from 'echarts';
import { onMounted } from 'vue';

onMounted(() => {
    //获取需要引入图表的盒子
    const chartsDiv = document.getElementById('herf')
    //对盒子进行初始化
    const chartsEch = echarts.init(chartsDiv);

    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // Use axis to trigger tooltip
                type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        yAxis: {
            type: 'value',
            name: '科目名称',//y轴名称
            nameLocation: 'top',//y坐标轴名称的位置
            nameTextStyle: {//y坐标轴名称的字体样式
                color: "red",
                fontSize: 16,
                padding: 120
            }

        },
        xAxis: {
            type: 'category',
            data: ['张三', '李四', '王麻子', '王五', '赵七', '小二', '严一'],
            axisLabel: {
                rotate: 50,
            },
            name: '学生成绩',//x轴名称
            nameLocation: 'right',//x坐标轴名称的位置
            nameTextStyle: {//x坐标轴名称的字体样式
                color: "red",
                fontSize: 16,
                padding: 300
            }


        },
        series: [
            {
                name: '数据结构',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [56, 78, 83, 69, 85, 73, 64]
            },
            {
                name: 'java',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [78, 63, 89, 83, 79, 80, 70]
            },
            {
                name: '高等数学',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [81, 83, 82, 87, 90, 91, 85]
            },
            {                               //新的一个柱子 注意不设stack
                name: '总数',
                type: 'bar',
                barGap: '-100%',         // 左移100%，stack不再与上面两个在一列
                label: {
                    normal: {
                        show: true, //显示数值
                        position: 'top',       //  位置设为top
                        formatter: '{c}',
                        textStyle: { color: '#000' } //设置数值颜色
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'rgba(128, 128, 128, 0.3)'    // 仍为透明

                    },
                    
                },
                data: [215,224,254,239,254,244,219],
            },
        ]

    };
    chartsEch.setOption(option)

})

5. 效果图