ECHARTS实际应用-一个接口，单一页面，多个表格

echarts是一个比较好用的表格展示。通过不同的配置，就可以实现饼图，柱图以及折线图等。
方便数据展示。下面就是在同一个页面，通过配置文件创建四个表格的例子。

<!-- 编写HTML文件-->
<!-- 引入你下载的min.js文件-->
<script src="{$Think.const.PUBLIC_PATH}/js/echarts.min.js"></script>

<!-- 添加目标DIV -->
<div id="sales_total" style="width: 1600px;height:700px;display: inline-block;"></div>

// 基于准备好的dom，初始化echarts实例
// sales_total 为目标DIV的idvar myChart = echarts.init(document.getElementById('sales_total'));

// 指定图表的配置项和数据
var option = {
    title: [  // 指定各个表格的标题
        {text: '销售额', top: '5%', left: '30%'},
        {text: '订单量', top: '5%', left: '75%'},
        {text: '客单价', left: '30%', top: '50%'},
        {text: '动销率', left: '75%', top: '50%',},
    ],
    dataset: { // 指定数据源
        source:
            [
                ['type','销售额', '订单量', '客单价', '动销率'],
            ].concat(
                [
                    ['2019-01-01',100.0,20,4,'30%'],
                    ['2019-01-02',110.0,21,5,'30%'],
                    ['2019-01-03',120.0,22,6,'30%'],
                    ['2019-01-04',140.0,23,7,'30%'],
                    ['2019-01-05',150.0,24,8,'30%'],
                    ['2019-01-06',160.0,25,9,'30%'],
                ]
            )
    },
    grid: [ // 用来调整，各个表格的位置
        {top: '10%', bottom: '55%', width: '40%'},
        {top: '10%', bottom: '55%',left: '55%', width: '40%'},
        {top: '55%', width: '40%'},
        {top: '55%', left: '55%', width: '40%'},
    ],
    tooltip: {},
    legend: {},
    xAxis: [ // 用来配置横坐标的信息，gridIndex是标识针对的那个表格
        {type: 'category', gridIndex: 0, name: '日期', axisTick: {alignWithLabel: true}},
        {type: 'category', gridIndex: 1, name: '日期', axisTick: {alignWithLabel: true}},
        {type: 'category', gridIndex: 2, name: '日期', axisTick: {alignWithLabel: true}},
        {type: 'category', gridIndex: 3, name: '日期', axisTick: {alignWithLabel: true}},
    ],
    yAxis: [
        {type: 'value',gridIndex: 0, name: '金额($)'},
        {type: 'value',gridIndex: 1, name: '数量'},
        {type: 'value',gridIndex: 2, name: '金额($)'},
        {type: 'value',gridIndex: 3, name: '%'},
    ],
    series: [

        // 配置数据关系
        // stack用来做分组标记，同标记的数据，会在同一个表格显示
        // seriesLayoutBy 设置如何从dateset里面获取数据，这里按照列获取
        {type: 'line', stack:'1', xAxisIndex: 0, yAxisIndex: 0, seriesLayoutBy: 'column'},
        {type: 'bar', stack:'2', xAxisIndex: 1, yAxisIndex: 1, seriesLayoutBy: 'column'},
        {type: 'bar', stack:'3', xAxisIndex: 2, yAxisIndex: 2, seriesLayoutBy: 'column'},
        {type: 'line', stack:'4', xAxisIndex: 3, yAxisIndex: 3, seriesLayoutBy: 'column'},
    ]
};

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

效果如下图：