Echarts 简单的图表展示

参考:
Echart API文档:
Ecahrt demo
Ecahrt API Option配置

line示例图:

  • php代码:
    $series[] = [
                'name' => $day,
                'type' => 'line',
                'data' => array_values($data),
                'markPoint'=> [
                    'symbol' => 'roundRect',
                    'symbolSize' => [65,30],
                    'data' => [
                        ['type'=>'max', 'name'=>'最大值'],
                    ]
                ],
                'markLine'=> [
                    'data' => [
                        ['type'=>'average', 'name'=>'平均值']
                    ]
                ],
            ];
    $legendData = ['a', 'b', 'c'];//图例组件标记内容
    $xData = ['a', 'b', 'c'];//x轴内容
    $options = [
            'title' => ['text' => '时段下单量'],
            'tooltip' => ['trigger' => 'axis'],
            'legend' => ['data' => $legendData],
            'grid' => [
                'left' => '3%',
                'right' => '4%',
                'bottom' => '3%',
                'containLabel' => true,
            ],
            'toolbox' => [
                'show' => true,
                'feature' => [
                    'dataView' => [
                        'show' => true, 'readOnly' => false, //是否查看数据及修改
                    ],
                    'magicType' => [
                        'show' => true, 'type' => ['line', 'bar'], //是否可以切换成其他图表
                    ],
                    'restore' => [
                        'show' => true
                    ],
                    'saveAsImage' => [
                        'show' => true
                    ],
                ],
            ],
            'xAxis' => [
                'type' => 'category',
                'data' => $xData,
                'boundaryGap' => false,
            ],
            'yAxis' => ['type' => 'value'],
            'series' =>$series
        ];
评论数量: 0

0
点赞
530
浏览
0
评论

贡献 69