IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> vue中echarts图标点击事件(x轴) -> 正文阅读

[JavaScript知识库]vue中echarts图标点击事件(x轴)

vue中echarts图标点击事件(x轴)

一、初始化

  init() {
            this.echartLine = echarts.init(this.$refs['lineChart'])
            window.addEventListener('resize', () => {
                this.echartLine && this.echartLine.resize()
            })
              this.optionsLine = {
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: '#fff', // 提示框背景
                        axisPointer: {
                            type: 'shadow',
                        },
                    },
                    color: [
                        'rgb(71,78,125)',
                        'rgb(65,169,203)',
                        'rgb(105,193,135)',
                        'rgb(246,126,60)',
                        'rgb(102,102,102)',
                    ],
                    legend: {
                        data: ['3s内', '3-15s', '15-60s', '60s以上', '总数'],
                        left: 'right',
                        selectedMode: false, //取消图例上的点击事件
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true,
                    },
                    xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: this.linexAxis,
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            //y轴
                            show: false,
                        },
                        axisTick: {
                            //y轴刻度线
                            show: false,
                        },
                    },
                    series: [
                            {
                                name: '3s内',
                                type: 'line',
                                data: this.lineSeries[0],
                            },
                            {
                                name: '3-15s',
                                type: 'line',
                                data: this.lineSeries[1],
                            },

                            {
                                name: '15-60s',
                                type: 'line',
                                data: this.lineSeries[2],
                            },
                            {
                                name: '60s以上',
                                type: 'line',
                                data: this.lineSeries[3],
                            },
                            {
                                name: '总数',
                                type: 'line',
                                data: this.lineSeries[4],
                            },
                    ],
                }
            this.echartLine.setOption(this.optionsLine)
        },
 watch: {
        productList: {
            //监听到数据,重绘echarts
            deep: true, //深度监听设置为 true
            handler: function (newV, oldV) {
               //监听到数据了,相应的数据获取
                })
              this.echartLine.dispose() //dom的摧毁
              this.init()
              this.echartLine.on('click', (params)=> {
                   //点击的相应逻辑
			 });
            },
        },
    },
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-06 10:58:49  更:2022-05-06 10:59:28 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 23:31:48-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码