最后
由于文档内容过多,为了避免影响到大家的阅读体验,在此只以截图展示部分内容
先来看效果图:
目录
👍🏻实现过程
主要echarts的柱状图和饼图配合点击事件进行数据传值,饼图数据渲染。
📊 柱状图思路
- 全局引入echarts
- 模拟柱状图数据
- 定义关键三个函数:drawPieCharts,BarClick,defaultClick
- 初始化数据
整体函数预览:
1.初始化数据
获取dom元素,echarts初始化图表,drawPieCharts来画柱状图,BarClick来初始化柱状图的点击事件。
// 初始化
onMounted(() => {
const chartDom = document.getElementById("pieCharts");
myChart = echarts.init(chartDom);
drawBarCharts(list.value);
BarClick();
});
2.画柱状图
这里面就是普通的echarts画柱状图的方法,需要注意的是visualMap画区域颜色,markLine来默认画出第一条线
// 画柱状图
const drawBarCharts = (list: any[]) => {
// drawPieChart("skip", "");
if (option) {
myChart.dispose(); //释放图表
}
// 折线图 默认配置
option = {
grid: {
top: 40,
},
yAxis: {
type: "category",
axisTick: {
show: false,
},
data: list.map((i) => i.name).reverse(),
},
xAxis: {
type: "value",
},
visualMap: {
type: "piecewise",
show: false,
dimension: 1,
seriesIndex: 1,
pieces: [
{
gt: 4,
lt: 5,
color: "#FFD6D4",
},
],
},
series: [
{
name: "",
data: list.map((i) => i.total).reverse(),
type: "bar",
barWidth: "50%",
color: "#0072ED",
zlevel: 2,
},
{
name: "line",
type: "line",
areaStyle: {
// color: '#D6F1FF'
},
lineStyle: {
color: "#E2F0FF",
},
data: list.map((i) => i.total).reverse(),
zlevel: 1,
symbol: "none",
markLine: {
silent: true,
data: [
[
{
lineStyle: { color: "#1890FF", type: "dashed", width: 2 },
x: "10%",
y: "22%",
},
{
label: {
color: "#1890FF",
padding: [0, 15, 0, 0], // 重点在这里,这个地方就是定位
position: "insideEndTop",
formatter: `${list[1].name + " " + list[1].total}`, // 默认第二个
},
lineStyle: { color: "#1890FF", type: "dashed", width: 2 },
x: "98%",
y: "22%",
},
],
],
},
},
],
};
// 折线图 点击事件
option && myChart.setOption(option);
};
3.初始化柱状图点击事件BarClick
使用实例化的myChart 和 getZr方法 作用于line上面来调用defaultClick事件
// 初始化柱状图点击事件
const BarClick = () => {
// 折线图 点击事件
myChart.getZr().on("click", "series.line", (params) => {
defaultClick(params, option, myChart, visualMapPieces, list.value);
console.log(params, "params");
barChangeList();
});
};
4.defaultClick事件
用于重绘区域颜色和线上数据,改变bie的数据,根据Y轴的值 预估区间,来获取对应的数组的index。
注意:这里面是估算,不是精确数据。
// 点击事件重置柱状图的颜色区域
function defaultClick(
params: { target: any; offsetY: number; offsetX: any },
option: echarts.EChartsOption,
myChart: {
setOption: (arg0: {
visualMap: {
type: string;
show: boolean;
dimension: number;
seriesIndex: number;
pieces: any;
};
series: any;
}) => void;
},
visualMapPieces: any[],
list: Ref<{ name: string; total: string }[]> | { total: any }[]
) {
// 折线图 点击事件
console.log(params, "params");
if (!params.target) {
return;
}
let areaIndex = 0; // 值域:[0, 4]的正整数
// 根据Y轴的值 预估区间
if (params.offsetY >= 78 && params.offsetY < 125) {
areaIndex = 4;
} else if (params.offsetY >= 125 && params.offsetY < 148) {
areaIndex = 3;
} else if (params.offsetY >= 148 && params.offsetY < 197) {
areaIndex = 2;
} else if (params.offsetY >= 197 && params.offsetY < 270) {
areaIndex = 1;
} else if (params.offsetY >= 270 && params.offsetY < 296) {
areaIndex = 0;
} else {
areaIndex = null;
}
if (areaIndex === null) return; // 控制第四个区域不能点击
myChart.setOption({
visualMap: {
type: "piecewise",
show: false,
dimension: 1,
seriesIndex: 1,
pieces: visualMapPieces.map((item, index) => {
// 根据点击区域,修改折线图区域的颜色
return index === areaIndex
? {
agt: index,
lt: index + 1,
color: "#FFD6D4",
}
: { ...item };
}),
},
series: option.series.map((item, index) => {
// 根据点击区域 画指示线
return item.name === "line"
? {
...item,
markLine: {
silent: true,
lineStyle: {
type: "dashed",
#### 总结
* 对于框架原理只能说个大概,真的深入某一部分具体的代码和实现方式就只能写出一个框架,许多细节注意不到。
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
* 算法方面还是很薄弱,好在面试官都很和蔼可亲,擅长发现人的美哈哈哈...(最好多刷一刷,不然影响你的工资和成功率????)
* 在投递简历之前,最好通过各种渠道找到公司内部的人,先提前了解业务,也可以帮助后期优秀 offer 的决策。
* 要勇于说不,对于某些 offer 待遇不满意、业务不喜欢,应该相信自己,不要因为当下没有更好的 offer 而投降,一份工作短则一年长则 N 年,为了幸福生活要慎重选择!!!
![](https://img-blog.csdnimg.cn/img_convert/41a409bca685b4ea0e0aa1a5589c3e09.png)
第一次跳槽十分忐忑不安,和没毕业的时候开始找工作是一样的感受,真的要相信自己,有条不紊的进行。**如果有我能帮忙的地方欢迎随时找我,比如简历修改、内推、最起码,可以把烦心事说一说**,人嘛都会有苦恼的~
祝大家都有美好的未来,拿下满意的 offer。
* 要勇于说不,对于某些 offer 待遇不满意、业务不喜欢,应该相信自己,不要因为当下没有更好的 offer 而投降,一份工作短则一年长则 N 年,为了幸福生活要慎重选择!!!
![](https://img-blog.csdnimg.cn/img_convert/41a409bca685b4ea0e0aa1a5589c3e09.png)
第一次跳槽十分忐忑不安,和没毕业的时候开始找工作是一样的感受,真的要相信自己,有条不紊的进行。**如果有我能帮忙的地方欢迎随时找我,比如简历修改、内推、最起码,可以把烦心事说一说**,人嘛都会有苦恼的~
祝大家都有美好的未来,拿下满意的 offer。