echarts-特殊需求

时间 2021-01-22 标签 echart

1.echarts 两根柱状图，两个折现图实现折线点落在柱子上，

高保真图：

处理思路：利用X双轴，拆分两对柱折组合，数据X2，间隔显示

x轴1：每个数据前加一个“”

x轴2：每个数据后加一个“”

Y数据轴柱子：

柱子1：[数据， 0，数据， 0，... ，数据， 0]

折线1：[数据1， [(数据1+数据2)/2],数据2， [(数据2+数据3)/2] , ... , 数据n , '-']

柱子2：[ 0,数据， 0,数据， 0，...， 0，数据]

折线2：[ '-',数据0， [(数据1+数据2)/2],数据2， [(数据2+数据3)/2] , ... , 数据n ]

红色部分为辅助数据，柱状图0默认不会显示，折线图设置拐点不显示

处理过程：

<div id="demoId" style="height:400px; border: 1px solid #aaaaaa ;width:912px"></div>
<script type="text/javascript" src= "echarts/dist/echarts-all.js" ></script>
<script type="text/javascript">
var echartsHandler=echarts.init(document.getElementById("demoId"));
//图形框架
var options={
color:['#ff7f50','#87cefa','#da70d6','#32cd32'],
title : {
text:'柱-折混搭（点落于柱子上）',
x:'left',
padding:[20,0,0,30]
},
tooltip: {
show: false
},
grid:{
x2:20,
borderWidth:0
},
legend: {
x:'68%',
padding:[25,0,0,30],
data:['产量','销量','上月产量','上月销量']
},
xAxis : [
{
type : 'category',
data : [],
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
show: true,
interval: 'auto',
rotate: 10,
margin:10,
// formatter: null,
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#333'
}
},
axisTick: { // 坐标轴小标记
show: false // 属性show控制显示与否，默认不显示
},
splitLine: { // 分隔线
show:false
},

axisLine: { // 坐标轴线
show: false // 默认显示，属性show控制显示与否

}
},
{
type : 'category',
data : [],
show : false
}
],
yAxis : [
{
type : 'value',
splitNumber:10,
axisLine: { // 坐标轴线
show: false // 默认显示，属性show控制显示与否

}

}
],
series : [
{
"name":"产量",
"type":"bar",
"barWidth":15,
"xAxisIndex":1,
"clickable":false,
"data":[]
},
{
"name":"销量",
"type":"bar",
"barWidth":15,
"clickable":false,
"data":[]
},
{
"name":"上月产量",
"type":"line",smooth:false, // 取消平滑
"xAxisIndex":1,
"clickable":false,
"data":[]
},
{
"name":"上月销量",
"type":"line",
"xAxisIndex":0,
"clickable":false,
"data":[]
}
]
};
//数据装载
//虚构后台数据
var data={
"productname":"衬衫,羊毛衫,雪纺衫,裤子,高跟鞋,袜子,羊毛衫,雪纺衫,裤子,高跟鞋,袜子,衬衫 ",
"productnums":"5, 20, 40, 10, 10, 20, 8, 20, 10, 10, 8,5 ",
"sellnums":"5, 8, 20, 10, 10, 8, 20, 40, 10, 10, 20,5 ",
"preMonthproductnums":"5, 20, 40, 10, 10, 20, 20, 10, 10, 8, 20,5 ",
"preMonthsellnums":"5, 8, 20, 10, 10, 8, 20, 10, 8, 20, 40, 10"
};
var returndata=data;
//处理装载数据
//X轴数据装载
console.log(data)
//X轴1 >>>>实现横轴增倍
var productnames=returndata.productname.split(',');
var tempnames=[];
for(var i=0; i<productnames.length;i++)
{
tempnames.push("");
tempnames.push(productnames[i])
}
options.xAxis[0].data=tempnames;

options.xAxis[1].data=tempnames;

//柱状图1 数据加倍，每个数据后面加一个0
var productnums=returndata.productnums.split(',');
var tempproductnums=[];
for(var i=0; i<productnums.length;i++)
{
tempproductnums.push(productnums[i]);
tempproductnums.push(0);
}
options.series[0].data=tempproductnums;

//柱状图2 数据加倍，每个数据前面加一个0
var sellnums=returndata.sellnums.split(',');
var tempsellnums=[];
for(var i=0; i<sellnums.length;i++)
{
tempsellnums.push(0);
tempsellnums.push(sellnums[i]);
}
options.series[1].data=tempsellnums;

//折线图1 插入数=前后两个数的平均数，最后一个数据段不显示，虚构拐点不显示
var preMonthproductnums=returndata.preMonthproductnums.split(',');
var temppreMonth=[];
for(var i=0; i<preMonthproductnums.length-1;i++)
{
temppreMonth.push(preMonthproductnums[i]);
var num=(Number(preMonthproductnums[i])+Number(preMonthproductnums[i+1]))/2.0;
var obj={value:num,symbol:'none'};
temppreMonth.push(obj);
}
temppreMonth.push(preMonthproductnums[preMonthproductnums.length-1]);
temppreMonth.push({value:'-',symbol:'none'});
options.series[2].data=temppreMonth;

//折线图2 插入数=前后两个数的平均数，第一个数据段不显示，虚构拐点不显示
var preMonthsellnums=returndata.preMonthsellnums.split(',')
temppreMonth=[];
temppreMonth.push({value:'-',symbol:'none'});
for(var i=0; i<preMonthsellnums.length-1;i++)
{
temppreMonth.push(preMonthsellnums[i]);
var num=(Number(preMonthsellnums[i])+Number(preMonthsellnums[i+1]))/2.0;
// console.log(i+">>>"+num+"="+Number(preMonthsellnums[i])+":"+Number(preMonthsellnums[i+1]));
var obj={value:num,symbol:'none'};
temppreMonth.push(obj);
}
// console.log(temppreMonth)
temppreMonth.push(preMonthsellnums[preMonthsellnums.length-1]);
options.series[3].data=temppreMonth;

echartsHandler.setOption(options);

</script>

心得总结：

1.多积累类似： console.log(), Number(),push(),split()等常用方法

2.多动手，多尝试

补充:

为了使柱子之间的距离变小采用三等分方式(增加两个辅助点)