如何实现柱状图和折线图的部分虚线功能ECharts Gallery

20:11:45图表已生成
代码
    var dateData = ["2019-06-01", "2019-06-02", "2019-06-03", "2019-06-04", '2019-06-05', '2019-06-06', "2019-06-07"];
    var dataD = [22, 34, 44, 15, 15, 22, 16, 24, 23, 20, 8, 9];
    var chooseDate = "2019-06-04";
    var len;
    for (var i = 0; i < dateData.length; i++) {
        if (chooseDate == dateData[i]) {
            len = i;
            break;
        }
    }
    var newDataD = [];
    for (var j = 0; j < len; j++) {
        newDataD.push(dataD[j]);
    }
    for (var k = len; k < dataD.length; k++) {
        var data2 = {};
        data2.value = dataD[k];
        data2.itemStyle = {
            normal: {
                color: '#fff',
                borderType: "dashed",
                barBorderColor: 'red',
                barBorderWidth: 3,
                barBorderRadius: 0
            }
        }
        newDataD.push(data2)
        data2 = {};
    }
    var d = [11.0, 4.9, 7.0, 23.2, 25.6, 76.7, 11.6, 16.2, 32.6, 20.0, 
    {
        itemStyle: {
            normal: {
                color: '#fff',
                borderType: "dashed"
            }
        },
        value: 21,
    },
    {
        value: 22,
        itemStyle: {
            normal: {
                color: '#fff',
                borderType: "dashed"
            }
        }
    }]
    var seriesData = [{
            name: '蒸发量',
            type: 'bar',
            itemStyle: {
                normal: {
                    color: "blue",
                    barBorderColor: 'blue',
                    barBorderWidth: 3,
                    barBorderRadius: 0,
                    borderType: "solid"
                }
            },
            data: d,
        },
        {
            name: '降水量',
            type: 'bar',
            data: newDataD
        },
        {
            name: '平均温度',
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            itemStyle: {
                normal: {
                    color: "#000",
                    lineStyle: {
                        type: "solid",
                        width: 2
                    }
                }
            },
            data: [1100, 1202, 1303, 1405, 1300, 1020, 2030, 2340, 2300, "-", "-", "-"]
        },
        {
            name: '平均温度',
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            itemStyle: {
                normal: {
                    color: "#000",
                    lineStyle: {
                        type: "dotted",
                        width: 2
                    }
                }
            },
            data: ["-", "-", "-", "-", "-", "-", "-", "-", 2300, 1005, 1200, 602]
        }
    ]

    option = {
        tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: {
                //  type: 'cross',
                crossStyle: {
                    // color: '#999'
                }
            },
            formatter: function(params, ticket, callback) {
                console.log(params, 'params')
                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 (seriesName == "蒸发量") {
                        color = "blue";
                    } else if (seriesName == "降水量") {
                        color = "red"
                    }
                    //过滤无效值
                    if (value == '-') {
                        continue;
                    }

                    //过滤重叠值
                    if (valMap[seriesName] == value) {
                        continue;
                    }

                    if (i === 0) {
                        htmlStr += xName + '<br/>'; //x轴的名称  
                    }
                    htmlStr += '<div>';
                    //为了保证和原来的效果一样，这里自己实现了一个点的效果  
                    htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';

                    //圆点后面显示的文本  
                    // htmlStr += seriesName + '：' + value; 
                    if (seriesName == "平均温度") {
                        var value1 = "";
                        value = value + "";
                        if (value.length > 3) {
                            value1 = value.slice(0, 2) + ":" + value.slice(-2);
                        } else {
                            value1 = "0" + value.slice(0, 1) + ":" + value.slice(-2);
                        }
                        htmlStr += seriesName + '：' + value1;
                    } else {
                        htmlStr += seriesName + '：' + value;
                    }

                    htmlStr += '</div>';
                    valMap[seriesName] = value;
                }
                return htmlStr;
            }


        },
        grid: {
            bottom: "20%",
            left: 30,
            right: 30,
            containLabel: true
        },
        legend: {
            bottom: "10%",
            data: ['蒸发量', '降水量', '平均温度']

        },
        xAxis: [{
            axisLabel: {
                //  padding: [0, 110, 0,50], // 上右下左
                //  interval :10
                // margin :1
            },
            type: 'category',
            axisLine: {
                show: true,
                // onZero :false,
                // lineStyle:{width:1}
            },
            // nameLocation :"middle",
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
                // type: 'shadow'
            },
            splitLine: { //网格线
                show: false
            },
            axisTick: { //y轴刻度线
                show: false,
                alignWithLabel: true,

            },
            boundaryGap: true
        }],
        yAxis: [{
                type: 'value',
                name: '水量',
                axisLabel: {
                    formatter: '{value} ml'
                },
                splitLine: { //网格线
                    show: false
                }
            },
            {
                type: 'value',
                name: '温度',
                axisLabel: {
                    formatter: '{value} °C'
                },
                splitLine: { //网格线
                    show: false
                },
                axisTick: { //y轴刻度线
                    show: false
                }
            },

        ],
        series: seriesData,
        dataZoom: [{
                type: 'slider',
                show: true,
                xAxisIndex: [0],
                start: 1,
                end: 100,
                bottom: "0",
            },
            {
                bottom: "10%",
                type: 'inside',
                xAxisIndex: [0],
                start: 1,
                end: 35
            }
        ],

    };
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
