分享一個公司項目案例
UI小姐姐給的圖是這樣的：
最終實現效果：
以下是所有代碼
源碼：https://gitee.com/DieHunter/myCode/tree/master/Echart/PictorialBar
首先引入Echarts，cdn或npm都行
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.myChartBox {
margin: 100px auto;
width: 450px;
height: 240px;
background: #000;
}
</style>
<script src="./data.js"></script>
<script src="./echarts.js"></script>
<script src="./myChart.js"></script>
</head>
<body>
<div id="myChartBox" class="myChartBox"></div>
<script>
let _myChart, _option, timer = 1.5,
timeTickId, colorList, chartConfig; //初始化變量，分別是初始化後的echart對象，echart配置信息，圖表刷新頻率，延時遞歸函數id，圖表漸變顏色列表了，列表聯動配置
let {
category,
lineData
} = filterData(bookList) //過濾後端數據，規範成x軸數組和y軸數組格式
let init = () => {
_myChart = echarts.init(myChartBox); //初始化chart
colorList = {
first: ["#F179C4", "#26AEFB", "#CDAD92", "#ED65BA", "#989FBB", "#E86A6A", "#6718CF"],
second: ["#E33AA3", "#056FAB", "#FFAA62", "#E33AA3", "#28B1FF", "#FFAA62", "#F47384"]
}
chartConfig = { //配置信息爲，chart中橫座標第一項索引，最後一項索引，規定列表長度
first: 0,
second: 7,
max: 20
}
createChart()
};
(() => {
init()
})()
</script>
</body>
</html>
data.js（暫存數據）
const bookList = [{
"typeName": "綜合圖書",
"bnum": 28264
}, {
"typeName": "文學",
"bnum": 14591
}, {
"typeName": "兒童文學",
"bnum": 10186
}, {
"typeName": "文化教育",
"bnum": 20477
}, {
"typeName": "語言文字",
"bnum": 17344
}, {
"typeName": "哲學",
"bnum": 16238
}, {
"typeName": "歷史地理",
"bnum": 15457
}, {
"typeName": "政治思想",
"bnum": 5793
}, {
"typeName": "生物科學",
"bnum": 4966
}, {
"typeName": "繪本",
"bnum": 4521
}, {
"typeName": "藝術",
"bnum": 4157
}, {
"typeName": "地球天文",
"bnum": 2545
}, {
"typeName": "軍事",
"bnum": 2368
}, {
"typeName": "自然科學",
"bnum": 2358
}, {
"typeName": "工業技術",
"bnum": 1830
}, {
"typeName": "社會科學",
"bnum": 1689
}, {
"typeName": "數理化",
"bnum": 1394
}, {
"typeName": "政治法律",
"bnum": 1303
}, {
"typeName": "少年百科",
"bnum": 1201
}, {
"typeName": "經濟",
"bnum": 923
}, {
"typeName": "童話故事",
"bnum": 840
}, {
"typeName": "環境安全",
"bnum": 615
}, {
"typeName": "醫藥衛生",
"bnum": 518
}, {
"typeName": "航空航天",
"bnum": 457
}, {
"typeName": "農業科學",
"bnum": 347
}, {
"typeName": "家庭教育",
"bnum": 211
}, {
"typeName": "交通運輸",
"bnum": 188
}]
myChart.js
let createChart = () => {
_option = {
grid: [{ //設置邊距
left: 55,
bottom: 53,
top: 20,
right: 10
}],
yAxis: { //Y軸配置
show: true,
axisLine: {
show: false,
lineStyle: { //隱藏Y軸
opacity: 0
}
},
axisTick: { //隱藏刻度
show: false,
},
splitLine: { //隱藏刻度
show: false,
},
axisLabel: { //Y軸文字
color: '#fff',
fontSize: 12
},
},
xAxis: { //X軸配置
data: category, //X軸數據
show: true,
axisLabel: { //X軸文字樣式
color: '#a9aabc',
fontSize: 12,
interval: 0,
padding: [10, 0, 0, 0]
},
axisLine: {
show: false
},
axisTick: {
show: false,
}
},
series: [{
name: '',
type: 'pictorialBar', //設置類型爲象形柱狀圖
symbol: 'roundRect', //圖形類型，帶圓角的矩形
barWidth: '11%', //柱圖寬度
barMaxWidth: '20%', //最大寬度
symbolMargin: '3', //圖形垂直間隔
animationDelay: (dataIndex, params) => { //每個圖形動畫持續時間
return params.index * 50;
},
itemStyle: {
normal: {
color: params => { //圖形漸變顏色方法，四個數字分別代表，右，下，左，上，offset表示0%到100%
return new echarts.graphic.LinearGradient(
1, 1, 0, 0, [{
offset: 0,
color: colorList.first[params.dataIndex]
},
{
offset: 1,
color: colorList.second[params.dataIndex]
}
])
}
}
},
z: 1,
symbolRepeat: true, //圖形是否重複
symbolSize: [25, 6], //圖形元素的尺寸
data: lineData, //Y軸數據
animationEasing: 'elasticOut' //動畫效果
}]
}
timeTick()
}
let disposeChart = () => { //銷燬chart
_myChart.dispose()
_myChart = null
}
let setOption = () => { //重置數據
_option.xAxis.data = category.slice(chartConfig.first, chartConfig.second)
_option.series[0].data = lineData.slice(chartConfig.first, chartConfig.second)
_myChart.setOption(_option, true)
}
let timeTick = () => { //定時器,最好用延時加遞歸，如果用setInterval，容易造成堵塞
if (timeTickId) {
clearTimeout(timeTickId)
timeTickId = 0
}
autoChangeData()
timeTickId = setTimeout(timeTick, 1000 * timer || 5000)
}
let autoChangeData = () => { //偏移數組，切換數據
if (!chartConfig.max) {
return
}
if (chartConfig.second >= chartConfig.max) {
chartConfig.second = chartConfig.second - chartConfig.first
chartConfig.first = 0
} else {
chartConfig.first++
chartConfig.second++
}
setOption()
}
let filterData = (data, category = [], lineData = []) => { //過濾後端數據，分別變成X軸數組和Y軸數組
data.forEach(item => {
item.typeName = item.typeName.length > 2 ? item.typeName.substring(0, 2) : item.typeName
category.push(item.typeName || '')
lineData.push(item.bnum || 0)
})
return {
category,
lineData
}
}