Javascript - 使用ECharts编写折线图

ECharts官网

https://echarts.apache.org/zh/index.html

根据教程下载JS文件并导入

<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>

在绘图前我们需要为ECharts准备一个DOM容器

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 100vw;height:90vh;"></div>

详细代码如下:

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'Att',    //标题
            left: 'center',    //标题居中显示
            subtext: '@Attention'    //标题命名
        },
        tooltip: {},    //提示框组件(默认)
        legend: {
            bottom: "0"    //标题居中显示
        },
        xAxis: {
            data: ["一月", "二月", "三月", "四月", "五月", "六月"]    //X轴显示
        },
        yAxis: {},    //Y轴显示
        color: ['skyblue', 'yellow', 'orange'],    //折线颜色
        series: [
            {
                name: '2018',
                type: 'line',       //折线
                data: [3000, 5000, 6000, 8000, 8000, 6000]       //折线图数据
            },
            {
                name: '2019',
                type: 'line',       //折线
                data: [5000, 6000, 8000, 9000, 10000, 12000]       //折线图数据
            },
            {
                name: '2020',
                type: 'line',       //折线
                data: [9000, 12000, 10000, 15000, 18000, 16000]       //折线图数据
            },
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>