黄龙封神传,天天向上周韦彤,风色幻想2alive
前言
这是我准备在这个项目中使用的图形库，这也是一款基于html5的图形库。图形的创建也比较简单，直接引用javascript即可。使用这个库的原因主要有三点，一个是因为这个库是百度的项目，而且一直有更新，目前最新的是echart 3；第二个是这个库的项目文档比较详细，每个点都说明的比较清楚，而且是中文的，理解比较容易；第三点是这个库支持的图形很丰富，并且可以直接切换图形，使用起来很方便。
下面话不多说了，来一起看看详细的介绍吧
1 环境：
vue-cli（2.0）+ vue-echarts (git地址：https://github.com/ecomfe/vue-echarts（）)
2 场景：
最近项目用echarts来展示图标，其中有一个需求，需要拖动手柄，等松开手柄时，要根据手柄所在的位置(获取手柄在的x轴信息)，重新发送请求，来渲染数据。
echarts的手柄实例地址：http://echarts.baidu.com/examples/editor.html?c=line-tooltip-touch
3图：
4遇到的bug：
4.1 手柄上的label信息，有时会刷新不出来。即上图中的2016-10-07消失。
4.2 echarts的点击事件对折线图并不友好，必须点在折线图的点坐标上才会触发事件。so,要实现点击图中任意位置来即可实现触发自己的事件。
4.3 echarts提供了可以拖动的手柄，但是并没有松开手柄后触发的事，这个没有满足我们产品的需求。当然有可能是我没有找到，若有请告知，谢谢。
5解决以上的bug:
页面的展示如下：
我要评论
<template>
<div>
<div id='line' @touchend='touchs' @mouseup='touchs'>
<v-chart auto-resize class='zhexian' :options='lineoption' :initoptions='initoptions' ref='line' />
</div>
</div>
</template>
<script>
//初始化折线的数据
import lineoption from '@/assets/js/handleline.js'
export default{
data(){
return{
lineoption:lineoption,
initoptions:{
renderer: 'svg' || 'canvas'
},
date:'',//发送ajax时所需的参数
reflag:'',//避免重复发送请求时的中间变量
}
},
}
</script>
拖动手柄时，会实时触发formater,
解决第一个bug ，label有时会消失，因为我以后的代码会用到formatter,第一次要用formater ,我是这样写的，
this.lineoption.xaxis.axispoint.label.formatter=function(param){
//param是x轴的信息
let value = _this.$echart.format.formattime('yyyy-mm-dd', params.value);
_this.date =value;
console.log('实时获取的x轴的事件'+_this.date)
return value;
},
,axispoint对象的其他数据写在了handleline.js中，解决方案就是把axispoint的其他数据也重新setoption了，
mounted(){
//
let _this = this;
this.lineoption.xaxis.axispointer={
value: '2016-10-7',
snap: true,
linestyle: {
color: '#004e52',
opacity: 0.5,
width: 2
},
label: {
show: true,
formatter: function (params) {
let value = _this.$echart.format.formattime('yyyy-mm-dd', params.value);
_this.date =value;
console.log('实时获取的x轴的事件'+_this.date)
return value;
},
backgroundcolor: '#004e52'
},
handle: {
show: true,
color: '#004e52'
}
}
},
解决第三个bug，结合了formatter 和 vue的touchend事件，单独的formatter并没有用，因为手指离开时，formatter的param数据会获取多个，也有可能会是多个重复的数据。效果并不好。so结合了touchend事件，手指离开时获取最终的date.
methods:{
touchs(){
//手指离开手柄事件，因为手柄滑动时，就会触发formatter，这时，this.date 就会发生改变。当你手指触发其他的地方时
//并不会改变this.date的值，so。为了避免手指离开时重复发送请求，需要一个中间变量。只有两个值不相等才会去做自己想做的事。
if (this.reflag == this.date) {
return
}
this.reflag = this.date
//重新发送请求,渲染数据，这时已经或得了x轴的时间。
console.log(this.date)
// this.getpiedata()
},
}
解决第二个bug ,这是从网上找到的。实现点击折线图的任意地方获取x轴的信息，发送请求。同时，要让lineoption中的tooltip:{triggeron:'click'} ,否则点击无效。
sendtime() {
//写在mounted中调用
var chart = this.$echart.init(this.$refs.line.$el)
chart.getzr().on('click', params => {
var pointinpixel = [params.offsetx, params.offsety]
if (chart.containpixel('grid', pointinpixel)) {
let xindex = chart.convertfrompixel({ seriesindex: 0 }, [
params.offsetx,
params.offsety
])[0];
let a =this.$echart.format.formattime('yyyy-mm-dd', xindex);
/*事件处理代码书写位置*/
// xindex是个重要信息，用的时候最好打印看下具体的内容再用
console.log(xindex);
// this.date = this.linedata[xindex + 1][0];
// 手指点击后，让这两个值相等，避免触发touchend事件，
this.reflag = this.date=a;
//重新发送请求
//this.getpiedata()
}
})
},
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对移动技术网的支持。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
利用JavaScript更改input中radio和checkbox样式
网友评论