Публичный аккаунт WeChat:[Большая передняя станция]
Обратите внимание на большую переднюю станцию. Вопросы или предложения, пожалуйста, оставьте сообщение в публичном аккаунте.
предисловие
Для нашей фронтенд-разработки, особенно студентов в области визуализации данных, дляechartsМожно сказать, что его использование является обыденным,echartsЭто может помочь нам легко отображать данные с помощью различных графиков, чтобы улучшить читаемость данных. Но в то же время я также обнаружил, что большинство моих одноклассниковechartsПонимание, конечно, не глубокое, потому что большую часть времени бизнес-требования могут быть не особенно высокими, требуя от программистов только реализации некоторых простых столбчатых диаграмм, линейных диаграмм или круговых диаграмм, это простоechartsМожно сказать, что мех — это ручная работа. Я все же предлагаю вам изучить их глубже и включить эти продвинутые операции в свой арсенал, чтобы быть готовыми.
На прошлой работе мне пришлось столкнуться с некоторыми каверзными требованиями, в то время я часто делал какие-то проекты, связанные с визуализацией данных, такие как большие визуальные экраны и т. д. Требования к эффекту интерфейса были относительно высокими. в это время некоторое время, чтобы улучшить себяechartsНа уровне было много достижений, поэтому вот краткое описание некоторых продвинутых случаев.
echartsОфициальный случайgallery.echartsjsновый URLпортал
расширенные операции
Гистограмма стерео: pictorialBar
Нажмите, чтобы увидеть пример конфигурации
pictorialBar(пиктограмма) естьechartsИспользование пиктограммы на более высоком уровне можно представить так: сначала это полоса, но полосы полосы не отображаются. Мы называем эти столбы опорными столбами.reference bar)», чтобы найти и отобразить различные пиктограммы (включая изображения) в соответствии с исходным столбцом.
В этом примере конфигурации мы использовали четыре конфигурации пиктографических столбцов, которые представляют собой верхний и нижний эллипсы цилиндра и кольцевое украшение внизу, а затем настроили цвет градиента гистограммы и т. д. Эти конфигурации можно использовать для справки.
Столбчатая диаграмма полигонов: путь
Нажмите, чтобы увидеть пример конфигурации
pathИспользование можно назвать моим исследованиемechartsСамым большим преимуществом является то, что конфигурация проста, практична и понятна. Я чувствую, что могу использовать ее для достижения самых разных целей. Я использовал ее.svgстудентов дляпуть путьНеудивительно, что echarts также может использовать путь для реализации некоторой графики, а затем применять ее в конфигурации.
Настоящий вариант осуществления состоит в том, чтобы достичь гистограммы шестиугольника спроса, мы сначала определим некоторыеpathПуть, если вы не можете написать путь самостоятельно, вы можете попросить коллег по пользовательскому интерфейсу помочь экспортировать его.svg, то вы можете получить этоpath, то его можно использовать как пиктограммуsymbolSizeа такжеsymbolOffsetвнести коррективы.
Оптимальное решение по соотношению год-к-году: путь
Нажмите, чтобы увидеть пример конфигурации
Такие данные, как год к году и месяц к месяцу, довольно распространены в бизнесе.echartsРазработчики могут напрямую использовать диаграмму с двумя столбцами или отображение гиперболической диаграммы, но я предлагаю, чтобы вы научилисьpathИспользование стрелки, я думаю, должно быть оптимальным решением, лучшая читабельность
Поскольку есть две тенденции роста и падения, мы определяем два сегмента в конфигурации.path, а затем судить, используем ли мы рост или падение в соответствии с положительными и отрицательными значениями данныхpath, образуя одинpathМассивы используются для обхода.
Использование функции обратного вызова элемента конфигурации: обратный вызов
Нажмите, чтобы увидеть пример конфигурации
Использование функции обратного вызова может гибко решить большинство бизнес-требований, таких как отображение другого стиля при превышении определенного порога, который мы можем изменить в функции обратного вызова.echartФункция обратного вызова обычно содержит несколько параметров обратного вызова, которые можно распечатать и просмотреть. Примеры:
Затем вы можете вызывать параметры по удобным причинам, чтобы принимать решения для удовлетворения потребностей бизнеса.
напиши в конце
Вы входите в 10%, если нет, тренируйте руки больше, вы будете
echartsЕсть еще много хороших моментов, нам нужно учиться и исследовать шаг за шагом, если вы считаете, что это полезно для вас, пожалуйста, поставьте лайк и соберите его!
~~ спасибо за просмотр
【Поделиться, лайкнуть, посмотреть】Три ссылки, пусть к нам присоединится больше людей