前端--v-for 循环 echarts折线图

weixin_44320857

已于 2024-01-17 13:31:11 修改

阅读量627

点赞数 10

文章标签：前端 echarts javascript

于 2024-01-09 09:47:20 首次发布

本文链接：https://blog.csdn.net/weixin_44320857/article/details/135472266

版权

html

 <div style="width: 45%;">
                    <div style="width: 100%;height: 62px;">
                        <!-- <div v-for="(item, index) in itemData" :key="index" class="gauge" :id="'myCharts' + index"></div> -->
                        <div :id="'zhexian'+index" v-for="(item, index) in zheVal" :key="index"
                            style="width: 100%; height: 100%"></div>
                    </div>
                </div>

注意data中需要赋初始值

 lineChart: {},
 zheVal: [
                        [0],
                        [0],
                        [0],
                        [0],
                        [0],
                        [0],
                        [0],
                        [0],
                        [0],
                    ],

初始化调用的代码（页面渲染需调用这个方法）1.mounted 初始化调用 2.axios获取后调用
在使用切换时加载未跟上，使用如下:

 _this.zheVal = zhexianlist, //先给折线赋值
 _this.$nextTick(() => { _this.initZhexian() }); //再次渲染

initZhexian() {
                    var _this = this
                    _this.zheVal.map((v, index) => {
                        const firstOpt = _this.zhexian(v)
                        _this.lineChart = echarts.init(document.getElementById('zhexian' + index), 'macarons');
                        _this.lineChart.setOption(firstOpt)
                        window.addEventListener("resize", () => {
                            _this.lineChart.resize();
                        });
                    })
                },

折线图渲染对象

zhexian(val) {
                    // let myCharts = echarts.init(document.getElementById('zhexian'))
                    // console.log(val)
                    lineOption = {
                        xAxis: {
                            show: true,
                            axisLabel: {
                                formatter: function () {
                                    return ""
                                }
                            },
                            type: 'category',
                            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        },
                        yAxis: {
                            type: 'value',
                            splitLine: {
                                show: false
                            },
                            axisLabel: {
                                formatter: function () {
                                    return ""
                                }
                            }
                        },

                        grid: {
                            top: '50%',
                            left: '1%',
                            right: '0%',
                            bottom: '-7%',
                            containLabel: true
                        },

                        series: [
                            {
                                data: val,
                                // data: [10,20,30,40,50,60,70],
                                type: 'line',
                                label: {
                                    "normal": {
                                        "fontSize": 9,
                                        "show": true,
                                        "position": "top"
                                    }
                                }
                            }

                        ]
                    };
                    return lineOption
                    // myCharts.setOption(lineOption)
                },