前后端不分离项目中引入echarts

1、起源

在日常工作中，有时会需要将数据可视化。 数据可视化的工具有很多种，例如matplotlib、echarts等。鉴于要在web平台中展示，所以我选择了echarts。

2、遇到的问题

但在引入echarts时，网上查询资料时，发现大部分都是vue项目中引入echarts教程。前后端分离项目当然有其优势，但对我来说，只是要实现一个简单的数据可视化平台，前后端分离项目的开发与维护成本太高了，还是前后端不分离更合适。
所以在一番摸索后，成功在前后端不分离项目中引入echarts实现了预期功能。为了巩固知识及以后复用，在本文中简单整理了一下使用教程。

3、使用教程

1. js引入echarts

引入本地echarts

<script src="/static/js/echarts.min.js"></script>

网络引入echarts

<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>

2. 在body中新增用于显示echarts图表的容器

<div id="main" style="width: 80%;height:400px;">

3. 新增js代码用于设置echarts图表

<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        let chartDom = document.getElementById('main')
        let myChart = echarts.init(chartDom);
 
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>