Echarts使用(Vue) 时间轴事件绑定、单图例多种切换
最近项目中有使用到Echarts的图表实例,一直查又嫌麻烦,自己总结一些使用上的内容,希望同时也能帮助到你。总体内容**1、Vue项目怎么使用Echarts**2、在使用带有时间轴内容时给时间轴绑定事件3如果不是Vue项目,可通过官网说明进行使用。**安装**```npm install echarts -S```**引入项目/使用**```main.js`````...
最近项目中有使用到Echarts的图表实例,一直查又嫌麻烦,自己总结一些使用上的内容,希望同时也能帮助到你。
总体内容
**1、Vue项目怎么使用Echarts**
2、在使用带有时间轴内容时给时间轴绑定事件
3
如果不是Vue项目,可通过官网说明进行使用。
1、Vue项目怎么使用Echarts
安装
npm install echarts -S
引入项目/使用
main.js
import myCharts from "echarts";
Vue.prototype.$myCharts = myCharts
单页面中
template
<template>
<div id="main" style="width: 100%;height:600px;"></div>
</template>
script
mounted(){
this.myCharts = this.$myCharts.init(document.getElementById("main"));
this.ModeCharts()//调用构建图例
},
methods:{
ModeCharts(){
var option = { //图表数据
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
this.myCharts.setOption(option);//必要一步
}
}
如果是纯静态展示,同样在echart初始化后调用含步骤setOption(option)
创建渲染的方法即可
但是 一般来说setOption都是在数据结构组装完成之后,也就是在向后端请求到数据,并将数据组装成echarts所需要的结构,再调用setOption,以上基本就是在Vue中使用Echarts基本步骤
注: echarts官方图例上所有的 setOption 事件都绑定在了 刷新 按钮上
解析echarts构建方法中各部分
技术能力有限,暂没做到解析源码,只是就一般使用内容做一下注解;
这是基本大框架内容用法标注,echarts所支持内容肯定不仅仅这部分,有特别多的b主对各个部分作了更详细的介绍。
Gird说明
Title说明
2、带时间轴图例怎么绑定事件。
何谓echarts时间轴,也就是在X轴下方带块级选中操作
的图例。
而在数据量很庞大的情况下,后台数据往往不可能一次性将你需要的数据结构组装传给前端,这时候就需要对单个块级进行绑定事件,在每次点击的时候重新向后台请求这个块的数据,再重新调用所含setoption的构造函数即可。
一般在option中为timeline
属性。
默认选中时间轴的下标极为重要currentIndex(number)
,再每次点击的时候如果不重新设置默认选中下标,你的数据虽然改变了,下方的块级却依旧还是默认选中。
var option = {
timeline: { //时间轴属性
axisType: 'category',
show: true,
symbol:'rect',
symbolSize:15,
currentIndex:0,//默认选中时间轴的下标
controlStyle:{
show:false
},
autoPlay: false, //是否自动播放
playInterval: 1000, //播放时间间格
data: []
},
options: []
};
添加事件
已知我在初始化echarts画板时所绑定的名称为myChart
,添加事件 timelinechanged
事件
this.myChart.on('timelinechanged', function (timeLineIndex) {
console.log(timeLineIndex) // timeLineIndex为你的单个时间轴内容
console.log(timeLineIndex.currentIndex) // 时间轴下标
});
同理,echarts还有其他的可绑定事件,w3cschool上的解析
细小的一些所用到的内容;
都为option内属性,仅需要加在option={属性}
内
更改标题对齐位置:title属性下的left,top,botton,right
标注解释/说明
legend: {
show: true, //是否展示
x: 'center', //对其方式
data: ['男性','女性'] //显示内容
}
配置Y轴最大值(最小值): yAxis
属性对象下max(min)
属性
如果yAxis
列表中存在两个对象,所示内容就是这样
yAxis: [{
type: 'value',
name: '报名人数',
max:function(value) {
//value所含 是你所用数据对象中的 [](max值,value值)
return value.max+10000;
},
axisTick:{
show:false
},
splitLine: {
show: false
}
}, {
type: 'value',
name: '百分比(%)',
show:false,
axisTick:{
show:false
},
splitLine:{
show:false
}
}],
单图例配置多中图例切换方式
toolbox: {
show: true,
feature: {
dataView: {show: true, readOnly: false}, //数据报表
magicType: {show: true, type: ['line', 'bar']}, //切换为折线图
restore: {show: true}, //还原
saveAsImage: {show: true} //保存为图片
}
},
取消图例自带的缩放功能:找到dataZoom
,注销即可
缩放echart柱状图宽度,折线图线的粗细:
更新----
在使用数据视图的时候,对数据视图显示内容进行控制:
不论是否其中的内容是你想要的,你也可以对他们的内容进行控制;
已知数据视图在echarts上控制属性为
toolbox >>> feature>>>dataView
toolbox
为option
下第一级属性,dataView
则是控制数据视图按钮的显示
toolbox:{
show: true, //显示?
feature: { //显示的内容?
dataView: { //数据视图
show: true,
readOnly: true, //只读?
optionToContent:function(val){ //控制展示的内容
var axisData = ['','核销金额','带动消费金额','带动比'];
var series = val.series[0].data;
var table = '',th='',tr='',als = '';
for (let i in axisData){
th += '<th>' + axisData[i] + '</th>'
}
tr='<tr>' + th +'</tr>';
series.map(item=>{
als += '<tr style="height: 30px;">' +'<td>'+item.countColumn +'</td>'+'<td>'+item.value +'</td>'+'<td>'+item.num +'</td>'+'<td>'+(item.num/item.value).toFixed(2) +'</td>'+'</tr>'
})
table = '<table style="width: 400px">'+ tr + als +'</table>';
return table;
}}, //数据报表我组装成了一个表格
}
},
有持续使用就有持续更新
更多推荐
所有评论(0)