工作中常见bug记录--webpack&echarts

1：vue项目webpack打包后，直接打开，白屏

问题原因

文件引用路径不对

问题解决

根目录下新建 vue.config.js，在此处配置publicPath,具体如下：

module.exports = {
    ...
    runtimeCompiler: true,
    publicPath: './'
    ...
}

问题注意

依赖路由模式为hash，否则还会出现白屏的问题。（如果使用history模式上线，必须要服务端在服务器上有对应的模式才能使用history（看上面链接），如果服务器上没有配置，可以先使用默认的hash；）

配置路由模式:
1：hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。
2：history: 依赖 HTML5 History API 和服务器配置。
3：abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。

2：vue项目webpack打包后，echarts二次进入不出现，需刷新

问题原因

echarts只可有一个dom节点，此时原节点未销毁，无法知道渲染哪个，故白屏，（这个同华为云播放器）

问题解决

在beforeUnmount中销毁dom节点

export default {
  name: 'echarts',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
      myChart:null
    }
  },
  mounted(){
    this.initChart()
  },
  methods: {
    initChart(){
        // 基于准备好的dom，初始化echarts实例
        this.myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        this.myChart.setOption({
            title: { text: '在Vue中使用echarts' },
            tooltip: {},
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        })
    }
  },
 beforeUnmount() {
            console.log('beforeUnmount')
            if (!this.myChart) {
                return
            }
            this.myChart.dispose()
            this.myChart = null
        },
}

3：echarts小优化记录（echarts网址）

echartsx轴只展示最大与最小值

修改完Echarts图的配置项值的axisLabel的完整值如下：

axisLabel: {
    margin: 10,
    interval: 100000,
    showMinLabel: true,
    showMaxLabel: true,
    textStyle: {
        color: '#999',
        fontSize: 12,
    }
}

echartsx轴不展示刻度

axisTick: {
   show: false
},

echarts折线图不展示小圆点

series:[{
	symbol:none;    //去掉折线上的小圆点
	type:line;
	name:seriesName;
	data:seriesData
}]

echarts折线图y轴数字改为需要的样式

  axisLabel: {                   
      formatter:function (value, index) {           
         return value.toFixed(2) + '%';      
        }
    }

echarts折线图tooltip自定义

 tooltip : {
        trigger: 'axis',
        axisPointer : {            
            type : 'shadow'        
        },
         formatter: function (params){
            return  params[0].name + '<br/>'
                    + params[0].seriesName + ' : ' + params[0].value+'<br/>'
                    +params[1].seriesName+':'+params[1].value;
            }
    },

echarts折线图tooltip只展示横线，获取当前点击坐标

echarts的tooltip配置：

tooltip: {
    trigger: 'axis',
    // show: false, // 是否展示，默认展示
    triggerOn: 'none', // 属性值：mousemove|click,mousemove,click以及none(不展示)
     showContent: false, // 不展示toolTip内容
     axisPointer: {
       axis: 'x',
       snap: true,
       lineStyle: {
         color: 'rgba(86,86,86,0.50)'
       }
     }
 }

echarts的axisPointer配置：

axisPointer: {
   triggerOn: 'none' // 属性值：mousemove|click,mousemove,click以及none(不展示)
},

在eCharts实例上监听鼠标事件：

// 按下鼠标
myChart.getZr().on('mousedown', chartTouchHandler)
// 按下鼠标事件去除
//myChart.off('mouseup')
// 移动鼠标
myChart.getZr().on('mousemove', chartTouchHandler)
// 移动鼠标事件去除
// myChart.off('mousemove')
// 鼠标抬起时隐藏axisPointer
myChart.getZr().on('mouseup', chartLeaveHandler)
// 鼠标抬起事件去除
// myChart.off('mouseup')

事件对应方法

chartTouchHandler(params) {
 let that = this
 let index // 当前点击坐标在数组中的位置
 let pointInPixel = [params.offsetX, params.offsetY]
 if (myChart.containPixel('grid',pointInPixel)) {
   index = myChart.coverFromPixel({seriesIndex:0, pointInPixel)[0]
  }
chartLeaveHandler () {
  点击事件取消逻辑处理
}

echarts增加滑动事件后，移动端中与页面下拉事件冲突

改为用highcharts来开发，highcharts更适合移动端

echarts折线图tooltip动态控制图表不实时更新

myChart.setoption(option, true) // 设置为true的话，就是notMerge，图表重绘，不合并false的话，就Merge，之前的东西还保留~.

echarts折线图y轴刻度展示在图表内部

Yaxis: {
  axisLabel: {
   inside: true,
   padding: [-10, 0, 0, 0] // 使刻度不在横线上，5.0.0版本不生效，4.00版本正常
}