SmartChart的Git地址https://gitee.com/smartchart/smartchart

在这里我只能说一句话 SmartChart开发团队真厉害

配合Django来使用SmartChart

安装smartchart,Python版本>=3.6,Django>=2.0
SmartChart和我们的admin是有关联的,我们可以通过下载一个UI库去美化我们admin页面这个UI库就是simpleui

# 安装smartchart
pip install smartchart
# 安装simpleui 
pip install simpleui 

安装完成后需要去git上面拉取模版以及静态文件
地址:https://github.com/JohnYan2017/SmartCharts

# 对应的项目目录说明:

templates/echart   -- 编辑器界面
templates/index    -- 首页Portal
static/echart         -- 扩展前端数据处理函数(图形编辑中可用)
static/editor         -- 编辑器界面js
static/index          -- Portal对应js, css
static/custom       -- 你可以在此新建人个文件夹存放自定义css, js, image ..

Django项目中settings,py配置

# settings,py
INSTALLED_APPS = [
    'simpleui',  # 在导入初始化admin之前导入UI库进行页面的美化
    'xxxxx',
    'xxxx',
    'xxx',
    'smart_chart.echart',   # 注册app
]

# 注释调MIDDLEWARE里面的
django.middleware.clickjacking.XFrameOptionsMiddleware

# 更改时区配置
LANGUAGE_CODE = 'zh-Hans'
TIME_ZONE = 'Asia/Shanghai'
USE_I18N = True
USE_L10N = True
USE_TZ = False

# 指定静态文件
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

## 若是注册了 simpleui 这个样式库,同时也创建了一个仪表盘,这时候我们想把某个仪表盘放到我们admin的首页就需要以下配置(用到时候打开)
# SIMPLEUI_HOME_PAGE = '/echart/?type=大数据李白'  # type=的是仪表盘名称,这个是自定义的,能和仪表盘名称对应上去就行

在urls.py注册路由

# urls.py
from django.urls import include  # 导入include
from django.views.generic import RedirectView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('echart/',include('smart_chart.echart.urls')),  # 注册一个图表的路由
    path('',RedirectView.as_view(url='echart/index/')),  # 跳转到chart的首页
]

迁移及创建超级管理员

# 首先生成迁移文件并迁移
python manage.py makemigrations 
python manage.py mifrate
# 创创建超级管理员
python manage.py createsuperuser

# 运行Django项目,访问一下 下面这条路由进行数据初始化
http://127.0.0.1:8000/echart/init_db/

# 到此已经完成一个SmartChart项目的创建

创建仪表盘

到这里的时候小伙伴们都应该知道仪表盘是个什么东西了,不做过多介绍,SmartChart开发团队真厉害。
可能会有地方需要激活码,这个激活码直接加群就可以获取

初始化完成后会进入首页,点击下图小人图标或者另一个进入开发者模式
SmartChart配合Django的安装与使用
点击我的关注,新增一个仪表盘。 注:一定要在开发者模式下进行
SmartChart配合Django的安装与使用
进入新增仪表盘详情页

箭头所指,归属项目 默认连接 可以自己创建一个归属的项目,并创建一个数据库的一个链接,支持多种数据库连接 。数据库类型,如mysql,oracle,impala,gp,mssql,hive,redis,sqlite,python

SmartChart配合Django的安装与使用
创建完成后我们就会发现,在仪表盘的表中多出了一条数据,就是我们刚刚创建那条
SmartChart配合Django的安装与使用
点击进入仪表盘的图表页
SmartChart配合Django的安装与使用

样式及数据

SmartChart配合Django的安装与使用
SmartChart配合Django的安装与使用

边框设计

多种边框样式提供选择 SmartChart集成DataV

// 边框样式  dv-border-box-  后面跟的数字就是选择样式的类型
// 可根据上方  SmartChart集成DataV 进行参考一共十三个
<div class="col-xs-12 col-md-6" style="padding:0 0;height:50%;" >
  <dv-border-box-11>
   <div style="height:100%;padding:0.5% 0.5%;" ></div>
 </dv-border-box-11>
</div>

SmartChart配合Django的安装与使用

设置联动

smartChart 设置联动,是需要通过SQL语句来设置,这个下面详细介绍
SmartChart配合Django的安装与使用

联动是使用的sql语句接收的参数,这个sql语句是要写在需要被联动的图表数据集中
/* where age='$age' */ 该语句中的 $至关重要切记勿忘

SmartChart配合Django的安装与使用

想要联动的话,必须打开 "dv" 模式 也就是在高级中设置 {"dv":1}, 并根据下面语句进行联动配置

SmartChart配合Django的安装与使用

上图有个画框的的参数 data[2]这个的获取,就在网页的开发者模式 F12 点击Conlose再点击数据,会有打印的数据信息,我们找到data所拥有的数据。配置完成后,就可以联动了,也可以双向联动,这个同理,反过来配置就行了。
SmartChart配合Django的安装与使用

优点

  • 图表类型多,外观炫酷
  • 支持自定义数据,对数据的结构要求严格,格式必须统一
  • 支持mysql,oracle,impala,gp,mssql,hive,redis,sqlite等主流数据库
  • 支持自定义访问接口,如GET、POST请求
  • 支持各图表的,智能联动,可以通过SQL配合设定
  • 配置简单,上手快,但是没有精确的技术文档