porygon/dcat-extension-echarts 问题修复 & 功能扩展

解决BUG、新增功能、兼容多环境部署,快速响应你的开发需求

邮箱:yvsm@zunyunkeji.com | QQ:316430983 | 微信:yvsm316

porygon/dcat-extension-echarts

Composer 安装命令:

composer require porygon/dcat-extension-echarts

包简介

Dcat Echarts扩展

README 文档

README

安装

  • 下载安装 直接将仓库下载或者克隆到项目的 dcat 扩展文件夹中 然后去扩展页面中启用
  • composer 安装 composer require porygon/dcat-extension-echarts 然后去扩展页面中启用
  • Dcat 扩展市场安装(暂未开放)

用法

有两种用法,一是原生调用,二是封装卡片

// 原生调用
// Chart::make() 后链式调用option设置
// 也可以使用 ->setChartOption("grid",[...]);
// 具体方法可以直接查看源码
// 原生创建的是一个单纯的图表
use Porygon\Echarts\Chart;

Chart::make()->grid([
    "containLabel" => false,
    "left"         => "0%",
    "right"        => "0%",
    "top"          => "0%",
    "bottom"       => "0%",
])->xAxis([
    "type" => 'category',
    "boundaryGap" => false,
    "data" => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    "show" => false,
])->yAxis([
    "type" => "value", "show" => false
])->tooltip([
    "trigger" => 'axis',
])->serie([
    "data"       => [1, 5, 74, 15, 63, 75, 91],
    "type"       => "line",
    "smooth"     => true,
    "areaStyle"  => [],
    "showSymbol" => false
]);

// 封装调用
// 这个是与封装的demo
use Porygon\Echarts\Examples\NewUser;

// 封装创建的是一个卡片
NewUser::make();
// 也可以继续设置图表属性
NewUser::make()->->xAxis([
    "type" => 'category',
    "boundaryGap" => false,
    "data" => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    "show" => false,
])->yAxis([
    "type" => "value", "show" => false
])->tooltip([
    "trigger" => 'axis',
]);
  • 原生调用效果

image

  • 卡片效果

image

统计信息

  • 总下载量: 111
  • 月度下载量: 0
  • 日度下载量: 0
  • 收藏数: 12
  • 点击次数: 0
  • 依赖项目数: 0
  • 推荐数: 0

GitHub 信息

  • Stars: 11
  • Watchers: 1
  • Forks: 3
  • 开发语言: JavaScript

其他信息

  • 授权协议: MIT
  • 更新时间: 2022-06-28

承接程序开发

PHP开发

VUE

Vue开发

前端开发

小程序开发

公众号开发

系统定制

数据库设计

云部署

网站建设

安全加固