ECharts前端图形展示

这次负责慢查询预警，前后端都是自己处理，这次遇到了前端作图的需求，做一个记录以便后续使用；

使用的作图方式是ECharts，相应的example官方有相应的文档和使用方法，比较简单，一下只贴链接：

http://www.echartsjs.com/examples/

说明：遇到了两个问题，其一是toolbox中的中文乱码，我这边的解决方法是添加echarts.min.js即可；其二是toolbox中的position的位置，这个需要再option中添加right:'30'即可，可以参考调整。

    function drawTrendGraph(xAxis, yAxis){
        distChart = echarts.init(document.getElementById("instance-slow-graph"));
        $(window).resize(() => $(distChart).resize());
        const option = {
            toolbox: {
                right:'30',
                feature: {
                    dataZoom: {
                        yAxisIndex: false
                    },
                    saveAsImage: {
                        pixelRatio: 2
                    }
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                bottom: 90
            },
            dataZoom: [{
                type: 'inside'
            }, {
                type: 'slider'
            }],
            xAxis: {
                data: xAxis,
                silent: false,
                splitLine: {
                    show: false
                },
                splitArea: {
                    show: false
                }
            },
            yAxis: {
                splitArea: {
                    show: false
                }
            },
            series: [{
                type: 'bar',
                data: yAxis,
                // Set `large` for large data amount
                large: false
            }]
        };
        distChart.setOption(option);
    }