需求梳理
功能点:
- 实现当前数据与预测数据对比
- 实现y轴最小值动态赋值
- 解决数据刷新重新绘制
- tooltip自定义
- 预测数据如何设置
- 实现容器自适应
代码实现
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;">';
//为了保证和原来的效果一样，这里自己实现了一个点的效果
htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
//圆点后面显示的文本
if(xName == "预估"){
htmlStr += '预估'+seriesName + '：' + value;
}else{
htmlStr += seriesName + '：' + value;
}
htmlStr += '</div>';
valMap[seriesName] = value;
}
console.log(htmlStr)
return htmlStr;
}
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},
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: '联盟广告',
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: '联盟广告',
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) // 图标数据初始化
this.linesOptionChart.setOption(linesOption,true)// true表示页面数据变更 页面重新绘制
html实现
<div style="height:400px" ref="linesOptionChart"></div>
自适应实现
data(){
return {
linesOptionChart:null
}
},
mouned(){
window.addEventListener("resize", () => {
// 如果有多个echarts，就在这里执行多个echarts实例的resize方法,不过一般要做组件化开发，即一个.vue文件只会放置一个echarts实例
this.linesOptionChart.resize()
});
},
methods(){
this.linesOptionChart= .....// 此处接文章顶部js处理代码 调用接口赋值
},
beforeDestroy() {
/* 页面组件销毁的时候，别忘了移除绑定的监听resize事件，否则的话，多渲染几次
容易导致内存泄漏和额外CPU或GPU占用哦*/
window.removeEventListener("resize", () => {\
this.linesOptionChart.resize()
});
},
效果
效果图
实现y轴最小值动态赋值
实现思路:
循环遍历 series数组中的data 使用Math.min(...data) 放入预先定义的数组list中 最终获取list中的最小值 即为所有折线数据中的最小值
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)
},
网友评论