Lodop打印echarts图表，折线图为例（并解决只折现图只显示点的问题）

打印插件Lodop打印图表

以打印血压的折线图为例

1.引入echarts.min.js和LodopFuncs.js

后台折线图接口格式

public class EchartsBarVo {

    private List<String> times;//时间
    private List<Integer> bpFirsts;//收缩压
    private List<Integer> bpSeconds;//舒张压
    private List<Integer> pulses;//心率
    public List<String> getTimes() {
        return times;
    }
    public void setTimes(List<String> times) {
        this.times = times;
    }
    public List<Integer> getBpFirsts() {
        return bpFirsts;
    }
    public void setBpFirsts(List<Integer> bpFirsts) {
        this.bpFirsts = bpFirsts;
    }
    public List<Integer> getBpSeconds() {
        return bpSeconds;
    }
    public void setBpSeconds(List<Integer> bpSeconds) {
        this.bpSeconds = bpSeconds;
    }
    public List<Integer> getPulses() {
        return pulses;
    }
    public void setPulses(List<Integer> pulses) {
        this.pulses = pulses;
    }
}

2.初始化echarts，如下

    // 折线图-开始：基于准备好的div，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    option = {
        title: {
            text: ''
        },
        animation:false,
        visualMap: [{ // 第一个 visualMap 组件
            inRange: {
                min:1,
                max:1000,
                color: ['black'],
                symbolSize:[15]
            }
        }],
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: [{
                name: '收缩压',
                icon: 'circle'
            },
                {
                    name: '舒张压',
                    icon: 'triangle'
                },
                {
                    name: '心率',
                    icon: 'diamond'
                }
            ]
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data:
                ${echartsBarVo.times}

        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: '收缩压',
            type: 'line',
            symbol: 'circle',
            symbolSize:15,
            color:'black',
            data:
                ${echartsBarVo.bpFirsts}

        },
            {
                name: '舒张压',
                type: 'line',
                symbol: 'triangle',
                symbolSize:15,
                color:'black',
                data:
                    ${echartsBarVo.bpSeconds}

            },
            {
                name: '心率',
                type: 'line',
                symbol: 'diamond',
                symbolSize:15,
                color:'black',
                data:
                    ${echartsBarVo.pulses}

            }
        ]
    };

//折线图-结束

3.2个html标签用于存放echarts和转成图片后的地址

					 <td width="330" colspan="3" rowspan="7">

						 <div id="main" style="width: 400px;height:300px;display: none"></div>
						 <img src="" id="mainSrc" style="width: 400px;height:300px;">

					 </td>

4. 把echarts图片转成64编码的图片

    myChart.setOption(option);
    jlcgImgBase64 = myChart.getDataURL();
    //动态的渲染到打印html的标签上
    document.getElementById('mainSrc').setAttribute('src',jlcgImgBase64)

5. 打印

6.成果图

补充：

echarts页面的图表的base64生成图片折线图只有点

原因：

采用h5画布，存在动画，会延迟加载，所以通过getDataURL()获取的图片，因为动画原因没有出来线。

处理：

1.是延迟去通过getDataURL()获取图片；
2.option设置 animation:false这个来不用动画；