ECharts.js数据可视化库介绍和使用（图文教程）

ECharts.js 是一个开源的数据可视化库，它提供了丰富多样的图表和图形，可以用于在网页中展示各种数据
官网地址：https://echarts.apache.org/
GitHub仓库：https://github.com/apache/echarts

ECharts示例

官方示例：https://echarts.apache.org/examples/zh/index.html#chart-type-line

一个ECharts示例点击查看案例效果>> | 点击查看案例效果(数据动态)>>


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收支图</title>
    <script src="echarts.min.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width:1000px;height:400px;"></div>
    <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'), '#dark', {  //dark为背景颜色
      renderer: 'canvas',    //canvas和svg筢
      useDirtyRect: false
    });


    var json = { "count": [8, 9, 9, 13, 15, 11, 6, 5, 0, 0, 0, 0], "income": [4000, 5700, 4450, 6660, 7515, 6280, 7150, 5500, 0, 0, 0, 0], "member": [1, 0, 1, 1, 1, 1, 0, 2, 0, 0, 0, 0], "payment": [0, 0, 0, 0, 0, 0, 0, -775, 0, 0, 0, 0], "code": "0", "msg": "" }

    var json = { "count": [418,338,451,571,328,521,341,526,492,415,326,540], "income": [6270,6422,8118,8565,4592,7294,2046,10520,5904,2075,6520,3780], "member": [392,258,246,289,227,440,178,497,488,324,241,331], "payment": [1672,3380,2255,5139,2952,5210,1364,2630,1968,2075,1630,2160], "code": "0", "msg": "" }

    // 指定图表的配置项和数据
    var option = {
        title: {
          // text: 'ECharts 入门示例'  //显示标题
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            // bottom: true, //选项在底部
            data: ['数量', '收入', '支出', '新用户'],
            textStyle: {
                color: '#123'
            }

        },
        grid: {
            x: 50, //向左边位置留空白
            x2: 10, //向右边位置留空白
            y: 30, //向上边位置留空白
            y2: 30, //向下边位置留空白
            containLabel: true
        },
        xAxis: {
            data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
        },
        yAxis: {},
        series: [{
                name: '数量',
                type: 'line',                //line=线 bar=柱形
                data: json.count
            }, {
                name: '收入',
                type: 'line',
                data: json.income
            }, {
                name: '支出',
                type: 'line',
                data: json.payment
            }, {
                name: '新用户',
                type: 'line',
                data: json.member
            } 
        ]
    };

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

</html>