mzBigScreen/src/components/index/1.vue

<template>
    <div id="myChartindex1" style="width: 100%; height: 100%;"></div>
</template>

<script>
    import {oldPersonOldType} from '../../api'

    //圆角柱状图
    import echarts from 'echarts'

    export default {
        data() {
            return {
                dataArr: [],
                colorArr: [
                    {color1: '#9db9ff', color2: '#00f'},
                    {color1: '#ffe49e', color2: '#ffb300'}
                ],
                myChart: null
            }
        },
        methods: {
            async draw() {
                if (this.myChart != '' && this.myChart != null) {
                    this.myChart.clear();
                }
              console.log("kokokokokokoko");
                const result = await oldPersonOldType({}, 'POST');
                this.dataArr = result;

                this.myChart = this.$echarts.init(document.getElementById('myChartindex1'));
                this.myChart.setOption({
                    grid: {
                        left: '0%',
                        right: '0%',
                        top: '22%',
                        bottom: '20%'
                    },
                    xAxis: {
                        type: 'category',
                        data: this.dataArr.map((item) => item.label),
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            interval:0,
                            margin:16,
                            show: true,
                            textStyle: {
                                color: 'white',
                                fontSize: this.fontSize(0.14)
                            },
                        },

                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            show: false
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: ['#315070'],
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },

                    },
                    series: [
                        {
                            data: this.dataArr.map((item) => item.value),
                            type: 'bar',
                            barWidth: 14,
                            itemStyle: {
                                emphasis: {
                                    barBorderRadius: 7
                                },
                                normal: {
                                    barBorderRadius: 7,
                                    color: (params) => {
                                        return new echarts.graphic.LinearGradient(
                                            0, 0, 0, 1,
                                            [
                                                {
                                                    offset: 0,
                                                    color: this.colorArr[params.dataIndex % 2 == 0 ? 0 : 1].color1
                                                },
                                                {
                                                    offset: 1,
                                                    color: this.colorArr[params.dataIndex % 2 == 0 ? 0 : 1].color2
                                                }
                                            ]
                                        )
                                    }
                                }
                            },
                            label: {
                                show: true,
                                position: 'top',
                                formatter: '{c}人',
                                offset: [0, -10],
                                color: '#fff',
                                textStyle: {
                                    color: 'white',
                                    fontSize: this.fontSize(0.13)
                                },

                            },
                            z: 1
                        },
                        {
                            type: 'line',
                            data: this.dataArr.map((item) => item.value),
                            symbol: (params, item) => {
                                return item.dataIndex % 2 == 0 ? `image://${require("../../assets/index/q1.png")}` : `image://${require("../../assets/index/q2.png")}`;
                            },
                            symbolSize: [19, 19],
                            lineStyle: {
                                color: 'rgba(255, 165, 0, 1)',
                                width: 1,
                                type: 'dashed'
                            },
                            z: 2
                        }
                    ]
                });
            },
            fontSize(res) {
                let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
                if (!clientWidth) return;
                let fontSize = 100 * (clientWidth / 1920);
                return res * fontSize;

            }
        },
        mounted() {
            // this.draw();
        }
    }
</script>

<style type="text/css">

</style>