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

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

echarts的安装

npm install echarts –save(也可以使用cnpm，下载速度更快，附：安装cnpm命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
)

入口文件引入

全局引入

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

按需引入

// 引入 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

组件中使用

<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>

问题记录

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

n

在

接

收

参

数

前

，

有

些

情

况

也

需

要

b

u

s

.

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

$o n 在接收参数前，有些情况也需要 b u s .$

off()

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

原文链接：https://blog.csdn.net/xiaofeifei1015/article/details/118994394

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

你可能也喜欢