前言
近段时间又做了些相关图表，更熟悉了对echarts学习，针对折线图进行一个书写
需求图
实现
- 技术 vue3.0+ts+echarts
- 代码
<template>
<div
style="position: absolute;
left: 16px;
top: 19.5px;
font-weight: 500;
font-size: 18px;
line-height: 25px;
color: #181818;"
>
资产/风险趋势图
</div>
<div id="riskLinkcontainer" />
</template>
<style scoped>
#riskLinkcontainer {
width: 100%;
margin-top: 28px;
height: calc(100% - 45px);
justify-content: center;
position: relative;
}
</style>
基础代码+结构:
1、我们在renderMap(data)中对折线图进行配置
// data中是我们获取的资产和风险时间和总数
2、主要配置在legend、tooltip、grid、xAxis: {}、yAxis: {},series
<script setup lang="ts">
import { ref, onUnmounted, markRaw } from 'vue';
import { ECharts } from 'echarts';
const scatterChart = ref<ECharts | null>(null);
onUnmounted(() => {
scatterChart.value?.dispose();
});
const initContainer = async (data:any) => {
// console.log('data', data)
const echarts = await import('echarts');
scatterChart.value = markRaw(echarts.init((document as any).getElementById('riskLinkcontainer')));
renderMap(data)
};
const renderMap = (data:any) => {
const option = {
legend: {},
tooltip: {},
grid: {},
xAxis: {},
yAxis: {},
series: [
{
name: '风险',
data: data.risk_trend.map((item:any) => item.value),
type: 'line',
},
{
name: '资产',
data: data.assets_trend.map((item:any) => item.value),
type: 'line',
},
],
};
scatterChart.value?.setOption(option as any, true);
};
defineExpose({
initContainer,
});
</script>
- 配置项- legend
1、 legend、图例组件配置、如图所示
legend: {
data: [{
name: '风险',
itemStyle: { color: 'rgba(40, 120, 255, 1)' },
icon: 'roundRect',
}, {
name: '资产',
itemStyle: { color: 'rgba(255, 90, 90, 1)' },
icon: 'roundRect',
}],
bottom: 0,
},
分析：
1、 name需要和下面series中每一项中的name进行匹配
2、itemStyle用于调整按钮的样式，比如颜色
3、icon用于按钮的形状
4、可以设置bottom、top、left、right设定位置
-
配置项- tooltip 自定义提示组件
1、鼠标移上去显示的提示组件，如下图所示， 2、echarts默认的提示不适合我们使用，这里我们需要使用自定义formatter设定我们需要显示的弹窗 3、注意需要把padding设置为0
tooltip: {
padding: 0,
trigger: 'axis',
axisPointer: {
type: 'cross',
},
formatter(params:any) {
let tipHtml = '';
tipHtml = `${'<div style="box-sizing: border-box;box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.08), 0px 0px 12px rgba(0, 0, 0, 0.08);border-radius: 4px;width:140px;background: linear-gradient(180deg, rgba(40, 120, 255, 0.16) 0%, rgba(40, 120, 255, 0) 100%);font-size: 9px;padding:1px 8px;">'
+ '<div style="width:86%;height:30px;line-height:30px;">'
+ '<span style="color:#181818;font-size:12px;">'}${params[0]?.axisValue}</span>`
+ '</div>'
+ '<div style="width: 124px;background: rgba(255, 255, 255, 0.8);margin:6px 0;padding:6px">'
+ '<p style="color:#666666;font-size:12px;">'
+ `<span style="width: 6px;height: 6px;display:inline-block;vertical-align: middle;border-radius: 6px; background:${params[0]?.color};margin:0 3px;"></span>`
+ `${params[0]?.seriesName}`
+ `<span style="color:#11ee7d;margin:0 6px;">${params[0]?.value}</span>`
+ '</p>'
+ `<p style="color:#666666;font-size:12px; display:${params[1] ? 'block' : 'none'}">`
+ `<span style="width: 6px;height: 6px;display:inline-block;vertical-align: middle;border-radius: 6px; background:${params[1]?.color};margin:0 3px;"></span>`
+ `${params[1]?.seriesName}`
+ `<span style="color:#f48225;margin:0 6px;">${params[1]?.value}</span>`
+ '</p>'
+ '</div>'
return tipHtml;
},
},
注释：
1、padding:0;去除tooltip默认格式影响
2、trigger:
触发方式：
item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
axis：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
3、axisPointer 坐标轴指示器配置项。type:cross;十字准星指示器。
4、formatter(params)提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
params是我们的数据集，每一项的颜色、名称、数据等
-
配置项- grid 坐标轴
grid: { left: '3%', right: '4%', bottom: '10%', containLabel: true, }, -
配置项- x y 坐标轴
xAxis: {
type: 'category',
show: false,
axisTick: { show: false },
data: data.assets_trend.map((item:any) => item.date),
axisPointer: {
show: true,
type: 'line',
lineStyle: {
color: 'rgba(19, 98, 208, 1)',
with: 1,
opacity: 1,
},
},
},
yAxis: {
type: 'value',
show: true,
axisLine: {
show: false,
},
},
注释：
1、type;坐标轴类型
2、show:是否显示坐标轴
3、坐标刻度配置axisTick: { show: false },不显示坐标刻度
4、axisPointer坐标轴指示器 ：提示线
- 配置项- series
1、配置数据
2、折线面积颜色 渐变颜色。areaStyle
3、lineStyle线的颜色
4、itemStyle可以设置折线拐点标志的样式
5、symbol拐点的形状设置
6、symbolSize拐点的大小
series: [
{
name: '风险',
data: data.risk_trend.map((item:any) => item.value),
type: 'line',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 0, color: 'rgba(40, 120, 255, 0.1)', // 0% 处的颜色
}, {
offset: 1, color: 'rgba(40, 120, 255, 0.16)', // 100% 处的颜色
}],
global: false, // 缺省为 false
},
},
lineStyle: {
color: '#2878FF',
width: 1,
},
itemStyle: {
color: '#2878FF',
},
symbol: 'roundRect',
symbolSize: 3,
},
{
name: '资产',
data: data.assets_trend.map((item:any) => item.value),
type: 'line',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 0, color: 'rgba(255, 90, 90, 0.1)', // 0% 处的颜色
}, {
offset: 1, color: 'rgba(255, 90, 90, 0.16)', // 100% 处的颜色
}],
global: false, // 缺省为 false
},
},
lineStyle: {
color: '#FF5A5A',
width: 1,
},
itemStyle: { // 线段转折点的样式
color: '#FF5A5A',
},
symbol: 'roundRect',
symbolSize: 3,
},
],
const renderMap = (data:any) => {
const option = {
series: [
{
name: '风险',
data: data.risk_trend.map((item:any) => item.value),
type: 'line',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 0, color: 'rgba(40, 120, 255, 0.1)', // 0% 处的颜色
}, {
offset: 1, color: 'rgba(40, 120, 255, 0.16)', // 100% 处的颜色
}],
global: false, // 缺省为 false
},
},
lineStyle: {
color: '#2878FF',
width: 1,
},
itemStyle: {
color: '#2878FF',
},
symbol: 'roundRect',
symbolSize: 3,
},
{
name: '资产',
data: data.assets_trend.map((item:any) => item.value),
type: 'line',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 0, color: 'rgba(255, 90, 90, 0.1)', // 0% 处的颜色
}, {
offset: 1, color: 'rgba(255, 90, 90, 0.16)', // 100% 处的颜色
}],
global: false, // 缺省为 false
},
},
lineStyle: {
color: '#FF5A5A',
width: 1,
},
itemStyle: { // 线段转折点的样式
color: '#FF5A5A',
},
symbol: 'roundRect',
symbolSize: 3,
},
],
};
scatterChart.value?.setOption(option as any, true);
};
全部代码
<template>
<div
style="position: absolute;
left: 16px;
top: 19.5px;
font-weight: 500;
font-size: 18px;
line-height: 25px;
color: #181818;"
>
资产/风险趋势图
</div>
<div id="riskLinkcontainer" />
</template>
<script setup lang="ts">
import { ref, onUnmounted, markRaw } from 'vue';
import { ECharts } from 'echarts';
const scatterChart = ref<ECharts | null>(null);
onUnmounted(() => {
scatterChart.value?.dispose();
});
const initContainer = async (data:any) => {
// console.log('data', data)
const echarts = await import('echarts');
scatterChart.value = markRaw(echarts.init((document as any).getElementById('riskLinkcontainer')));
renderMap(data)
};
const renderMap = (data:any) => {
const option = {
legend: {
data: [{
name: '风险',
itemStyle: { color: 'rgba(40, 120, 255, 1)' },
// icon: 'roundRect',
}, {
name: '资产',
itemStyle: { color: 'rgba(255, 90, 90, 1)' },
// icon: 'roundRect',
}],
bottom: 0,
},
tooltip: {
padding: 0,
trigger: 'axis',
axisPointer: {
type: 'cross',
},
lineStyle: {
type: 'dotted',
},
formatter(params:any) {
let tipHtml = '';
tipHtml = `${'<div style="box-sizing: border-box;box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.08), 0px 0px 12px rgba(0, 0, 0, 0.08);border-radius: 4px;width:140px;background: rgba(255, 255, 255, 0.6);font-size: 9px;padding:1px 8px;">'
+ '<div style="width:86%;height:30px;line-height:30px;">'
+ '<span style="color:#181818;font-size:12px;">'}${params[0]?.axisValue}</span>`
+ '</div>'
+ '<div style="width: 124px;background: rgba(255, 255, 255, 0.8);margin:6px 0;padding:6px">'
+ '<p style="color:#666666;font-size:12px;">'
+ `<span style="width: 6px;height: 6px;display:inline-block;vertical-align: middle;border-radius: 6px; background:${params[0]?.color};margin:0 3px;"></span>`
+ `${params[0]?.seriesName}`
+ `<span style="color:#000;margin:0 6px;float: right;">${params[0]?.value}</span>`
+ '</p>'
+ `<p style="color:#666666;font-size:12px; display:${params[1] ? 'block' : 'none'}">`
+ `<span style="width: 6px;height: 6px;display:inline-block;vertical-align: middle;border-radius: 6px; background:${params[1]?.color};margin:0 3px;"></span>`
+ `${params[1]?.seriesName}`
+ `<span style="color:#000;margin:0 6px;float: right;">${params[1]?.value}</span>`
+ '</p>'
+ '</div>'
return tipHtml;
},
// show: true,
// showContent: true,
},
grid: {
left: '3%',
right: '4%',
bottom: '10%',
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: true,
show: false,
axisTick: { show: false },
data: data.assets_trend.map((item:any) => item.date),
axisPointer: {
show: true,
type: 'line',
lineStyle: {
color: 'rgba(19, 98, 208, 1)',
with: 1,
opacity: 1,
},
},
},
yAxis: {
type: 'value',
show: true,
axisLine: {
show: false,
},
},
series: [
{
name: '风险',
data: data.risk_trend.map((item:any) => item.value),
type: 'line',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 0, color: 'rgba(40, 120, 255, 0.1)', // 0% 处的颜色
}, {
offset: 1, color: 'rgba(40, 120, 255, 0.16)', // 100% 处的颜色
}],
global: false, // 缺省为 false
},
},
lineStyle: {
color: '#2878FF',
width: 1,
},
itemStyle: {
color: '#2878FF',
},
symbol: 'emptyCircle',
symbolSize: 3,
},
{
name: '资产',
data: data.assets_trend.map((item:any) => item.value),
type: 'line',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 0, color: 'rgba(255, 90, 90, 0.1)', // 0% 处的颜色
}, {
offset: 1, color: 'rgba(255, 90, 90, 0.16)', // 100% 处的颜色
}],
global: false, // 缺省为 false
},
},
lineStyle: {
color: '#FF5A5A',
width: 1,
},
itemStyle: { // 线段转折点的样式
color: '#FF5A5A',
},
symbol: 'emptyCircle',
symbolSize: 3,
},
],
};
scatterChart.value?.setOption(option as any, true);
};
// initContainer()
defineExpose({
initContainer,
});
</script>
<style scoped>
#riskLinkcontainer {
width: 100%;
margin-top: 28px;
height: calc(100% - 45px);
justify-content: center;
position: relative;
}
</style>
4552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
