动态生成echarts并控制显示隐藏

最新推荐文章于 2024-08-05 11:08:01 发布

皮迪崽

最新推荐文章于 2024-08-05 11:08:01 发布

阅读量1.1k

点赞数

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/m0_54008970/article/details/129159324

版权

该文章展示了如何在Vue.js应用中利用v-for指令动态创建多个Echarts图表，每个图表的显示和隐藏状态由数据源中的state属性控制。代码通过遍历echartsList数组，初始化Echarts实例并设置配置选项，包括线性图表的数据和标题。点击按钮可以切换图表的可见性。

摘要由CSDN通过智能技术生成

创建一个容器用来存放echarts

 <button v-for="item in echartsList" @click="showState">{{item.id}}</button>
 <div v-for="item,index in echartsList" :id=item.id style="width: 50vwpx; height: 15vh;     
  border: 1px solid black;" v-show=item.state></div>

echarts容器的数量由数据源控制

 echartsList: [
                    { id: "item1", value: [150, 230, 224, 218, 135, 12, 260], value1: [45, 230, 224, 218, 4, 147, 42], value2: [150, 230, 78, 218, 135, 365, 260], state: true },
                    { id: "item2", value: [150, 12, 224, 218, 24, 147, 260], value1: [150, 230, 224, 218, 135, 147, 260], value2: [150, 230, 224, 218, 135, 147, 260], state: true },
                    { id: "item3", value: [150, 23, 224, 13, 135, 147, 260], value1: [150, 230, 224, 218, 23, 147, 260], value2: [150, 230, 224, 218, 135, 147, 260], state: true },
                    { id: "item4", value: [123, 230, 13, 218, 43, 147, 260], value1: [150, 45, 224, 218, 34, 123, 260], value2: [23, 230, 224, 218, 3, 147, 260], state: true },
                    { id: "item5", value: [150, 230, 13, 218, 43, 147, 260], value1: [150, 230, 224, 218, 135, 147, 260], value2: [150, 230, 234, 218, 135, 147, 260], state: true },
                    { id: "item6", value: [150, 43, 13, 218, 43, 147, 260], value1: [150, 365, 224, 23, 135, 147, 260], value2: [150, 230, 224, 5, 135, 147, 260], state: true },
                ]

ehcarts模板

 // echarts模板
            echarts() {
                this.echartsList.forEach(item => {
                    var chartDom = document.getElementById(item.id);
                    var myChart = echarts.init(chartDom);
                    var option;
                    option = {
                        title: {
                            text: item.id
                        },
                        grid: {
                            top: "15%",
                            bottom: "15%",
                        },
                        xAxis: {
                            type: 'category',
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: item.value,
                                type: 'line'
                            },
                            {
                                data: item.value1,
                                type: 'line'
                            },
                            {
                                data: item.value2,
                                type: 'line'
                            },
                        ]
                    };
                    option && myChart.setOption(option);

                });
            }

控制对应图标显示隐藏的方法,目标要和数据源有对应项

 // 控制对应图标的展示隐藏
            showState(e) {
                var d = e.target.innerText
                this.echartsList.forEach(item => {
                    if (item.id == d) {
                        item.state = !item.state
                    }
                })
            },

效果图