条形图。

ShadowEditor.Web/lang/zh-CN.js

@@ -609,4 +609,5 @@ L_TIANDITU_MAP = '天地图';
 L_VISUAL = '可视化';
 L_DATA_SOURCE_MANAGE = '数据源管理';
 L_SIDEBAR = '侧边栏';
-L_PANEL = '面板';
+L_PANEL = '面板';
+L_BAR_CHART = '条形图';

ShadowEditor.Web/src/editor/menubar/VisualMenu.js

@@ -1,6 +1,7 @@
 import UI from '../../ui/UI';
 import Sidebar from '../../visual/Sidebar';
 import Panel from '../../visual/Panel';
+import BarChart from '../../visual/BarChart';
 
 /**
  * 数据可视化菜单
@@ -37,6 +38,11 @@ VisualMenu.prototype.render = function () {
                 cls: 'option',
                 html: L_PANEL,
                 onClick: this.addPanel.bind(this),
+            }, {
+                xtype: 'div',
+                cls: 'option',
+                html: L_BAR_CHART,
+                onClick: this.addBarChart.bind(this),
             }]
         }]
     });
@@ -62,4 +68,13 @@ VisualMenu.prototype.addPanel = function () {
     control.render();
 };
 
+// ---------------------------- 条形图 ------------------------------------------
+
+VisualMenu.prototype.addBarChart = function () {
+    var control = new BarChart({
+        parent: this.app.editor.svg,
+    });
+    control.render();
+};
+
 export default VisualMenu;

ShadowEditor.Web/src/language/Language.js

@@ -608,4 +608,5 @@ Object.assign(window, {
     L_DATA_SOURCE_MANAGE: 'Data Source Manage',
     L_SIDEBAR: 'Sidebar',
     L_PANEL: 'Panel',
+    L_BAR_CHART: 'Bar Chart',
 });

ShadowEditor.Web/src/visual/BarChart.js

@@ -0,0 +1,108 @@
+import Component from './Component';
+
+/**
+ * 条形图
+ * @param {*} options 
+ */
+function BarChart(options) {
+    Component.call(this, options);
+}
+
+BarChart.prototype = Object.create(Component.prototype);
+BarChart.prototype.constructor = BarChart;
+
+BarChart.prototype.render = function () {
+    var svg = d3.select(this.parent);
+    var defs = svg.select('defs');
+
+    // 面板背景
+    var barChartDef = defs.append('g')
+        .attr('id', 'barChartDef');
+
+    barChartDef.append('rect')
+        .attr('x', 0)
+        .attr('y', 0)
+        .attr('width', 180)
+        .attr('height', 212)
+        .attr('fill', 'rgba(0,0,0,0.2)');
+
+    barChartDef.append('path')
+        .attr('d', 'M11,0 L72,0 L85,12 L72,24 L11,24 L0,12 Z')
+        .attr('transform', 'translate(50,200)')
+        .attr('fill', '#2d232c');
+
+    // 面板
+    var chart = svg.append('g')
+        .attr('transform', 'translate(850,200)');
+
+    chart.append('use')
+        .attr('href', '#barChartDef');
+
+    var data = [{
+        text: '桌椅松动',
+        value: 100 / 105,
+    }, {
+        text: '启动活门',
+        value: 100 / 105,
+    }, {
+        text: '雷达系统',
+        value: 73 / 105,
+    }, {
+        text: '引气系统',
+        value: 72 / 105,
+    }, {
+        text: '防冰活门',
+        value: 69 / 105,
+    }, {
+        text: '引擎',
+        value: 46 / 105,
+    }, {
+        text: '起落架',
+        value: 42 / 105,
+    }];
+
+    var group = chart.selectAll('.bar')
+        .data(data)
+        .enter()
+        .append('g')
+        .classed('bar', true);
+
+    group.append('text')
+        .text(function (d) {
+            return d.text;
+        })
+        .attr('x', 10)
+        .attr('y', function (d, i) {
+            return (i + 1) * 25;
+        })
+        .attr('fill', '#4ccdfc');
+
+    group.append('rect')
+        .attr('x', 68)
+        .attr('y', function (d, i) {
+            return (i + 1) * 25 - 10;
+        })
+        .attr('width', 105)
+        .attr('height', 10)
+        .attr('fill', '#0c6887');
+
+    group.append('rect')
+        .attr('x', 68)
+        .attr('y', function (d, i) {
+            return (i + 1) * 25 - 10;
+        })
+        .attr('width', function (d) {
+            return d.value * 105;
+        })
+        .attr('height', 10)
+        .attr('fill', '#4ccdfc');
+
+    group.append('text')
+        .text('检修耗时')
+        .attr('transform', 'translate(88,217)')
+        .attr('fill', '#4ccdfc')
+        .attr('font-size', 14)
+        .attr('text-anchor', 'middle');
+};
+
+export default BarChart;