將echarts生成的圖表變為圖片儲存起來

huaweichenai發表於2021-11-06
Echarts

​
一：echarts

echarts官網：https://echarts.apache.org/zh...

echarts.js地址：https://cdn.jsdelivr.net/npm/...

二：將echarts生成的圖表變為圖片示例

1：html

<div style="width:800px;height:500px;" id="chart">
</div>

2:生成echarts圖表(js)，這裡以柱狀圖為例

var chart = echarts.init(document.getElementById("chart"));
var option = {
    animation: false,
    title: {
        text: '統計',
        padding: [10, 320, 0, 320]
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        name: '月份',
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} : {c}"
    },
    yAxis: {
        type: 'value',
        name: '數量',
    },
    series: [{
        name: '數量',
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        barWidth : 50,//柱圖寬度
        label: {
            show: true,
            position: 'top'
        },
        itemStyle: {
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                    {offset: 0, color: '#4976C5'},
                    {offset: 0.5, color: '#7496D3'},
                    {offset: 1, color: '#ECF0F9'},

                ]
            )
        },
    }
    ]
};
chart.setOption(option);

3：獲取生成的柱狀圖的base64地址

//獲取echarts圖表的base64地址
var baseImage = chart.getDataURL("png");

4：將生成的base64傳到後端儲存起來

(1)：ajax上傳

$.ajax({
    url: url,
    type: 'post',
    data: {image:baseImage},
    success: function (json) {

    }
});

(2)：後端儲存檔案(以PHP為例)

$image = $request->post('image');

if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $image, $result)) {
    $type = $result[2];

    fullPath = '圖片儲存地址';

    $fileName = 'echarts.png';//圖片儲存名稱
    if (file_put_contents($fullPath . $fileName, base64_decode(str_replace($result[1], '', $image)))) {
        
        return '上傳成功';
    } else {
        return '圖片上傳失敗！';
    }
} else{
    return '無效的圖片檔案！';
}

根據如上步驟就可以實現將echarts圖表變為圖片

相關文章