предисловие
В последних проектах есть большой спрос на обработку визуальных данных. Говоря об этом, я полагаю, что многие студенты, как и я, подумают об использовании Echarts для достижения этой цели. Да, Echarts имеет настраиваемую конфигурацию, а также очень подробную документацию по разработке, и его последняя версия была обновлена доv4.3.
Однако это также связано с тем, что документы по разработке Echarts слишком сложны.Для студентов, которые не знакомы с Echarts, может потребоваться много энергии, чтобы найти эффект. Хотя он также оснащен некоторыми официальными примерами, это может быть возможно только для обучения на отдельных конфигурациях, и вам нужно вернуться к соответствующим документам для проверки.Кроме того, вам нужно самим сделать демонстрации, чтобы попробовать эффекты. . . Процесс наступания на яму очень сложен.
Но это также очень полезно. Сегодняшняя статья в основном обобщает некоторый опыт и опыт визуализации данных в сочетании с Echarts за последнее время. На самом деле, чтобы получить «красивую» диаграмму ниже, требуется всего несколько приемов.
Я надеюсь дать некоторое вдохновение нуждающимся студентам, я считаю, что вы также можете настроить свой собственный стиль визуализации данных Echarts.
Выходные данные и v-диаграммы
За период хождения по яме нашел много информации. Наткнулся на недружественный опыт: в некоторых статьях описывается только реализация эффекта, но не упоминается его текущая версия. Когда я попробовал его, я обнаружил, что он не работает, и если мне не повезет, он сообщит об ошибке, что сделало меня очень беспомощным.
Так, во избежание лишних хлопот. Прежде всего, необходимо отметить, что различные конфигурации и их эффекты в этой статье основаны на последней версии Echarts.V4.3осуществленный.
Затем, поскольку проект был создан с помощью Vue, я сопоставилv-chartsдля достижения графического эффекта. v-charts — это компонент диаграммы, основанный на пакете Vue2.0 и Echarts, разработанный и поддерживаемый «Ele.me Front-end». Я чувствую себя довольно хорошо, когда использую его, документация очень понятная, и есть подходящие примеры, которые очень просты в использовании. Его текущая последняя версияv1.19.0.
Обычно используемые диаграммы v-диаграмм: ve-line (линейная диаграмма), ve-histogram (гистограмма), ve-pie (круговая диаграмма), ve-ring (кольцевая диаграмма) и так далее. При использовании одна диаграмма может быть перенесена непосредственно в проект.
import VeLine from 'v-charts/lib/line.common';
Vue.component(VeLine.name, VeLine);
Типичный формат данных атрибутов данных v-charts следующий:
{
columns: ['日期', '访问用户', '下单用户'],
rows: [
{ '日期': '2018-05-22', '访问用户': 32371, '下单用户': 19810 },
{ '日期': '2018-05-23', '访问用户': 12328, '下单用户': 4398 },
{ '日期': '2018-05-24', '访问用户': 92381, '下单用户': 52910 }
]
}
Среди них столбцы представляют собой набор измерений и индикаторов, а большинство диаграмм в v-charts являются одномерными и мультииндикаторными, поэтому первое значение по умолчанию — это измерение, а остальные значения — индикаторы. Кроме того, строки представляют собой набор данных.
Еще один типичный пример комбинации гистограммы и линейной диаграммы.
Его кодовая реализация тоже очень проста, достаточно дополнительно настроить параметр settings, код такой:
<template>
<ve-histogram :data="chartData" :settings="chartSettings"></ve-histogram>
</template>
<script>
export default {
data () {
this.chartSettings = {
axisSite: { right: ['下单率'] },
yAxisType: ['KMB', 'percent'],
yAxisName: ['数值', '比率'],
showLine: ['下单率'],
}
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
Поэтому, если нет жестких требований к настройке, v-charts уже может удовлетворить большинство основных потребностей.
Но если вы хотите добиться эффекта картинки в начале этой статьи, вам также необходимо добавить в v-chartsextendsУсердно работайте над свойствами. расширяется по существу, соответствует документу Echartsэлемент конфигурациивсе свойства в .
Индивидуальный пошаговый тур
Далее, основываясь на базовой конфигурации v-charts, будут представлены некоторые практические советы, которые помогут вам достичь глубоких требований к настройке Echarts.
1. Соответствие цвета
Echarts предоставляет цвета для настройки цветов, которые в качестве результата принимают массив. Вот цветовая схема пользовательского интерфейса от Miss Product, которую уже можно применять к большинству сценариев.
код показывает, как показано ниже:
colors: ['#60ACFC', '#35C5EB', '#4DBECF', '#65D5B2', '#5BC4A0', '#9DDD81', '#D4ED58', '#FFDB43', '#FEB54E', '#FF9D68']
2. Пунктирная линия
Сплошная линия оси X на v-диаграммах выглядит немного жесткой. Вы можете изменить ее на пунктирную линию, и она будет выглядеть намного чище. В частности, вы можете настроить свойство yAxis в setOption.
yAxis (item) {
item[0].splitLine = Object.assign({}, {
lineStyle: {
color: '#e1e2e2',
type: 'dashed'
}
});
return item;
}
Здесь используется сокращенный режим функции в es6. Элемент относится к оси Y, почему это массив? Это связано с тем, что при нормальных обстоятельствах один компонент сетки декартовой системы координат может иметь не более двух левой и правой осей Y. Тогда item[0] ссылается на наиболее часто используемую ось Y слева, а item[1] ссылается на ось Y справа, когда есть двойные оси.
Суть здесь в том, чтобы установить lineStyle в разделе splitLine, эффект подобен первой картинке в начале:
Конечно, вы также можете настроить пунктирную линию всплывающей подсказки, эффект будет следующим:
Просто настройте lineStyle осиПоинтер под всплывающей подсказкой, код очень прост:
tooltip : {
axisPointer: {
lineStyle: {
color: '#e1e2e2',
type: 'dashed',
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 5
}
}
}
3. Укладка и площадь
Диаграммы с накоплением и диаграммы с областями на первый взгляд легко спутать, на самом деле это два разных эффекта.
Следующий элемент данных в диаграмме с накоплением размещается поверх предыдущего элемента, например:
Его можно настроить, установив свойство расширения, предоставляемое v-charts. Как я уже говорил, это по сути setOption в настройке Echarts.
Мы установили эффект наложения на гистограмму и линейную диаграмму соответственно.Можно обнаружить, что значения e.stack задаются отдельно, иначе значения будут снова наложены друг на друга.
<ve-histogram :extend="chartExtend"></ve-histogram>
...
this.chartExtend = {
series: (v) => {
Array.from(v).forEach((e, idx) => {
if (e.type === 'bar') {
e.stack = 'bar';
}
if (e.type === 'line') {
e.stack = 'line';
}
};
},
...
};
Диаграмма с областями часто используется в линейной диаграмме, чтобы подчеркнуть контрастность определенной области.
Аналогично настройте в chartExend:
<ve-line :extend="chartExtend"></ve-line>
...
this.chartExtend = {
series: (v) => {
Array.from(v).forEach((e, idx) => {
// 将指定条件下的折线设置为面积图
if (...) {
e.areaStyle = 'line';
}
};
},
...
};
4. Пользовательская легенда
Легенда в элементе конфигурации Echarts также называется легендой. Через него можно визуально увидеть распределение данных, соответствующее разным цветам. В то же время он также включает взаимодействие с щелчком.Если вы не хотите какое-то время заботиться об элементе данных, вы можете щелкнуть соответствующую легенду, чтобы временно скрыть ее, щелкнуть еще раз, и она будет повторно отображена.
Я столкнулся с еще одним требованием: в легенде гистограммы по умолчанию должны отображаться данные текущего дня, а при нажатии на столбец определенного дня данные в легенде должны меняться соответственно. Цель требования состоит в том, чтобы позволить пользователю более интуитивно понимать данные каждого дня.Когда ему нужно увидеть сравнение данных за два дня, ему нужно только щелкнуть столбец, чтобы переключить данные. Эффект следующий:
Если вы хотите увидеть данные за 16 сентября, нажмите на соответствующий столбец, данные в легенде обновятся, соответственно изменится и время в левом верхнем углу:
Идея реализации в основном такова:
- Получите конкретное время дня с помощью метода обратного вызова события клика.
- Отформатируйте время в левом верхнем углу.
- Снова задайте конфигурацию расширенной легенды.
- В легенде пользовательский шаблон возвращается функцией форматирования для отображения текста и чисел.
- Конкретный метод заключается в фильтрации данных в chartData.rows по времени в верхнем левом углу, чтобы найти данные за соответствующий день.
- Настройте пользовательские шаблоны для вывода стилизованных результатов.
Конкретный метод сопоставления данных дня, потому что бизнес-логика другая, структура данных тоже будет другой, поэтому я не буду здесь вдаваться в подробности. Я разместил метод написания обратного вызова события и код вывода пользовательского шаблона для справки:
<ve-histogram :data="chartData" :extend="chartExtend" :events="{ click: handleChartEvents }"></ve-histogram>
...
handleChartEvents (e) {
const date = e.name;
// 设置左上角的时间（带格式化），这里不再展开
this.setCurrentDate(date);
this.setChartExtend();
},
...
setChartExtend () {
this.chartExtend = {
legend: {
formatter: (name) => {
// currentNumber 是已经匹配到的当日数据
const result = [
`{a|${name}}`,
`{b|${currentNumber}}`
];
return result.join('\n');
},
textStyle: {
height: 42,
rich: {
a: {
fontSize: 12,
align: 'left',
padding: [0, 10, 15, 0]
},
b: {
fontSize: 24,
align: 'left',
padding: [0, 10, 0, 0],
lineHeight: 40,
width: 60
}
}
},
// 图例标记的图形宽度
itemWidth: 14,
// grid 距离整个容器顶部的高度
grid: {
top: 120
}
},
...
};
},
...
В обратном вызове события click вы можете получить конкретное имя времени, а затем передать его методу setCurrentDate для установки формата времени и отрисовки его на интерфейсе, в то же время это также является основой для последующего сопоставления данных дня.
Пользовательский шаблон, собранный в методе форматирования легенды, имеет два стиля a и b соответственно.Вы также можете выбрать другие имена стилей, но не забудьте соответствующим образом установить стиль в расширенном объекте textStyle.
rich — это пользовательский способ написания стилей форматированного текста, который чем-то похож на обычный css, но способ написания стилей, таких как отступы, немного отличается, и его нелегко отладить. Цифры в приведенном выше коде являются результатом многих доработок.
Последний itemWidth устанавливает ширину цветового блока, чтобы сделать его квадратным и более красивым. Из-за стиля цифр, добавленных в легенду, общая высота становится больше. Верхняя часть сетки может регулировать расстояние от основной области рисования до верхней части всего контейнера, чтобы она была далека от легенды, а также могла оставлять более разумную пустую высоту.
Кроме того, для диаграмм с большим количеством данных, если все данные отображаются сразу после загрузки, это будет беспорядочно.
В этот раз мы подумали, можем ли мы отображать только один тип данных? Как следующее:
Здесь вам нужно использовать выбранный атрибут легенды. Это объект, означающий легенду выбранной таблицы состояний. Использование простое:
<ve-line :extend="chartExtend"></ve-line>
...
setChartExtend () {
this.chartExtend = {
legend: {
formatter: (name) => {
return `{a|${name}}`;
},
textStyle: {
// 这里的 rich 样式，是为了四等分的布局
rich: {
a: {
width: 240,
height: 20,
lineHeight: 22,
align: 'left'
}
}
},
width: 1090,
// 图例标记的图形宽度
itemWidth: 14,
selected: {
'T1-第7日': false,
'T1-第14日': false,
'T1-第30日': false,
'T2-第7日': false,
'T2-第14日': false,
'T2-第30日': false,
'T3-第7日': false,
'T3-第14日': false,
'T3-第30日': false,
}
},
...
};
}
Функция форматирования в нем возвращает стилизованный текст, который делит макет на четверти. Затем установите выбранное, чтобы скрыть данные, которые не нужно отображать по умолчанию.
Обратите внимание, что ключ в выбранном объекте является конкретным именем индикатора и не может быть заменен псевдонимом, иначе эффект не будет получен.
5. Мини-карта
Когда я впервые получил требование реализовать мини-карту, первое, что пришло мне в голову, это появление следующей картинки:
Это официальный пример эффектов различных функций плавности, каждая из которых имеет компонент заголовка.
Исследованообразец кодаПозже было обнаружено, что принцип его реализации заключается в следующем: имитация непрерывного увеличения входного значения по оси X и вывод соответствующего значения по оси Y с помощью различных функций эффектов для достижения различных эффектов.
К сожалению, это не может быть адаптировано к нашим потребностям. Мы хотим реализовать мини-диаграмму тенденций с одними данными без каких-либо осей, но тенденция данных не обязательно увеличивается линейно. Однако, к счастью, из него можно позаимствовать практику сокрытия топоров. Конкретная реализация все еще должна установить расширение, код выглядит следующим образом:
<ve-line :data="chartData" :extend="chartExtend" width="120px" height="40px">
...
this.chartExtend = {
xAxis: {
show: false,
},
yAxis: {
show: false,
},
legend: {
show: false
},
grid: {
show: true,
left: 0,
top: 5,
width: '100%',
height: '100%',
borderWidth: 0,
backgroundColor: '#fff',
},
series: (v) => {
Array.from(v).forEach((e, idx) => {
e.symbol = 'circle';
e.symbolSize = 2;
e.areaStyle = { opacity: 0.3 };
});
return v;
},
tooltip: {
formatter: (params) => {
let result = '';
params.forEach(param => {
let str = `${param.marker}${param.value[0]} ${param.value[1]}<br>`;
result += str;
});
return result;
}
}
};
Поскольку это мини-диаграмма, ее необходимо отрегулировать до контролируемого размера в макете. Соответственно, верхнее и левое свойства сетки также могут помочь нам в тонкой настройке. Ось X, ось Y, легенда — все это скрыто. Наконец, для поддержки всплывающей подсказки ее структура форматирует. Окончательный эффект рендеринга выглядит следующим образом:
Просто потому, что размер мини-диаграммы достаточно мал, она больше подходит для некоторых важных данных для периодической интерпретации тренда и может быть расположена рядом с важными данными. Это также делает компоновку интерфейса более скоординированной.
6. Однолинейная двойная ось
Когда на диаграмме есть две оси, существует высокая вероятность того, что шкалы двух осей Y будут несовместимыми.
Подумайте и об этом, причина установки двойной оси в том, что разница между их значениями слишком велика. Если вы не настроите двойные оси, некоторые данные не будут видны не потому, что они не визуализируются, а потому, что они слишком малы, в результате чего они будут «перегружены» данными с большими значениями.
Одним из решений является самостоятельное определение максимального, минимального и интервала оси Y. Потому что система больше не будет автоматически рассчитывать адаптацию.
yAxis:[
{......},
{
type: 'value',
name: '销售额(元)',
min: 0,
max: max, // 计算最大值
interval: Math.ceil(max / 5), // 平均分为5份
axisLabel: {
formatter: '{value}'
}
]
Эта схема может перекрывать шкалы двух осей для достижения эффекта «одной линии». Однако, поскольку вам придется рассчитывать самостоятельно, это немного хлопотно, и количество копий, возможно, придется скорректировать из-за красоты интерфейса. Если единицы двух осей несовместимы, например число слева и процент справа, это также очень проблематично.
Итак, я подумал о «ленивом» способе. Так как вам нужно показать только "одну строку", то скройте вторую строку. На самом деле, хотя это и "двойная линия", они на самом деле довольно близки, и с точки зрения эффекта это не имеет большого значения. .
Схема реализации тоже очень проста, помните, как раньше ставился «пунктир»?
yAxis (item) {
item[0].splitLine = Object.assign({}, {
lineStyle: {
color: '#e1e2e2',
type: 'dashed'
}
});
return item;
}
где item[0] представляет наиболее часто используемую ось Y слева. Тогда правая сторона, естественно, является item[1], просто скройте ее:
yAxis (item) {
item[0].splitLine = Object.assign({}, {
...
});
item[1].splitLine = {
show: false
};
return item;
},
Разве это не просто? На самом деле, зная правильный метод, его по-прежнему легко реализовать. Но зачастую поиск «правильного пути» отнимает много сил.
Суммировать
Сегодня я представил несколько индивидуальных решений Echarts, большинство из которых представляют собой советы, извлеченные из практической работы, в надежде помочь нуждающимся учащимся. Если вы считаете, что эта статья неплохая, пожалуйста, нажмите «Мне нравится» или «Подписаться», чтобы больше нуждающихся студентов могли ее увидеть, спасибо за вашу поддержку!
Внимательные студенты могут спросить: как реализована «маленькая иконка» на картинке в начале этой статьи? В статье вроде не описано.
да. Из-за нехватки места я напишу отдельную статью, чтобы рассказать о индивидуальном решении для «маркировки».Приглашаем вас присоединиться к нам в это время, спасибо!
PS: Добро пожаловать, чтобы обратить внимание на мою общедоступную учетную запись «Super Brother Front-end Small Stack», чтобы обменяться идеями и технологиями.