Используйте простой график echarts для рисования блок-схем задач

Ресурсы изображений

1. Знакомство с электронными диаграммами

  1. Выберите версию, которую необходимо загрузить, на официальном интерфейсе загрузки веб-сайта. В соответствии с требованиями разработчика к функциональности и объему мы предоставляем различные пакетные загрузки. Если у вас нет требований к объему, вы можете напрямую загрузить полную версию. Среда разработки рекомендует загружать версию исходного кода, содержащую общие сообщения об ошибках и предупреждения.
  2. Загрузите последнюю версию релиза на GitHub ECharts.Последнюю версию библиотеки echarts можно найти в каталоге dist в разархивированной папке.
  3. Получить echarts через npm, npm install echarts --save, подробности см. в разделе «Использование echarts с webpack».
  4. Представленный cdn, вы можете найти последнюю версию ECharts на cdnjs, npmcdn или отечественном bootcdn.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

Я напрямую npm echarts в проекте реакции, Таким образом, график, который необходимо использовать, загружается непосредственно по запросу в файл ввода.

// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入思维图
import  'echarts/lib/chart/graph';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

2. Установите базовый холст

1. Подготовьте элемент dom для холста, задайте ширину и высоту

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

2. Получить элемент dom в js и инициализировать холст

 var myChart = echarts.init(document.getElementById('main'));

После этого можно заливать данные через setOpton echarts.

3. Анализ данных

Данные, которые необходимо импортировать, разделены на две части:

  • данные узла узла
  • linkДанные маршрута

Значение ссылки из бэкенда импортируется в соответствии с форматом, официальный пример выглядит следующим образом:

links: [{
            source: '节点1',
            target: '节点3'
        }, {
            source: '节点2',
            target: '节点3'
        }, {
            source: '节点2',
            target: '节点4'
        }, {
            source: '节点1',
            target: '节点4'
        }]

Вставьте серверные данные в набор ссылок:

let links = [];
for(var i in data.relation){
  links.push({
    source : data.relation[i].source,
    target : data.relation[i].target
  });
}

Данные узла должны давать координаты узлов для формирования окончательного холста.Эта координата должна быть рассчитана в соответствии с нашим фактическим уровнем данных и номером каждого уровня.

В-четвертых, вычислить координаты узла

Во-первых, фиксирован размер холста, здесь я использую ширину 600 пикселей и высоту 400 пикселей. Холст основан на верхнем углу в качестве начала координат. Допустим данные что уровень 5, а число от 1 до 5 это 2, 3, 4, 1, 1 Процесс расчета выглядит следующим образом:

  • Сначала рассчитайте ширину каждого уровня, то есть используйте 600/level (уровень), тогда мы здесь 600px/5 = 120px
  • Абсцисса узла получается умножением единицы на 120px, а абсцисса уровня от 1 до 5 равна 120, 240, 360, 480, 600
  • Далее вычисляем базовые ячейки ординаты каждого уровня, например, если уровень 3 уровня имеет 4 узла, то базовая ячейка n ординаты равна 400/(4*2) = 50
  • Если в уровне используется только один узел, ордината узла равна n, в противном случае формула расчета ординаты узла равна n * (2 * j - 1), где n — базовая ячейка ординаты, а j - это узел на уровне индекса индекса в массиве из 3
  • После получения массива абсцисс и массива ординат узла вставьте его в набор узлов
data2.push({
    name : data.tasks[i].alias,
    value : data.tasks[i].task_name,
    y: 0,
    x: 600-(120 * data.tasks[i].level),
    itemStyle:{
      normal:{color: color}
    }
  })
}

5. Рисование иконок

Используйте метод echarts setOption для рисования значка:

myChart.setOption({
    title: {
        text: ''
    },
    tooltip: {},
    nodeScaleRatio: 0,
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    series : [
        {
            type: 'graph',
            layout: 'none',
            symbolSize: 30,
            roam: false,
            label: {
                normal: {
                    show: true
                }
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
                normal: {
                    textStyle: {
                        fontSize: 20
                    }
                }
            },
            data: data2,
            // links: [],
            links: links,
            lineStyle: {
                normal: {
                    opacity: 0.9,
                    width: 1,
                    curveness: 0
                }
            }
        }
    ]
});

Вы также можете добавлять события к узламЗдесь выберите событие щелчка, чтобы отобразить сведения об узле, код выглядит следующим образом:

myChart.on("click", function (param){ 
  if(param.dataType == "node"){
    _this.setState({visible: true, param: param.data.value});
  }
});

Если вы хотите использовать здесь метод реакции this.setState({}); для обновления состояния компонента, не забудьте присвоить это переменной перед setOption, потому что это указывает на myChart в методе click здесь.

let _this = this;

Готовое изделие такое

blockchain

Готово, пополнение! салют! ! !

Категории