echart事件总结

其他 2019-05-10 11:01:12 阅读次数: 0

echart常用属性和事件总结

dataset数据集管理数据：

https://www.cnblogs.com/goloving/p/9114048.html

dataset多图叠加：

https://echarts.baidu.com/examples/editor.html?c=dataset-series-layout-by&theme=light

echart常用的事件和方法:

https://blog.csdn.net/u014136910/article/details/79695548

给Y轴设置固定距离：

http://blog.sina.com.cn/s/blog_6c21f6480102vduj.html

设置段数splitNumber，和最小值及最大值（min及max）

给X轴添加点击事件：

https://blog.csdn.net/sophia_xiaoma/article/details/78055947?utm_source=blogxgwz9

设置方法：

在渲染echart图时给绑定添加事件，如：

drawLine (optType) {
        // 基于准备好的dom，初始化echarts实例
        let that = this
        const initDom = document.getElementById('barGraph')
        if (!initDom) {
          return false
        }
        let fpChange = echarts.init(initDom)
        fpChange.clear()
        fpChange.setOption(optType)
        fpChange.on('click', function (params) {
          if (params.componentType === 'xAxis' && that.oldVal !== params.value) {
            that.oldVal = params.value
            that.cityId = that.baseCityData[0].id
            const getFilterId = that.baseCityData.filter((item, index) => {
              if (params.value.includes(item.name)) {
                let opt = fpChange.getOption()
                let dz = opt.dataZoom[0]
                that.endValIndex = dz.endValue
                that.activeIndex = index
                that.activeName = item.name
                that.scrollName = item.name
                // params.event.target.style.textFill = 'red'
                return item.id
              }
            })
            that.cityId = getFilterId[0].id
            that.getDetail()
          }
        })
        fpChange.on('datazoom', function (params) {
          // 滚动时获取滚动条第一个start值
          // let opt = fpChange.getOption()
          // let dz = opt.dataZoom[0]
          // let s = opt.xAxis[0].data[dz.startValue]
          // const reg = /[\u4e00-\u9fa5]/g
          // const names = s.match(reg)
          // if (that.endValIndex > dz.endValue) {
          //   if (indexLen < that.endValIndex - dz.endValue) {
          //     that.scrollName = ''
          //   } else {
          //     that.scrollName = that.activeName
          //   }
          // }
        })
        window.addEventListener('resize', () => {
          fpChange.resize()
        })
      }

x轴的数据也可以通过formatter: function 的形式设置返回需要格式的数据

实现多种echart图形叠加图

多图联动案例：

https://www.cnblogs.com/mobeisanghai/p/8025448.html

  • 自定义两种方式：
    • 方法1：

      设置gridIndex的层级来限定

      图例：

    在这里插入图片描述
opt () {
        let obj = {
          tooltip: this.tooltipPer1,
          dataZoom: [{
            type: 'slider',
            start: 0,
            end: 20,
            zoomLock: true,
            height: 20, // 组件高度
            bottom: 8,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            xAxisIndex: [0, 1, 2],
            handleStyle: {
              color: '#fff',
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          }],
          xAxis: [
            {
              type: 'category',
              gridIndex: 0,
              data: this.barData.cityList,
              axisLine: false,
              axisTick: false,
              axisLabel: {
                interval: 0
              },
              splitLine: {
                show: true
              }
            },
            {
              type: 'category',
              gridIndex: 1,
              data: this.barData.cityList,
              axisLine: false,
              axisTick: false,
              axisLabel: {
                interval: 0
              },
              splitLine: {
                show: true
              }
            },
            {
              type: 'category',
              gridIndex: 2,
              triggerEvent: true,
              data: this.barData.cityList,
              nameTextStyle: {
                backgroundColor: 'red',
                label: {
                  rich: {
                    backgroundColor: 'red',
                    width: '100%',
                    height: '100%'
                  }
                }
              },
              axisLabel: {
                interval: 0,
                margin: 15,
                textStyle: {
                  color: ''
                }
              },
              axisLine: {
                show: false
              },
              axisTick: false,
              splitLine: {
                show: true
              }
            }
          ],
          yAxis: [
            {
              gridIndex: 0,
              splitNumber: 5,
              min: 0,
              max: 100,
              axisLabel: {
                formatter: '{value} %'
              },
              axisLine: {show: false},
              axisTick: false,
              splitLine: {
                show: true
              }
            },
            {
              gridIndex: 1,
              splitNumber: 5,
              min: 0,
              max: 100,
              axisLabel: {
                formatter: '{value} %'
              },
              axisLine: {show: false},
              axisTick: false,
              splitLine: {
                show: true
              }
            },
            {
              gridIndex: 2,
              splitNumber: 5,
              min: 0,
              max: 100,
              axisLabel: {
                formatter: '{value} %'
              },
              axisLine: {show: false},
              axisTick: false,
              splitLine: {
                show: true
              }
            }
          ],
          grid: [
            {top: '10px', height: '95px', right: '0', left: '10%'},
            {top: '125px', height: '95px', right: '0', left: '10%'},
            {top: '240px', height: '95px', right: '0', left: '10%'}
          ],
          series: [
            {type: 'bar', seriesLayoutBy: 'row', barWidth: 15, data: this.barData.groupList1, itemStyle: {normal: {color: '#ffe699'}}},
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1, barWidth: 15, data: this.barData.groupList2, itemStyle: {normal: {color: '#8ededa'}}},
            {type: 'bar', xAxisIndex: 2, yAxisIndex: 2, barWidth: 15, data: this.barData.groupList3, itemStyle: {normal: {color: '#81d4fa'}}}
          ],
          legend: {}
        }
        return obj
      }

在这里插入图片描述

opt1 () {
        let obj = {
          tooltip: this.tooltipPer2,
          dataZoom: [{
            type: 'slider',
            start: 0,
            end: 20,
            zoomLock: true,
            height: 20, // 组件高度
            bottom: 8,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            xAxisIndex: [0, 1, 2],
            handleStyle: {
              color: '#fff',
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          }],
          xAxis: [
            {
              type: 'category',
              gridIndex: 0,
              data: this.barData2.cityList,
              axisLine: false,
              axisTick: false,
              axisLabel: {
                interval: 0
              },
              splitLine: {
                show: true
              }
            },
            {
              type: 'category',
              gridIndex: 1,
              data: this.barData2.cityList,
              axisLine: false,
              axisTick: false,
              axisLabel: {
                interval: 0
              },
              splitLine: {
                show: true
              }
            },
            {
              type: 'category',
              gridIndex: 2,
              triggerEvent: true,
              data: this.barData2.cityList,
              axisLabel: {
                interval: 0,
                margin: 15
              },
              axisLine: {
                show: false
              },
              axisTick: false,
              splitLine: {
                show: true
              }
            }
          ],
          yAxis: [
            {
              gridIndex: 0,
              splitNumber: 5,
              axisLine: {show: false},
              min: 0,
              max: 6,
              axisTick: false,
              splitLine: {
                show: true
              }
            },
            {
              gridIndex: 1,
              splitNumber: 5,
              min: 0,
              max: 6,
              axisLine: {show: false},
              axisTick: false,
              splitLine: {
                show: true
              }
            },
            {
              gridIndex: 2,
              splitNumber: 5,
              min: 0,
              max: 6,
              axisLine: {show: false},
              axisTick: false,
              splitLine: {
                show: true
              }
            }
          ],
          grid: [
            {top: '10px', height: '95px', right: '0', left: '10%'},
            {top: '125px', height: '95px', right: '0', left: '10%'},
            {top: '240px', height: '95px', right: '0', left: '10%'}
          ],
          series: [
            {type: 'bar', name: '绑定', xAxisIndex: 0, yAxisIndex: 0, seriesLayoutBy: 'row', barWidth: 15, stack: '3', data: this.barData2.groupMap1.bond, itemStyle: {normal: {color: '#81d4fa'}}},
            {type: 'bar', name: '未绑定', xAxisIndex: 0, yAxisIndex: 0, seriesLayoutBy: 'row', barWidth: 15, stack: '3', data: this.barData2.groupMap1.unBond, itemStyle: {normal: {color: '#ffe699'}}},
            {type: 'bar', name: '绑定', xAxisIndex: 1, yAxisIndex: 1, barWidth: 15, stack: '1', data: this.barData2.groupMap2.bond, itemStyle: {normal: {color: '#81d4fa'}}},
            {type: 'bar', name: '未绑定', xAxisIndex: 1, yAxisIndex: 1, barWidth: 15, stack: '1', data: this.barData2.groupMap2.unBond, itemStyle: {normal: {color: '#ffe699'}}},
            {type: 'bar', name: '绑定', xAxisIndex: 2, yAxisIndex: 2, barWidth: 15, stack: '2', data: this.barData2.groupMap3.bond, itemStyle: {normal: {color: '#81d4fa'}}},
            {type: 'bar', name: '未绑定', xAxisIndex: 2, yAxisIndex: 2, barWidth: 15, stack: '2', data: this.barData2.groupMap3.unBond, itemStyle: {normal: {color: '#ffe699'}}}
          ]
        }
        return obj
      }
  • 方法2：

    设置datazoom数据集来限定

option = {
    tooltip: { // 提示框
            trigger: 'axis'
          },
          legend: {},
          dataZoom: [{type: 'slider', xAxisIndex: [0, 1, 2]}],
          xAxis: [
            {
              type: 'category',
              gridIndex: 0,
              data: ['2012', '2013', '2014', '2015'],
              axisLine: false,
              splitLine: {
                show: true
              }
            },
            {
              type: 'category',
              gridIndex: 1,
              data: ['2012', '2013', '2014', '2015'],
              axisLine: false,
              splitLine: {
                show: true
              }
            },
            {
              type: 'category',
              gridIndex: 2,
              data: ['2012', '2013', '2014', '2015'],
              splitLine: {
                show: true
              },
              axisLabel: {
                interval: 0,
                margin: 20,
                backgroundColor: 'green',
                
                // formatter: this.scroll
              },
            }
          ],
          yAxis: [
            {
              gridIndex: 0,
              splitNumber: 5,
              axisLine: {show: false},
              axisTick: false,
              data: [0, 25, 50, 75, 100],
              splitLine: {
                show: true
              }
            },
            {
              gridIndex: 1,
              splitNumber: 5,
              splitLine: {
                show: true
              }
            },
            {
              gridIndex: 2,
              splitNumber: 5,
              splitLine: {
                show: true
              }
            }
          ],
          grid: [
            {top: '1%', height: '150px'},
            {top: '35%', height: '150px'},
            {top: '65%', height: '150px'}
          ],
          series: [
            {type: 'bar', seriesLayoutBy: 'row', data: [65.5, 56, 85.7, 34.1]},
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1, data: [86.5, 92.1, 85.7, 83.1]},
            {type: 'bar', xAxisIndex: 2, yAxisIndex: 2, data: [86.5, 92.1, 85.7, 83.1]}
          ]
};

过滤汉字方法：

filterName (val) { // 获取X轴name
        const reg = /[\u4e00-\u9fa5]/g
        const names = val.match(reg)
        return names.join('')
      },

echart中echart图 tooltip提示，特殊设置方法：

tooltipPer1 (orgType) {
        let that = this
        return {
          trigger: 'axis',
          formatter: function (params, ticket, callback) {
            let res = ''
            let gradName = ''
            if (params[0].color === '#ffe699') gradName = '小学'
            if (params[0].color === '#8ededa') gradName = '初中'
            if (params[0].color === '#81d4fa') gradName = '高中'
            res = that.filterName(params[0].name) + '<br/>'
            const circle = '<span style="margin-right: 3px; display: inline-block; width: 10px; height: 10px; background-color:' + params[0].color + '; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%;"></span>'
            res += circle
            res += gradName + ' : ' + params[0].value + '%' + '<br/>'
            return res
          }
        }
      }

控制X轴的显示个数：

可以设置段数splitNumber，但超出可能会不起作用

start，end，来控制固定显示多少个数据

zoomLock为true时，来控制拖拽滚动条时无缩放，固定间距

##### 设置固定间距的datazom案例： 
dataZoom: [{
            type: 'slider',
            start: 0,
            end: 20,
            zoomLock: true,
            height: 20, // 组件高度
            bottom: 8,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            xAxisIndex: [0, 1, 2],
            handleStyle: {
              color: '#fff',
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          }]

猜你喜欢

转载自blog.csdn.net/qq_32885597/article/details/89574712
今日推荐
周排行
Leetcode简单题61~80
解决zookeeper磁盘IO高的问题
多线程相关方法详解
Maven-setting.xml文件详解
Maven 项目的 classpath 理解
渊亭科技大数据笔试题
配置JVM内存分配
计算机网络个人学习笔记 （三）网络层 ：第三部分 连载
js中两个等号(==)和三个等号(===)的区别
用C程序自动打开电脑上的程序
每日归档
更多
2024-09-18(0)
2024-09-17(0)
2024-09-16(0)
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)
2024-09-09(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022