echarts 数据导出-导出外部数据并使用echarts进行绘制

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

首先，您需要在 Django 中定义一个视图函数，该函数从数据库读取要显示的数据并将其传递给模板。 模板中可以使用Echarts的JavaScript库来绘制图表。 模板中需要导入Echarts的JavaScript文件，并在JavaScript代码中定义一个DOM元素作为图表容器。 然后，在JavaScript代码中使用AJAX技术向视图函数发送请求以获取数据。 一般来说echarts 数据导出，可以使用jQuery的AJAX方法来发出请求。 请求成功后，可以将数据传递给Echarts的初始化函数，生成相应的图表。 最后，需要将模板渲染成 HTML 页面，并将生成的图表显示在页面上。 下面是一个简单的示例代码： 在 Django 中定义一个视图函数： ```pythonfromdjango.shortcutsimportrenderfrommyapp.modelsimportMyModeldefchart_data(request):data=MyModel.objects.all() returnrender(request,'chart.html',{'data' : data})```在模板中引入Echarts的JavaScript文件，并定义一个DOM元素作为图表容器：```html{%extends"base.html"%}{%blockcontent%}{%endblock%} { %blockscripts%}{%endblock%}``` 这里使用 jQuery 的 AJAX 方法向视图函数 `chart_data` 发送 GET 请求来获取数据。 请求成功后echarts 数据导出，将数据传递给Echarts的初始化函数，并设置相应的图表选项。 最后，在 HTML 页面中显示图表。

用法：
1、echartsContainer对应到echarts的容器id；
2、exportOut()绑定导出按钮即可。

-------------------------------------------------- -------------------------------------------------- -------------------------------------------------- -------------------

2017年8月9日上午更新

借助画布导入多张图片。 同样在exportOut中调用drawOnCanvas(dataurl, dataurl1, dataurl2)echarts 保存按钮，其中括号内有3个dataurl值。

/**
 * 将canvas画布导出为图片
 */
function canvasToImageIpal(type) {
    var canvas = document.getElementById("canvasipal");
    var imgdata = canvas.toDataURL(type);
    var fixtype = function (type) {
        type = type.toLocaleLowerCase().replace(/jpg/i, 'jpeg');
        var r = type.match(/png|jpeg|bmp|gif/)[0];
        return 'image/' + r;
    }
    imgdata = imgdata.replace(fixtype(type), 'image/octet-stream')
    var saveFile = function (data, filename) {
        var link = document.createElement('a');
        link.href = data;
        link.download = filename;
        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        link.dispatchEvent(event);
    }
    var filename = ccode + "展示" + '.' + type;
    saveFile(imgdata, filename);
}
function drawOnCanvas(dataurl, dataurl1, dataurl2) {
    var canvas = document.getElementById("canvasipal");
    var Gc = canvas.getContext("2d");
    var drawImg = new Image();
    drawImg.src = dataurl;
    drawImg.onload = function () {
        draw(this);
    };
    function draw(obj) {
        Gc.drawImage(obj, 0, 0, 600, 300);
    };
    var drawImg1 = new Image();
    drawImg1.src = dataurl1;
    drawImg1.onload = function () {
        draw1(this);
    };
    function draw1(obj) {
        Gc.drawImage(obj, 0, 300, 300, 300);
        var type = 'png';
    };
    var drawImg2 = new Image();
    drawImg2.src = dataurl2;
    drawImg2.onload = function () {
        draw2(this);
    };
    function draw2(obj) {
        Gc.drawImage(obj, 300, 300, 300, 300);
        var type = 'png';
        canvasToImageIpal(type);
    };
}

-------------------------------------------------- -------------------------------------------------- ----------------------------

2017.9.26更新

html中canvas的定义：

导入按键绑定函数：

function exportOut() {
    var myCharts = echarts.init(document.getElementById('echartsContainer'));
    var dataurl = myCharts.getDataURL();
    var myCharts1 = echarts.init(document.getElementById('echartsContainer1'));
    var dataurl1 = myCharts1.getDataURL();
    var myCharts2 = echarts.init(document.getElementById('echartsContainer2'));
    var dataurl2 = myCharts2.getDataURL();
    drawOnCanvas(dataurl, dataurl1, dataurl2);
    return;
}

阐明：

1. Canvas定义在table中echarts 保存按钮，默认隐藏。

2、导出按钮绑定函数中的id是echars容器对应的div的id。

3.仅兼容chrome49及以上版本。