数据可视化Echarts

一、Echarts准备工作

Apache ECharts由官网下载对应的js文件即可，引入html里

二、使用步骤

1、准备好一个DOM元素，用来盛放图表，图表在页面上的宽度将由此DOM元素决定

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

2、初始化echart实例，固定写法

var myChart = echarts.init(document.getElementById('选择盛放图表的DOM元素'));

3、指定图表的配置项和数据 (根据文档提供示例找到option)

在官网上找到并调试自己需要的图表，最后将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'
    }]
};

4、使用刚指定的配置项和数据显示图表，固定写法

myChart.setOption(option);