[JavaScript知识库]关于vue移动端项目echarts的使用，点击柱状图触发多次点击事件

关于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.$on在接收参数前，有些情况也需要bus.$off()

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