因工作需要, 需求是線段的顏色變化,然後在網上找了很多實例, 文檔中也看了很多的配置屬性, 都沒有找到可以滿足自己要求的 ( 一般實例都是整體的一條線, 並沒有配置兩點之間來設置線的屬性 ), 所以只能自己搗鼓了
但是有個需求依然沒有滿足, 就是在淺色部分需要線變細, 達到變細變淺的效果, 希望知道的大佬可以告訴我怎麼做, 謝謝啦
這邊各自配置發揮了什麼作用我會大致說明一下, 不對的也請各位大佬糾正
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
</head>
<body style="height: 100vh; background-color: #34495e">
<div id="myChart" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
const eCharts = echarts.init(document.getElementById('myChart'))
let data = [80, 132, 60, 234, 190, 330, 200, 450]
// 因爲需要配置每兩個點之間的線的樣式, 所以要把一個線拆分, 拆分數量根據數據長度決定
// 最終做出colorStops的數組
// 大致是需要這樣的的數據
// [{offset: 0, color: '#3f3'},
// {offset: .2, color: 'rgba(255,255,255,0)'},
// {offset: .4, color: '#3f3'},
// {offset: .6, color: 'rgba(255,255,255,0)'},
// {offset: .8, color: '#3f3'},
// {offset: 1, color: 'rgba(255,255,255,0)'},]
// offset表示折線圖的某個比例的部分, 比如 .2 就表示在整個折線 20%的位置, 所以我們要算出每個點在折線上的位置
let length = data.length - 1 // 爲什麼是 -1, 因爲2個點是用1條線, 3個點是用兩條線,以此類推
let r = 1 / length // 算出比例
let colorStopArr = data.map((item, index) => { // 算出數據
if(index % 2 === 0) {
return {offset: index * r, color: '#3f3'}
} else {
return {offset: index * r, color: 'rgba(255,255,255,0)'}
}
})
let option = {
tooltip: {
trigger: 'axis', // 指示器顯示規則, axis爲根據座標, item爲根據折線點具體位置
axisPointer: { // 指示器配置
type: 'line',
label: {
show: true,
backgroundColor: '#333',
color: '#9ff'
}
}
},
title: { // 標題的配置
text: '標題',
textStyle: { // 標題的樣式
fontWeight: 'normal',
fontSize: 16,
color: '#fff'
}
},
grid: { // 圖表佈局
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true // 用於防止圖表溢出, 具體可以改爲false查看效果
},
toolbox: {
// feature: {
// saveAsImage: {} // 這裏可以配置保存圖片的按鈕
// }
},
xAxis: { // X軸配置
type: 'category',
boundaryGap: true, // true表示刻度作爲分割線, false則反之
data: ['週一','週二','週三','週四','週五','週六','週日', "週一"],
axisLine: { // 座標軸的配置
symbol: ['none', 'arrow'], // 顯示箭頭, 接受一個數組兩個成員, 左右箭頭
symbolOffset: [0 , 12], // 同理, 箭頭位置, 值越大則向x軸偏移位置越大
lineStyle: {
width: 4,
color: '#9f9'
}
},
axisTick: {
show: false
},
splitArea: { // 座標軸在grid(圖表)區域中的分隔區域
show: true, // 默認不顯示
interval: 0, // 默認爲0, 1則表示隔一個標籤顯示一個標籤, 以此類推
areaStyle: {
color: ['#57606f', '#2c3e50'], // 可以接受數組, 表示分隔的顏色按照數組中交替
}
}
},
yAxis: { // Y軸配置
splitLine: {show: false}, // 座標軸在圖表上的分割線
type: 'value',
axisLine: { // 同理X軸的配置
symbol: ['none', 'arrow'],
symbolOffset: [0 , 12],
lineStyle: {
width: 4,
color: '#9f9'
}
},
axisTick: {
show: false
},
},
series: [
{
name:'折線圖',
type:'line', // 圖表類型, type設置爲折線圖
data: data, // 數據
symbol: 'circle', // 折點的形狀
symbolSize: 25, // 折點的大小
lineStyle: { // 折線的樣式配置
width: 7,
color: {
type: 'linear',
x: 0,
x2: 1,
colorStops: colorStopArr, // 配置折線樣式, 把之前計算好的數據代入
}
},
itemStyle: { // 配置折點的樣式, 這裏是配置了一個空心圓, 配合scatter圖表一起就形成了效果
normal: {
color: 'rgba(0, 0, 0, 0)',
borderColor: "#9f9",
borderWidth: 2,
borderRadius: 25,
shadowColor: 'rgba(0, 0, 0, .6)', // 陰影顏色
shadowBlur: 0, // 陰影模糊度
shadowOffsetY: 2, // 陰影在Y軸上的偏移
shadowOffsetX: 2, // X軸的偏移
}
},
},
{
type: 'scatter',
symbolSize: 5,
itemStyle: {
color: '#9f9'
},
// silent: true, // 不響應鼠標事件
data: data
}
]
};
eCharts.setOption(option);
</script>
</body>
</html>