持续记录
用途:整理自己的一坨代码,从而提升写代码的思路与能力
开始时间:24-04-17
目录
(1)template部分:给echarts图提供渲染的容器
(1)图的位置 + 图例的位置 + emphasis高亮区域的标签样式
1,echarts图的响应式实现
(1)template部分:给echarts图提供渲染的容器
<div class="chart-body" ref="chartContainer"></div>
(2)script部分:功能的实现
import { onMounted, onUnmounted, ref } from 'vue'
import * as echarts from 'echarts'
const chartContainer = ref<HTMLDivElement | null>(null)
let myChart: echarts.ECharts | null = null
var option: echarts.EChartsOption
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
}
// 初始化
const initChart = () => {
if (chartContainer.value) {
myChart = echarts.init(chartContainer.value)
myChart.setOption(option)
}
}
// 窗口大小变化响应函数
const handleResize = () => {
if (myChart) {
myChart.resize()
}
}
onMounted(() => {
initChart()
window.addEventListener('resize', handleResize)
})
// 销毁
onUnmounted(() => {
if (myChart) {
myChart.dispose()
}
window.removeEventListener('resize', handleResize)
})
(3)css部分 :(我的盒子大小是确定的)
.chart-body{
width:480px;
height:560px;
}
在 Vue 3 组件的生命周期中,将事件监听放在
onMounted
钩子中是一种最佳实践;
onMounted
钩子在组件的模板被渲染成真实 DOM 后触发。这意味着在onMounted
中添加事件监听器可以确保所有的 DOM 元素都已经被正确渲染和初始化,特别是当你需要引用这些 DOM 元素,例如初始化 ECharts 图表时;在
onMounted
中添加的事件监听器应该在组件销毁时被移除,这通常在onUnmounted
生命周期钩子中进行。这样的设置创建了一个清晰的生命周期管理模式,即在组件完全可用时设置资源,在组件即将销毁时清理资源,从而有效防止内存泄漏;
2,使图表居住显示
效果图
实现方式:同理为设置盒子居住,该盒子是- 渲染图表的盒子
<template>
<div class="echarts-container">
<div id="main" class="table-one"></div>
</div>
</template>
<style scoped>
.echarts-container {
display: flex;
justify-content: center;
align-items: center;
}
</style>
3,echarts配置项使用
3.1柱形图
(1)坐标轴显示 与 数据项颜色
原本样例图
效果
配置项
option = {
xAxis: {
...
show:false
},
yAxis: {
type: 'value'
},
series: [
{
...
type: 'bar',
itemStyle:{
color:'red'
}
}
]
};
完整代码
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
show:false
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
itemStyle:{
color:'red'
}
}
]
};
3.2桑基图
(1)颜色与起始点颜色一致
原本样例图
效果:
配置项
option = {
series: {
type: 'sankey',
layout: 'none',
emphasis: {
focus: 'adjacency'
},
data: [
{
name: 'a',
itemStyle:{
color:'red'
}
},
{
name: 'b',
itemStyle:{
color:'#0EE0FF'
}
},
...
],
links: [
{
source: 'a',
target: 'a1',
value: 5,
lineStyle:{
color:'source'
}
},
{
...
lineStyle:{
color:'source'
}
},
{
...
lineStyle:{
color:'source'
}
},
{
...
lineStyle:{
color:'source'
}
},
{
...
lineStyle:{
color:'source',
opacity:0.8
}
},
{
...
lineStyle:{
color:'source',
opacity:0.8
}
}
]
}
};
完整代码
option = {
series: {
type: 'sankey',
layout: 'none',
emphasis: {
focus: 'adjacency'
},
data: [
{
name: 'a',
itemStyle:{
color:'red'
}
},
{
name: 'b',
itemStyle:{
color:'#0EE0FF'
}
},
{
name: 'a1'
},
{
name: 'a2'
},
{
name: 'b1'
},
{
name: 'c'
}
],
links: [
{
source: 'a',
target: 'a1',
value: 5,
lineStyle:{
color:'source'
}
},
{
source: 'a',
target: 'a2',
value: 3,
lineStyle:{
color:'source'
}
},
{
source: 'b',
target: 'b1',
value: 8,
lineStyle:{
color:'source'
}
},
{
source: 'a',
target: 'b1',
value: 3,
lineStyle:{
color:'source'
}
},
{
source: 'b1',
target: 'a1',
value: 1,
lineStyle:{
color:'source',
opacity:0.8
}
},
{
source: 'b1',
target: 'c',
value: 2,
lineStyle:{
color:'source',
opacity:0.8
}
}
]
}
};
(2)nodes属性id和name的使用
使用nodes属性中的id ,id来作为连接点的标识,name为显示的文本内容。
代码待补充
3.3折线图
(1)不标记点 + 阴影显示
原本样例图
效果
配置项
option = {
xAxis: {
...
},
yAxis: {
...
},
series: [
{
...
type: 'line',
smooth: true,
// 阴影面积
areaStyle:{
opacity: 0.5
},
// 不标记点
showSymbol:false,
// 曲线宽度
lineStyle:{
width:2
},
}
]
};
完整代码
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',
smooth: true,
// 阴影面积
areaStyle:{
opacity: 0.5
},
// 不标记点
showSymbol:false,
// 曲线宽度
lineStyle:{
width:2
},
}
]
};
(2)堆叠+数据窗口
原本样例图
效果图-slider类型
配置项-slider为例
option = {
...
grid: {
...
bottom:'20%',
...
},
...
dataZoom: {
type:'slider',
start:0,
end:40
}
...
};
完成代码-silder
option = {
title: {
text: 'Stacked Line'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom:'20%',//给下面的数据窗口留下足够的空间
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
},
yAxis: {
type: 'value'
},
dataZoom:[
{
type:'slider',
start:0,
end:40
}
],
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290]
}
]
};
效果-inside
完整代码-inside
option = {
title: {
text: 'Stacked Line'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom:'20%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
},
yAxis: {
type: 'value'
},
dataZoom: {
type: 'inside',
start:0,
end:60,
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290]
}
]
};
3.4,饼图
(1)图的位置 + 图例的位置 + emphasis高亮区域的标签样式
效果图
1)图的位置控制代码
series: [
{
...
...
center:['30%','50%'],
]
2)图例的位置+图例文本渲染formatter
legend:{
orient:'vertical',
itemGap:20,
right:'10%',
top:'40%',
icon:'circle',
formatter:(name)=>{
let total =0;
let target;
for(let i = 0;i<data.length;i++){
total += data[i].value;
if(data[i].name === name){
target = data[i].value;
}
}
let v = ((target/total)*100)
return name + ` ${v}%`;
}
},
3)emphasis高亮区域的标签样式 formatter + rich富文本样式
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontWeight: 'bold',
formatter: '{active|{d}%}' + '\n\r' + '{total| {b} }',
rich: {
total: {
fontSize: 15,
color: '#454c5c',
},
active: {
fontSize: 28,
color: '#000000',
lineHeight: 50,
fontWeight: 'bold',
},
},
},
},
(2)tooltip样式
效果图
代码
tooltip:{
trigger:'item',
formatter:'{a} <br/> {b} : {c} ({d}%)'
},
完整代码
data= [
{ value: 20, name: 'Search Engine' },
{ value: 20, name: 'Direct' },
{ value: 20, name: 'Email' },
{ value: 40, name: 'Union Ads' },
]
option = {
color: ['#FC0606', '#FF8228', "#baf", '#67C23A'],
itemStyle: {
borderColor: '#fff',
borderWidth: 1,
},
tooltip:{
trigger:'item',
formatter:'{a} <br/> {b} : {c} ({d}%)'
},
legend:{
orient:'vertical',
itemGap:20,
right:'10%',
top:'40%',
icon:'circle',
formatter:(name)=>{
let total =0;
let target;
for(let i = 0;i<data.length;i++){
total += data[i].value;
if(data[i].name === name){
target = data[i].value;
}
}
let v = ((target/total)*100)
return name + ` ${v}%`;
}
},
series: [
{
name: '状态统计',
type: 'pie',
radius: ['55%', '70%'],
center:['30%','50%'],
avoidLabelOverlap: false,
padAngle: 1,
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontWeight: 'bold',
formatter: '{active|{d}%}' + '\n\r' + '{total| {b} }',
rich: {
total: {
fontSize: 15,
color: '#454c5c',
},
active: {
fontSize: 28,
color: '#000000',
lineHeight: 50,
fontWeight: 'bold',
},
},
},
},
data
},
],
}
(3)标题与副标题
效果图
代码
title:[
{
text:' 标题 \n 100',
top:'48%',
left:'45%',
x:'center',
y:'center',
},
{
subtext:'副标题',
top:'90%',
left:'45%',
x:'center',
y:'center'
}
],
即将开启笔记2
又是思考加苦恼的一天。
24-04-19
今日问题:怎样去评估自己是否有进步呢?
24-04-26