vue中echarts的使用以及与elementui-select的协同绑定

最新推荐文章于 2023-04-04 10:47:57 发布

我是主角我不能死

最新推荐文章于 2023-04-04 10:47:57 发布

阅读量1.7k

点赞数 2

本文链接：https://blog.csdn.net/weixin_43163704/article/details/105140532

版权

本文介绍了如何在Vue项目中使用ECharts图表，并详细讲述了如何实现ECharts与ElementUI Select组件的协同绑定，以实现数据选择与图表更新的联动效果。

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

vue中echarts的使用以及与elementui-select的协同绑定

1.vue中echarts的使用

引入echarts后

let myChart = echarts.init(document.getElementById('dsm'));//dsm为绑定的dom结构
            var option = {
   
                //backgroundColor:"#111c4e",    
                    tooltip: {
   
                        trigger: 'axis'
                    },
                    legend: {
                     //图表上方的图例显隐
                        data:['光合有效辐射'],
                         textStyle: {
   
                                color: '#fff'
                            }
                    },
                    color:['#E4FD0A'],
                    grid: {
                       //图表里上下左右的空间 间隙
                        left: '3%',
                        right: '8%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                                 //x轴属性
                        type: 'category',
                        name: '日期/时间',
                        // boundaryGap: false,
                        data: this.xZhou,
                        axisLine:{
   
                        lineStyle:{
   color:'#fff'}    // x轴坐标轴颜色
                        },
                        axisLabel: {
   
                            show: true,
                            color: '#fff',
                            fontSize:12,
                            // rotate: 30
                        }
                    },
                    yAxis: {
                          //y轴属性
                        type: 'value',
                        name: '光合有效辐射',
                        axisLine:{
   
                        lineStyle:{
   color:'#fff'}    // x轴坐标轴颜色
                        },
                        axisLabel: {
   
                            show: true,
                            color: '#fff',
                            fontSize:12,
                            // rotate: 30
                        }
                    },
                    series: [                       //为鼠标在图表中划过时显示的数据
                        {
   
                            name:'光合有效辐射',
                            type:'line',
                            stack: '总量',
                            data:this.yZhou,
                            lineStyle:{
   
                                normal:{
   
                                    color: '#E4FD0A'
                                }