需求梳理
功能點:
- 實現(xiàn)當(dāng)前數(shù)據(jù)與預(yù)測數(shù)據(jù)對比
- 實現(xiàn)y軸最小值動態(tài)賦值
- 解決數(shù)據(jù)刷新重新繪制
- tooltip自定義
- 預(yù)測數(shù)據(jù)如何設(shè)置
- 實現(xiàn)容器自適應(yīng)
代碼實現(xiàn)
js代碼
let linesOption = {
title: {
text: '折線圖堆疊'
},
tooltip: {
trigger: 'axis',
formatter: function (params, ticket, callback) { // tooltip自定義處理
var htmlStr = '';
var valMap = {};
for(var i=0;i<params.length;i++){
var param = params[i];
var xName = param.name;//x軸的名稱
var seriesName = param.seriesName;//圖例名稱
var value = param.value;//y軸值
var color = param.color;//圖例顏色
//過濾無效值
if(value == '-'){
continue;
}
//過濾重疊值
if(valMap[seriesName] == value){
continue;
}
if(i===0){
htmlStr += xName + '<br/>';//x軸的名稱
}
htmlStr +='<div style="text-align:left;">';
//為了保證和原來的效果一樣凛剥，這里自己實現(xiàn)了一個點的效果
htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
//圓點后面顯示的文本
if(xName == "預(yù)估"){
htmlStr += '預(yù)估'+seriesName + '：' + value;
}else{
htmlStr += seriesName + '：' + value;
}
htmlStr += '</div>';
valMap[seriesName] = value;
}
console.log(htmlStr)
return htmlStr;
}
},
legend: {
data: ['郵件營銷', '聯(lián)盟廣告', '視頻廣告', '直接訪問', '搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value',
min:Math.min(...list)
},
series: [
{
name: '郵件營銷',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210],
symbol:'circle',
symbolSize:8,
},
{
name: '聯(lián)盟廣告',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310],
symbol:'circle',
symbolSize:8,
},
{
name: '視頻廣告',
type: 'line',
data: [150, 232, 201, 154, 190, 330, 410],
symbol:'circle',
symbolSize:8,
},
{
name: '直接訪問',
type: 'line',
data: [320, 332, 301, 334, 390, 330, 320],
symbol:'circle',
symbolSize:8,
},
{
name: '搜索引擎',
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320],
symbol:'circle',
symbolSize:8,
},
{
name: '郵件營銷',
type: 'line',
data: ['-', '-', '-', '-', '-', '-', 210,350],
symbol:'circle',
symbolSize:8,
lineStyle:{
normal:{
type:'dotted'
}
}
},
{
name: '聯(lián)盟廣告',
type: 'line',
data: ['-', '-', '-', '-', '-', '-', 310,600],
symbol:'circle',
lineStyle:{
normal:{
type:'dotted'
}
}
},
{
name: '視頻廣告',
type: 'line',
data: ['-', '-', '-', '-', '-', '-', 410,100],
symbol:'circle',
symbolSize:8,
lineStyle:{
normal:{
type:'dotted'
}
}
},
{
name: '直接訪問',
type: 'line',
data: ['-', '-', '-', '-', '-', '-', 320,203],
symbol:'circle',
symbolSize:8,
lineStyle:{
normal:{
type:'dotted'
}
}
},
{
name: '搜索引擎',
type: 'line',
data: ['-', '-', '-', '-', '-', '-', 1320,450],
symbol:'circle',
symbolSize:8,
lineStyle:{
normal:{
type:'dotted'
}
}
}
]
};
this.linesOptionChart = this.$echarts.init(this.$refs.linesOptionChart) // 圖標(biāo)數(shù)據(jù)初始化
this.linesOptionChart.setOption(linesOption,true)// true表示頁面數(shù)據(jù)變更 頁面重新繪制
html實現(xiàn)
<div style="height:400px" ref="linesOptionChart"></div>
自適應(yīng)實現(xiàn)
data(){
return {
linesOptionChart:null
}
},
mouned(){
window.addEventListener("resize", () => {
// 如果有多個echarts风喇，就在這里執(zhí)行多個echarts實例的resize方法,不過一般要做組件化開發(fā)，即一個.vue文件只會放置一個echarts實例
this.linesOptionChart.resize()
});
},
methods(){
this.linesOptionChart= .....// 此處接文章頂部js處理代碼 調(diào)用接口賦值
},
beforeDestroy() {
/* 頁面組件銷毀的時候桐经，別忘了移除綁定的監(jiān)聽resize事件豌蟋，否則的話，多渲染幾次
容易導(dǎo)致內(nèi)存泄漏和額外CPU或GPU占用哦*/
window.removeEventListener("resize", () => {\
this.linesOptionChart.resize()
});
},
效果
效果圖
實現(xiàn)y軸最小值動態(tài)賦值
實現(xiàn)思路:
循環(huán)遍歷 series數(shù)組中的data 使用Math.min(...data) 放入預(yù)先定義的數(shù)組list中 最終獲取list中的最小值 即為所有折線數(shù)據(jù)中的最小值
let list =[]
series.map(item=>{
if(item.data.indexOf('-')>-1){
let dataList = []
item.data.find('-').length&&(item.data(val=>{
if(val==='-'){
dataList.push(0)
}else{
dataList.push(val)
}
}))
list.push(Math.min(...dataList))
}else{
list.push(Math.min(...item.data) )
}
})
.....
yAxis: {
type: 'value',
min:Math.min(...list)
},
