main.js
import echarts from 'echarts'
Vue.prototype.$echarts = function (el) {
return echarts.init(el, null, {renderer: 'svg'})
}
子组件
<template>
<div class="rightBar"></div>
</template>
<script>
export default {
name: '',
props: {
data: Array
},
data() {
return {}
},
methods: {
setSoliderData(type) {
let arr = [];
let obj = {};
for (let i = 0; i < this.data.length; i++) {
switch (type) {
case 'g':
obj = {
top: this.data[i].top,
left: 8,
right: 30,
height: "13.5%"
};
break;
case 'x':
obj = {
axisLine: {show: false},
axisTick: {show: false, interval: 0},
splitLine: {show: false},
type: 'category',
boundaryGap: false,
gridIndex: i,
axisLabel: {
show: false
},
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
};
break;
case 'y':
obj = {
type: "value",
axisLine: {show: false},
gridIndex: i,
axisTick: {show: false},
splitLine: {show: false},
axisLabel: {show: false}
};
break;
case 's':
obj = {
type: "bar",
barWidth: 2,
data: this.data[i].data,
label: {
show: true,
position: "insideBottomLeft",
offset: [3, 0],
distance: 2,
color: '#88B6C7',
fontSize: 9,
lineHeight: 9,
rich: {
a: {
// 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom
}
},
formatter: function (data) {
if (data.data.name.length == 2) {
return data.data.name.split("").join("\n\n");
} else {
return data.data.name.split("").join("\n");
}
},
},
itemStyle: {
color: { // 颜色线性渐变
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(' + this.data[i].color + ',1)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(' + this.data[i].color + ',0)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
xAxisIndex: i,
yAxisIndex: i,
};
break;
default:
break;
}
arr.push(obj)
}
return arr;
},
// 用户排名
setChart() {
let option = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
formatter: "{b}:{c}"
},
title: {
text: '重点关注用户排名',
left: 0,
top: 10,
textStyle: {
fontSize: 12,
color: "#FFF"
}
},
grid: this.setSoliderData('g'),
xAxis: this.setSoliderData('x'),
yAxis: this.setSoliderData('y'),
series: this.setSoliderData('s')
};
let myChart = this.$echarts(this.$el);
myChart.clear();
myChart.resize()
myChart.setOption(option);
},
},
mounted() {
this.setChart();
},
}
</script>
<style lang="less" scoped>
.rightBar {
height: 100%;
width: 55%;
float: left;
}
</style>
父组件
<distribution-solider
id="left_2"
:data="data2"
ref="distributionSolider1"
></distribution-solider>
json数据
data2: [ // 网赌用户排名数据
{
top: '16%',
color: '14,73,245',
data: [
{name: '王立国', value: 10},
{name: '李建国', value: 9},
{name: '董年月', value: 8},
{name: '高树安', value: 7},
{name: '李白', value: 6},
{name: '杜甫', value: 5},
{name: '刘禹锡', value: 4},
{name: '苏东坡', value: 3},
{name: '杜牧', value: 2},
{name: '李白', value: 1},
],
},
{
top: '34%',
color: '170,6,243',
data: [
{name: '王立国', value: 10},
{name: '李建国', value: 9},
{name: '董年月', value: 8},
{name: '高树安', value: 7},
{name: '李白', value: 6},
{name: '杜甫', value: 5},
{name: '刘禹锡', value: 4},
{name: '苏东坡', value: 3},
{name: '杜牧', value: 2},
{name: '李白', value: 1},
],
},
{
top: '50%',
color: '254,153,0',
data: [
{name: '王立国', value: 10},
{name: '李建国', value: 9},
{name: '董年月', value: 8},
{name: '高树安', value: 7},
{name: '李白', value: 6},
{name: '杜甫', value: 5},
{name: '刘禹锡', value: 4},
{name: '苏东坡', value: 3},
{name: '杜牧', value: 2},
{name: '李白', value: 1},
],
},
{
top: '68%',
color: '255,102,0',
data: [
{name: '王立国', value: 10},
{name: '李建国', value: 9},
{name: '董年月', value: 8},
{name: '高树安', value: 7},
{name: '李白', value: 6},
{name: '杜甫', value: 5},
{name: '刘禹锡', value: 4},
{name: '苏东坡', value: 3},
{name: '杜牧', value: 2},
{name: '李白', value: 1},
],
},
{
top: '85%',
color: '127,5,253',
data: [
{name: '王立国', value: 10},
{name: '李建国', value: 9},
{name: '董年月', value: 8},
{name: '高树安', value: 7},
{name: '李白', value: 6},
{name: '杜甫', value: 5},
{name: '刘禹锡', value: 4},
{name: '苏东坡', value: 3},
{name: '杜牧', value: 2},
{name: '李白', value: 1},
],
},
],
mounted() {
this.resizeFn = this.$debounce(()=> {
// 通过捕获系统的onresize事件触发我们需要执行的事件
this.$refs.channelBar2.setChart();
}, 500)
window.addEventListener('resize', this.resizeFn)
},
beforeDestroy() {
window.removeEventListener('resize', this.resizeFn)
}
自定义防抖
utils.js
export default {
install: function (Vue) {
Vue.prototype.$debounce = function ( fn,delay){
let timer = null //借助闭包
return function() {
if(timer){
clearTimeout(timer) //进入该分支语句,说明当前正在一个计时过程中,并且又触发了相同事件。所以要取消当前的计时,重新开始计时
timer = setTimeout(fn,delay)
}else{
timer = setTimeout(fn,delay) // 进入该分支说明当前并没有在计时,那么就开始一个计时
}
}
}
}
}
main.js
import utils from "./lib/utils.js";
Vue.use(utils)
监听浏览器变化echarts自适应好方法
于 2024-03-28 13:58:39 首次发布
文章描述了一个使用Vue.js和ECharts库创建动态图表的例子,展示了如何在子组件中初始化ECharts,设置不同类型的图表配置,并通过父组件的数据传递实现图表数据的更新。同时,文章提及了使用防抖函数处理窗口resize事件以优化性能。
摘要由CSDN通过智能技术生成