4.18-echarts -分辨率适配-echart 渐变内置生成器echarts.graphic.LinearGradient-echart图表通用代码结构- 折线图，实现点击切换数据值
一.学习内容
1.1分辨率适配
1.在挂载时,通过一个适配函数进行浏览器窗口的监听
window.addEventListener("resize", this.screenAdapter(函数名));
2.写入适配函数，用于处理文档上变化的元素（例如：标题，图形，位置，图例的大小），当浏览器的大小发生变化的时候, 会调用的此函数, 来完成屏幕的适配
screenAdapter () {
//计算出的适配率
this.titleFontSize = this.$refs.trend_ref.offsetWidth / 100 * 3.6
//给变化的元素进行重新赋值
const adapterOption = {
//设置图例的大小
legend: {
itemWidth: this.titleFontSize,
itemHeight: this.titleFontSize,
itemGap: this.titleFontSize,
textStyle: {
fontSize: this.titleFontSize / 2
}
}
}
//重新渲染数据
this.chartInstane.setOption(adapterOption)
//最后一定要调用resize()，页面才有反应，因为resize 用来改变图表尺寸，在容器大小发生改变时需要手动调用。
this.chartInstane.resize()
},
3.在页面刚挂载时就要进行屏幕适配，所以挂载时还需要调用适配函数
window.addEventListener('resize', this.screenAdapter)
this.screenAdapter()
4.为了防止数据流失，载组件销毁时需要将适配监听器取消
destroyed () {
// 在组件销毁的时候, 需要将监听器取消掉
window.removeEventListener('resize', this.screenAdapter)
},
1.2 echart 渐变内置生成器echarts.graphic.LinearGradient
- 单个颜色渐变
// 4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 1 0则代表渐变色从左方开始
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
// 百分之0状态之下的颜色值
{
offset: 0,
color: '#5052EE'
},
// 百分之100状态之下的颜色值
{
offset: 1,
color: '#AB6EE5'
}
])
- 多个颜色渐变
updateChart () {
// 半透明的颜色值
const colorArr1 = [
'rgba(11, 168, 44, 0.5)',
'rgba(44, 110, 255, 0.5)',
'rgba(22, 242, 217, 0.5)',
'rgba(254, 33, 30, 0.5)',
'rgba(250, 105, 0, 0.5)'
]
// 全透明的颜色值
const colorArr2 = [
'rgba(11, 168, 44, 0)',
'rgba(44, 110, 255, 0)',
'rgba(22, 242, 217, 0)',
'rgba(254, 33, 30, 0)',
'rgba(250, 105, 0, 0)'
]
...............
const seriesArr = valueArrs.map((item, index) => {
return {
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: colorArr1[index]
}, // %0的颜色值
{
offset: 1,
color: colorArr2[index]
} // 100%的颜色值
])
}
}
1.3 echart图表通用代码结构
主要流程：
- 初始化echartInstance对象
- 获取服务器的数据，监听屏幕大小
- 更新图表
- 完成屏幕的适配
- 在组件销毁的时候, 需要将监听器取消掉
export default {
data () {
return {
chartInstane: null,
allData: null, // 从服务器中获取的所有数据
titleFontSize: 0 // 指明标题的字体大小
}
},
mounted () {
this.initChart()
this.getData()
window.addEventListener('resize', this.screenAdapter)
// 在页面加载完成的时候, 主动进行屏幕的适配
this.screenAdapter()
},
// 在组件销毁的时候, 需要将监听器取消掉
destroyed () {
window.removeEventListener('resize', this.screenAdapter)
},
methods: {
// 初始化echartInstance对象
initChart () {
this.chartInstane = this.$echarts.init(this.$refs.trend_ref, 'chalk')
const initOption = {
}
this.chartInstane.setOption(initOption)
},
// 获取服务器的数据
async getData () {
// await this.$http.get()
this.updateChart()
},
// 更新图表
updateChart () {
const dataOption = {
}
this.chartInstane.setOption(dataOption)
},
//当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
screenAdapter () {
this.titleFontSize = this.$refs.trend_ref.offsetWidth / 100 * 3.6
//图例的适配
const adapterOption = {
legend: {
itemWidth: this.titleFontSize,
itemHeight: this.titleFontSize,
itemGap: this.titleFontSize,
textStyle: {
fontSize: this.titleFontSize / 2
}
}
}
this.chartInstane.setOption(adapterOption)
this.chartInstane.resize()
}
}
}
1.4 折线图，实现点击切换数据值
目标：自定义实现下拉框，通过选择不同的销量趋势，对折线图的数据展示进行更改。选择后对下拉框进行隐藏。
实现：
-
获取数据，首先展示默认销量趋势的折线图
async getData() { //获取数据 const { data: res } = await this.$http.get("trend"); this.allData = res; this.updateData(); }, updateData(){ //获取地区销量趋势 const timerArr = this.allData.common.month; const valueArr = this.allData.map.data; const seriesArr = valueArr.map((item, index) => { return { data: item.data, type: "line", //堆叠图的设置 stack: 'map', name: item.name, }; }); } -
获取所有的趋势类型和当前的标题趋势动态渲染到下拉框
computed: { selecttype() { if (this.allData.length === 0) { return []; } else { return this.allData.type }); } } showTitle() { if (!this.allData) { return []; } else { return this.allData[this.showType].title; } }, }<span>{{ "▎" + showTitle }}</span> <div class="select-item"v-for="(item, index) in selecttype :key="item.key">{{ item.text}}</div> -
初始化趋势类型对象
showType，给下拉框绑定点击事件函数，并写入函数，传入当前点击的趋势类型，对showType的值进行修改，并调用updateData函数更新图表<div class="select-item" v-for="(item, index) in selecttype":key="item.key"@click="handler(item.key)"> {{ item.text }} </div>handler(currentType) { this.showType = currentType; //更新图表 this.updateData(); this.falg = false; }, -
修改第一步写死的只展示默认销量趋势折线图，将其修改成动态
updateData(){ //获取地区销量趋势 const timerArr = this.allData.common.month; //获取当前点击的销量趋势 const valueArr = this.allData[this.showType].data; const seriesArr = valueArr.map((item, index) => { return { data: item.data, type: "line", stack: this.showType, name: item.name, } } -
初始化一个标志 falg: false,，用于控制下拉框的显示和隐藏。给箭头绑点点击事件，对下拉框显示和隐藏进行切换
<span class="iconfont title-icon" @click="falg = !falg" :style="comStyle" ></span<div class="select-con" v-show="falg" :style="margeStyle"> <div class="select-item" v-for="(item, index) in selecttype" :key="item.key" @click="handler(item.key)" > {{ item.text }} </div> -
在handler函数中点击切换趋势类型后就隐藏下拉框，this.falg = false;
-
解决：由于点击出现在标题的趋势类型和下拉框中有重复，通过filter对下拉框的趋势类型进行过滤
捋清楚，`showTitle`：标题趋势类型，当前图表展示的趋势类型。selecttype() { if (this.allData.length === 0) { return []; } else { //过滤出与不包含当前选取的趋势类型，呈现在下拉框 return this.allData.type.filter((item) => { return item.key != this.showType; }); } },showType：当前选取的趋势类型，用于修改图表的展示，将其作为索引在allData[this.showType]，中获取当前选取的趋势类型图表。selecttype：所有的趋势类型，不包括标题趋势。
二.学习总结
重点：1.分辨率适配，通过一个函数对浏览器窗口进行监听，计算出适配率，给项目中数据变化的元素，加上适配率，最后一定要调用resize()，页面才有反应。2.捋清楚创建图表通用代码流程：初始化echartInstance对象=>获取服务器的数据 ,监听屏幕大小 =>更新图表 =>完成屏幕的适配 =>在组件销毁的时候, 需要将监听器取消掉。3.在实现点击切换折线图数据时要捋清楚三对象属性：showTitle：标题趋势类型，当前图表展示的趋势类型。showType：当前选取的趋势类型，用于修改图表的展示，将其作为索引在allData[this.showType]，中获取当前选取的趋势类型图表。selecttype：所有的趋势类型，不包括标题趋势。
