关于vue移动端项目echarts的使用,点击柱状图触发多次点击事件

  • Post author:
  • Post category:vue




关于vue移动端项目echarts的使用,以及echarts的一次问题记录,点击柱状图触发多次点击事件

  1. echarts的安装

    npm install echarts –save(也可以使用cnpm,下载速度更快,附:安装cnpm命令

    npm install -g cnpm --registry=https://registry.npm.taobao.org

    )

  2. 入口文件引入

    1. 全局引入

      import echarts from 'echarts'
      
      Vue.prototype.$echarts = echarts
      
    2. 按需引入

      // 引入 ECharts 主模块
      let echarts = require('echarts/lib/echarts');
      // 引入折线图/柱状图等组件
      require('echarts/lib/chart/line')
      require('echarts/lib/chart/bar')
      require('echarts/lib/chart/radar')
      // 引入提示框和title组件,图例
      require('echarts/lib/component/tooltip')
      require('echarts/lib/component/title')
      require('echarts/lib/component/legend')
      require('echarts/lib/component/legendScroll')//图例滚动
      //vue全局注入echarts
      Vue.prototype.$echarts = echarts
      
  3. 组件中使用

    <template>
        <div class="myChart" ref="myChart"></div>
    </template>
    
    <style  lang="less" scoped>
        .myChart{
            width: 100px;
        	height: 190px;
        }
    </style>
    
    <script>
        export default {
            mounted() {
              this.drawLine() // 动态加载数据可在加装完接口调用
              this.onClickDetail()
      		},
            methods:{
              drawLine(){
          		let _this = this;
          	    let myChartDom = _this.$refs.myChart;
                if(myChartDom){
                    let myChart = _this.$echarts.init(myChartDom);
                    let option = {
                        //具体可根据官方文档来配置
                        color: ['#5795D0'],
                        tooltip : {
                            trigger: 'axis',
                            axisPointer : {
                                type : 'shadow'
                            },
                            formatter:function(params){
                                //根据业务逻辑写具体需要展示的内容
                                return  params[0].name;
                			}
                      	},
                        grid: {
                            left: 45
                        },
                        xAxis : [
                            {
                                type : 'category',
                                data : xData,// x轴数据
                                axisTick: {
                                    alignWithLabel: false
                                },
                                axisLine: {show:false},
                                axisTick: {show:false},//去掉外边框
                                //设置坐标轴字体颜色和宽度
                                axisLine:{
                                    lineStyle:{
                                        color:'#666666',
                                    }
                                },
                                axisLabel: {
                                    interval:0,
                                    rotate:-40
                                }
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                axisLine: {show:false},
                                axisTick: {show:false},
                                min: 0,
                                max: 100,
                                interval:20,
                                axisLabel:{
                                    formatter:'{value}%'
                                },
                                //设置坐标轴字体颜色和宽度
                                axisLine:{
                                    lineStyle:{
                                        color:'#666666',
                                    }
                                },
                                //设置网格线颜色
                                splitLine: {
                                    show: true,
                                    lineStyle:{
                                        color: ['#ffffff'],
                                        width: 1,
                                        type: 'solid'
                                    }
                                }
                            }
                        ],
                        //柱状数据过多,移动端设置此参数可以左右滑动
                        dataZoom: [{
                            type: 'inside',
                            show: true, //flase直接隐藏图形
                            xAxisIndex: 0,
                            handleSize: 0,//滑动条的 左右2个滑动条的大小
                            left: '15%', //滚动条靠左侧的百分比
                            height: 80,
                            bottom:'auto',
                            start: 0,//滚动条的起始位置
                            end: _this.EndPositoin,//滚动条的截止位置(按比例分割你的柱状图x轴长度)
                            showDataShadow: false,
                            showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
                            fillerColor: 'rgba(255,255,255,.1)',
                            borderColor: "none",
                            zoomLock:false,
                        }],
                        series : [
                            {
                                name:'启用数',
                                type:'bar',
                                barWidth: '60%',
                                data:yData,//y轴数据
                                label:{
                                    normal:{
                                        show: true,
                                        position: 'top',
                                        textStyle:{
                                            color: '#ccc',
                                            fontSize: 12
                                        },
                                        formatter: '{c}%',
                                    }
                                }
                            }
                        ],
                    };
                    myChart.setOption(option)
                     //加上以下这一行代码,不加的效果图如下(当浏览器窗口缩小的时候)。超过了div的界限()
                     //window.addEventListener('resize',function() {myChart.resize()});
                 }
              }/**
                 * @description: 点击柱状图
                */
               onClickDetail(){
                    let _this = this;
                    let myChart = _this.$echarts.init(_this.$refs.myChart);
                    //防止重复触发点击事件
                    myChart.getZr().off('click');
                    myChart.getZr().on('click', function (params) {
                        let pointInPixel= [params.offsetX, params.offsetY];
                        if (myChart.containPixel('grid',pointInPixel)) {
                           let indexFlg= myChart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; //获取所点击的点的索引
                           //可根据索引来开发相对应业务逻辑
                        }
                    });
                },
            }
        }
    </script>
    
  4. 问题记录

    1.bug 测试发现,点击柱状图跳转详情时,会触发两次点击事件,查看官方文档以及stackoverflow,发现需要在绑定点击事件前调用一下off()方法。这个跟vue的bus公共组件调用有相似之处,bus.



    o

    n

    b

    u

    s

    .

    on在接收参数前,有些情况也需要bus.






    o


    n












































    b


    u


    s


    .





    off()

    2.echarts中dataZoom方法的使用,数据过多可配置此参数实现左右滑动



版权声明:本文为xiaofeifei1015原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。