Davinci(达芬奇)demo1——简单柱状图

小灰灰 2020-11-15 05:05 1012阅读 0赞

1、柱状图内容：x轴：设备类别；  y轴：设备数量

--------------------

## 一、开发前准备 ##

###① 数据库相关，准备一个数据库，里面有两张表###

**1.1 设备类别表device\_type(id，name)**

![2020052514444345.png][]

**1.2 设备表device(id, name，device\_type\_id)**

![20200525144525254.png][]

### ② 编写sql，统计不同设备分类下的设备数量 ###

SELECT 
      count(*) deviceCount,
      dt.id deviceTypeId,
      dt.`name` deviceTypeName
    FROM 
    	device_type dt
    left join device d on d.device_type_id = dt.id
    GROUP BY dt.id

## 二、开始绘制图表 ##

### ① 新建一个项目 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70][]

### ② 进入项目 配置数据源 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 3][]

### ③  新建一个视图 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 5][]

### ④ 执行准备好的sql ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 6][]

###  ⑤ 保存视图 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 7][]

### ⑥ 编写组件[Widget][] ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 8][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 9][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 10][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 11][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 12][]

### ⑦  新建仪表盘  ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 13][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 14][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 15][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 16][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 17][]

### ⑧ 新建一个大屏 ###

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 18][] ⑨ 大屏导入柱状图组件 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 19][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 20][]

至此，柱状图大屏demo绘制完毕

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 21][]

[2020052514444345.png]: /images/1605417369451.png
[20200525144525254.png]: /images/1605417347812.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70]: /images/1605417325366.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 1]: /images/1605417301807.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 2]: /images/1605417279048.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 3]: /images/1605417258633.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 4]: /images/1605417232530.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 5]: /images/1605417202880.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 6]: /images/1605417183457.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 7]: /images/1605417162528.png
[Widget]: http://localhost:8180/#/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 8]: /images/1605417141405.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 9]: /images/1605417117750.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 10]: /images/1605417096000.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 11]: /images/1605417073785.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 12]: /images/1605417043264.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 13]: /images/1605417019622.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 14]: /images/1605416991534.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 15]: /images/1605416967348.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 16]: /images/1605416943064.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 17]: /images/1605416920211.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 18]: /images/1605416896529.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 19]: /images/1605416874654.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 20]: /images/1605416850800.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqcTg1MjUzMzQ0NQ_size_16_color_FFFFFF_t_70 21]: /images/1605416827336.png