echarts柱状图计分表

最新推荐文章于 2024-05-20 22:14:20 发布

蓝白风铃草

最新推荐文章于 2024-05-20 22:14:20 发布

阅读量387

点赞数 8

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/Y2960018173/article/details/135496496

版权

功能：柱状图图表展示计分

通过element ui 的计数器来同步更改分数

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计分表</title>
    <script src="https://lib.baomitu.com/vue/2.7.7/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<!-- 引入组件库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>

<body>
    <div id="app">
        <h1>计分表</h1>
        <div ref="chart" style="width: 1200px; height: 700px; margin: 0 auto;"></div>
        <div style="display: flex; width: 1000px; margin: 0 auto;">
            <div>
                一组：<el-input-number v-model="num1" @change="handleChange" :min="0" :max="1000"
                    label="一组"></el-input-number>
            </div>
            <div class="padding_left">
                二组：<el-input-number v-model="num2" @change="handleChange" :min="0" :max="1000"
                    label="二组"></el-input-number>
            </div>
            <div class="padding_left">
                三组：<el-input-number v-model="num3" @change="handleChange" :min="0" :max="1000"
                    label="三组"></el-input-number>
            </div>
            <div class="padding_left">
                四组：<el-input-number v-model="num4" @change="handleChange" :min="0" :max="1000"
                    label="四组"></el-input-number>
            </div>
        </div>

    </div>

</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                num1: 0,
                num2: 0,
                num3: 0,
                num4: 0,
            };
        },
        mounted() {
            this.drawChart();
        },

        methods: {
            drawChart() {
                const chart = echarts.init(this.$refs.chart);
                const option = {
                    title: {
                        // text: '柱状图示例'
                    },
                    tooltip: {},
                    legend: {
                        data: ['分数']
                    },
                    xAxis: {
                        data: ['一组', '二组', '三组', '四组'],
                    },
                    yAxis: [
                        {
                            type: 'value',
                            name: '分数',
                            // min: 0,
                            // max: 100,
                            position: 'left',
                            axisLabel: {
                                formatter: '{value} 分'
                            }
                        },
                    ],
                    series: [{
                        // name: '销量',
                        type: 'bar',
                        data: [this.num1, this.num2, this.num3, this.num4],
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    // 给出颜色组
                                    var colorList = ['#dd6b66', '#74608f', '#e69d87', 'pink'];
                                    //循环调用
                                    return colorList[params.dataIndex % colorList.length]
                                },
                            }
                        },
                        // label: {
                        //     show: true,
                        //     position: 'inside',
                        //     color:'#fff'
                        // },
                    },]
                };
                chart.setOption(option);
            },
            handleChange() {
                this.drawChart();
            }
        },
        componted: {

        }
    });
</script>
<style>
    #app {
        text-align: center;
    }

    h1 {
        text-align: center;
    }

    .padding_left {
        padding-left: 20px;
    }
</style>

</html>