2018.4.10工作总结--折线的虚实交替（一条折线两种样式或者多种样式）

虚实折线.png

实现方式：
通过两条或多条不同样式折线的数据重叠：
var series= [
{
name: '2017年',
type: 'line',
symbolSize: 0,
data: [30, 80, 50, '-', '-', '-', '-', '-', '-', '-', '-', '-'],//重叠的数据，不需要展示此折线样式的用‘-’代替
//不同的样式：
lineStyle: {
normal: {
type: 'solid',
color: '#b9c3cf'
}
},
},
{
name: '2018年',
type: 'line',
symbolSize: 6,
data: ['-', '-', 50, 60, 70, 30, 55, 50, 40, 39, 38, 39,],//重叠的数据，不需要展示此折线样式的用‘-’代替
//不同的样式：
itemStyle: {
normal: {
color: '#0089df'
}
},
lineStyle: {
normal: {
color: '#0089df',
}
},
label: {
normal: {
show: true,
position: 'top',
formatter: '{c}%'
}
},
}
]

数据处理：
设置一个判断条件，获取数据时根据条件相应地给series[0]或series[1]赋值:例如年份

// 数据跨年份的series
var series1 = [
{
name: '2017年',
type: 'line',
label: seriesLabel,
data: [],
lineStyle: {
normal: {
type: 'solid',
color: '#b9c3cf',
}
}
},
{
name: '2018年',
type: 'line',
lineStyle: {
normal: {
color: '#0089df',
type: 'dotted',
}
},
label: seriesLabel,
data: [],
},
];
// 数据不跨年的series
var series2 = [
{
name: '2018年',
type: 'line',

    lineStyle: {
        normal: {
            color: '#0089df',
            type: 'dotted',
        }
    },
    label: seriesLabel,
    data: [],
},

];
var currentYear = currentTime.slice(0, 4);//当期年
if (data.result1 && data.result1.length != 0) {
var result1 = data.result1;
var myChart1 = echarts.dispose(document.getElementById('chart1'));//消除图表
var myChart1 = echarts.init(document.getElementById('chart1'));//初始化图表
var firstDataYear = result1[0].column2; // 第一个数据的年份
var a = 0;//判断Flag
if (firstDataYear != currentYear) {//跨年份的数据处理：
option1.series = series1;//给series赋值
option1.series[0].data = [];//series[0].data清零
option1.series[1].data = [];//series[1].data清零
var fillRateList1 = [];//series[0].data数据
var fillRateList2 = [];//series[1].data数据
var fillRateList=[];//所有数据

    for (var i = 0; i < result1.length; i++) {
        var comparison = result1[i].column2; //年份判断
        var fillRate = (Math.round(result1[i].column4 * 10) / 10).toFixed(1) * 1; // 满足率
        fillRateList.push(fillRate);
        if (comparison != firstDataYear) {
            a = a + 1;//判断Flag
            if (a == 1) {
                fillRateList1.push(fillRate);
                fillRateList2.push(fillRate);
            } else {
                fillRateList1.push('-');
                fillRateList2.push(fillRate);
            }
        } else {
            fillRateList1.push(fillRate);
            fillRateList2.push('-');
        };
    };
    option1.series[0].data = fillRateList1;//第1个年份的数据
    option1.series[1].data = fillRateList2;//第2个年份的数据
 
    var Max1 = getmax(fillRateList);//所有数据的最大值
    Max1=(Math.ceil(Max3/10))*10;//最大值向上取整十
    var Min1 = getmin(fillRateList);//所有数据的最小值
    Min1=(Math.floor(Min3/10))*10;//最小值向下取整十
    option1.yAxis.max = Max1;//y轴刻度的最大值==Max1
    option1.yAxis.min = Min1;//y轴刻度的最小值==Min1
    myChart1.setOption(option1);

} else {//不跨年份的数据处理
    option1.series = series2;//给series赋值
    option1.series[0].data = [];//series[0].data清零
    option1.series[1].data = [];//series[1].data清零
    var fillRateList = [];//series[0].data数据 
    for (var i = 0; i < result1.length; i++) {
        var fillRate = (Math.round(result1[i].column4 * 10) / 10).toFixed(1) * 1; // 满足率
        fillRateList.push(fillRate);
    };
    option1.series[0].data = fillRateList;

    var Max1 = getmax(fillRateList);//所有数据的最大值
    Max1=(Math.ceil(Max3/10))*10;//最大值向上取整十
    var Min1 = getmin(fillRateList);//所有数据的最小值
    Min1=(Math.floor(Min3/10))*10;//最小值向下取整十
    option1.yAxis.max = Max1;//y轴刻度的最大值==Max1
    option1.yAxis.min = Min1;//y轴刻度的最小值==Min1
    myChart1.setOption(option1);

};

};