Echarts

1. 常见的数据可视化库：

• ECharts.js 百度出品的一个开源 Javascript 数据可视化库
• Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
• AntV 蚂蚁金服全新一代数据可视化解决方案
• D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)

2. 使用步骤

• 引入echarts 插件文件到html页面中
• 准备一个具备大小的DOM容器

<div id="Mychart" style="width: 600px;height:400px;"></div>

• 初始化echarts实例对象

var myChart = echarts.init(document.getElementById('Mychart'))

• 指定配置项和数据(option)

var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

• 将配置项设置给echarts实例对象

myChart.setOption(option)

3. 基本配置

series、xAxis、 yAxis、grid、tooltip、title、legend、color