【组件模板】扩展折线图

收藏

显示效果：

PixPin_2024-02-04_15-01-28.gif15921629.png

实现步骤：
1.使用Echarts图表
image.png352457579.png

2.绑定数据

3.属性中调整自定义属性
image.png168192137.png

代码内容：

let color = ['0, 124, 250','0, 254, 210']
// 创建用于显示动画效果的系列数组
let news=[]
option.series.forEach ((s,i)=>{
let data1 = []
s.data.forEach((item,index) =>{
data1.push([option.xAxis.data[index].value,item.value])
})
let s1 =
{
"name": s.name,
"data": [{
"coords": data1,
}],
"type": "lines",
"coordinateSystem": "cartesian2d",
"zlevel": 1,
"polyline": true,
"smooth": true,
"symbol": "circle",
"effect":
{
"show": true,
"trailLength": 0.4,
"symbol": "circle",
"period": 8,
"symbolSize": 8
},
"lineStyle":
{
"normal":
{
"color": `rgba(${color[i]},1)`,
"width": 0,
"opacity": 0,
"curveness": 0
}
}
}
news.push(s1)
})
let datas = []
let cates = []
let maxNums = [];
let maxNum = 0;
option.series[0].data.forEach(item => {
if (maxNum < item.value) {
maxNum = item.value;
}
datas.push(item.value)
})
maxNum*=1.1
option.xAxis.data.forEach(item => {
cates.push(item.value)
maxNums.push(maxNum)
})
const _option = {
grid: {
top:option.grid.top,
left: option.grid.left,
right: option.grid.right,
bottom:option.grid.bottom+50,
containLabel: false,
},
xAxis: {
data: cates,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: option.xAxis.axisLabel.color,
fontFamily: option.xAxis.axisLabel.fontFamily,
fontSize: option.xAxis.axisLabel.fontSize,
fontStyle: option.xAxis.axisLabel.fontStyle,
fontWeight: option.xAxis.axisLabel.fontWeight,
textStyle: {
backgroundColor: '#013443',
padding: 10,
borderColor: 'rgba(0, 185, 211, .9)',
borderWidth: '1',
},
},
},
yAxis: {
show: false,
},
series: [
{
name: '柱图',
type: 'bar',
// barWidth: '10%',
data: maxNums,
tooltip: {
show: false,
},
barGap: '-50%',
itemStyle: {
normal: {
color: '#013f4b',
label: {
show: false, //开启显示
position: 'top', //在上方显示
textStyle: {
//数值样式
color: 'aqua',
fontSize: 15,
}
},
},
},
},
{
name: '外圈点',
type: 'line',
showAllSymbol: true,
symbol: 'circle',
symbolSize: 25,
lineStyle: {
normal: {
color: '#1766a7',
shadowColor: 'rgba(9, 64, 96, .9)',
shadowBlur: 0,
},
},
itemStyle: {
color: '#083b45',
borderColor: '#45c9b2',
borderWidth: 2,
shadowBlur: 0,
},
label: {
...option.series[0].label
},
tooltip: {
show: false,
},
data: datas,
},
{
name: '内部点',
type: 'line',
showAllSymbol: true,
symbol: 'circle',
symbolSize: 8,
lineStyle: {
normal: {
color: '#1766a7',
shadowColor: 'rgba(0, 0, 0, .3)',
shadowBlur: 0,
},
},
itemStyle: {
color: '#45c9b2',
borderWidth: 0,
shadowBlur: 0,
},
tooltip: {
show: false,
},
data: datas,
}
],
};
news.forEach(item => {
_option.series.push(item)
})
return _option;

复制代码

运行，浏览效果。
示例案例：

wyn-export-20240204150915.zip (399.05 KB, 下载次数: 24)

		自动登录	找回密码
密码			立即注册

[仪表板] 【组件模板】扩展折线图

0 个回复