纯js的统计图插件-统计图

第一次写博客，写的不到望大家见谅！

今天给大家分享一个纯js的插件（统计图），有知道的可以在下面评论一起谈论一下，刚学着的时候，我是看了好久才看懂的一个基本结构，到后来我才知道原来直接去原网站上找到复制下来js就可以了。

这是他的网址：https://www.echartsjs.com/zh/index.html   这个是人家官方的网址，大家可以现去看一下人家的效果，效果蛮多的，基本上可以满足基本项目的需求。

下面我来给打架举一个例子：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>统计图</title>

</head>

<body>
    <div id="main" style="width: 100vw;height: 100vh;"></div>
    <script src="js/echarts.js"></script>
    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '堆叠区域图'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '0%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '邮件营销',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '联盟广告',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '视频广告',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '直接访问',
                    type: 'line',
                    stack: '总量',
                    areaStyle: { normal: {} },
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: '搜索引擎',
                    type: 'line',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    areaStyle: { normal: {} },
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

</body>

</html>

这个例子中的js是本地的，你想下载的话就去  https://echarts.apache.org/zh/download.html   ( 官方)

他上面还有使用的具体步骤，以及详细的操作，不知道的小伙伴，可以是看看 ，这个插件我最看重的一点就是，他是原生js写的，本人比较喜欢原生这些东西，虽然看起来有点费时间，但是只有从原生那才可以了解到一门语言的精髓，

最后感谢官方提供了这么方便的插件，以及祝各位程序猿们工作顺利，

第一次写  有什么需要补充的大家也可以说出来 我们讨论一下，一起提高，一起进步！