Эта статья немного длинная и содержит много контента Большой парень может выборочно проверить в соответствии с каталогом Новички могут читать шаг за шагом
Добавить статью:Семейная корзина Vue + Echarts + карта Baidu, создание системы визуализации данных ([продолжение] интерфейс)
1. Введение
1.1 Бизнес-сценарий
Внезапно я получил продукт, который называется системой мониторинга данных. Линейные графики, гистограммы, карты, похожие на способ визуализации данных.
Я никогда не был в контакте сEcharts, а потом 2 недели ждать результата, немного паники 😂😂
1.2 Бизнес-анализ
Взгляните на требования
Поддержка имени пользователя и пароля для входа в систему, данные одного измерения отображаются по умолчанию, а затем щелкните, чтобы перейти к данным второго измерения, а затем щелкните, чтобы войти в отображение данных третьего измерения.
примерно прикинул. . .
- Строительство системы
vue-clivuexзаписать данные для входаvue-routerМаршрут прыжок- Трехмерные страницы, извлечение общих компонентов
- Разработка отдельных компонентов
- Настройте стиль, увеличьте пользовательский интерфейс
- Добавить данные фонового интерфейса
- оптимизировать отображение
- тестовое задание
- онлайн
Конечно, это не должно быть сделано в течение 2 недель. Шаг 6 должен быть завершен.
По сравнению с компанией я фронтенд, и никогда к ней не прикасался.Echarts, без обсуждения вопроса. . .
Я до сих пор не могу не пожаловаться 😒😒😒
1.3 Отображение эффектов
Здесь перечислены стили для первой страницы измерения. Пожалуйста, не обращайте внимания на текст, ха-ха.
2 Установка системы
Тукао возвращается в Тукао, работа еще предстоит. 😎
Поскольку я хорошо знаком с vue, я по-прежнему предпочитаю использовать для этого ведро семейства vue. Эта часть может относиться кvue build
2.1 Установка среды узла
- Загрузить и установить
nodeсреды, перейдите непосредственно на официальный сайт для загрузкиnode.js
После установки его можно запустить из командной строки
node -vnpm -vПроверьте успешность установки и версию
2.2 Установите проект Vue
2.2.1 Установка vue
Официальная документация:vuejs
Здесь мы используемnpmПуть
npm i vue
2.2.2 Установка Vue CLI
Официальная документация:vue CLI
npm i -g @vue/cli
После установки вы можете получить доступ к командам vue из командной строки. Вы можете проверить его версию с помощью этой команды.
vue -V
2.2.3 Создать проект
При установке здесь обратите внимание на установку, которую мы хотим использовать.vuex,vue-router, другие могут быть добавлены по мере необходимости.
- метод первый
vue create hello-world
Обратитесь к официальному сайту здесь для подробного ознакомления. Ссылаться на:vue create
- Способ второй
Используйте графический интерфейс
vue ui
Интерфейс содержит китайский язык, которым легко управлять. Ссылаться на:vue ui
2.2.4 Установите плагин
- метод первый
Самый прямой и рекомендуемыйnpm i xxx
Вот введение-S -D -gразница
- Файл npm i -S xxx записывается в зависимостях, используется для подключаемых модулей, используемых при разработке проекта, и будет выпущен в производственную среду, такую как пользовательский интерфейс, JS и т. д.
- Файл npm i -D xxx записывается в devDependencies, который используется для подключаемых модулей инженерной поддержки, и не будет выпущен в производственную среду, например gulp и другие инструменты сжатия и упаковки.
- npm i -g xxx Установить глобально, например vue, ncu и т. д. Каталог установки: C:\Users\Users\AppData\Roaming\npm.
- Способ второй
vue uiГрафический интерфейс содержит несколько плагинов, которые можно установить по клику, но не обязательно последней версии.
В то же время он будет представлен в приветствии. Другие методы ничем не отличаются.
2.3 Установите Echarts
Здесь для удобства используем
npmПолные цитаты и отдельные цитаты можно сделать позже, чтобы упростить проект.
npm i echarts -S
затем вmain.jsдобавлено в
Здесь рекомендуется настроить заранееechartsстиля и внедрены в проект. Официальный пользовательский адрес:theme-builder
На странице мы можем процитировать следующее:var myChart = this.$echarts.init(document.getElementById("myid"),'temp')
myidэто то, что мы показываемechartsизid.
tempэто наш индивидуальный стиль, и официальный предоставляет несколько примеров стиля, вы можетеnode_modules\echarts\themeнайти в.
2.4 Установите element-ui
Здесь для удобства используем
npmПолные цитаты и отдельные цитаты можно сделать позже, чтобы упростить проект.
npm i element-ui -S
затем вmain.jsдобавлено в
2.5 Установите карты Baidu
Как правило, Vue может использовать карты Baidu двумя способами.
-
Один из них - применить его, как официальный сайт. Такие как:BMap
-
Второй заключается в использовании
vue-baidu-map
В любом случае вам необходимо подать заявку на получение учетной записи и ключа. Адрес приложения:Ключ карты Baidu (ak)
Здесь я использую второй.документация vue-baidu-map
npm i vue-baidu-map -S
затем вmain.jsдобавлено в
xxxxxxxxВведите здесь ключ, на который вы подали заявку.
На странице обратитесь к документации, вы можете использовать теги<baidu-map/>звонить.
2.6 Стиль инициализации
cssПроще говоря, инициализация стилей предназначена для унификации различных браузеров.
Здесь я используюnormalize.css
После загрузки вmain.jsдобавлено в
Основные приготовления сделаны, и следующим шагом является конкретный код.
3 Строительство проекта
3.1 роутер, vuex
Я создал новый здесьrouter.js,store.js, примерно так:
Ах да, определение маршрутизации здесь для удобства просмотра, но оно все же определяется в соответствии с бизнесом.
здесьrouter.beforeEachЗащита маршрутизации используется для проверки входа в систему.
Тогда мыmain.jsпроцитировано в.
Для получения дополнительной информации, пожалуйста, обратитесь к официальной документации:Vue Router Vuex
3.2 Страница входа
Страница входа — это не что иное, как отправка формы из-за суждения в маршрутизации.user.id. Итак, давайте сохраним его, а затем перейдем на страницу индекса.
Вот только один способ, вы также можете использоватьCookieа такжеSession
3.3 Индексная страница
Страница анализа разделена на 2 части
- Первая частьголова
- Второй секторосновной корпус
Мы повторно используем заголовок как компонент.
Для повторного использования компонентов обратитесь к официальной документации:Talent.v UE JS.org/V2/expensive/co…
3.4 титульная страница
Голова относительно простая, помимо некоторых дисплеев есть еще и отображение текущего времени.
Здесь мы используемsetInterval, каждую 1 секунду, чтобы получить текущее время, назначенное вамv-modelПросто сделай это.
Так же при выходе со страницы сбрасываем таймер.
Здесь нам нужноVueизЖизненный циклИметь некоторые знания.
Метод может получить текущую привязку ко времени:data-module.js
3.5 Главная страница
Вот анализ страницы, которая в основном разделена на 3 части.
- осталось, который содержит 2 линейных графика.
- середина, который содержит рисунки и карты.
- правильно, который содержит гистограммы и таблицы.
Далее я в основном представлю некоторые из вещей, которые я исследовал за последние две недели.
EchartsКонфигурация, подходящая для новичков, большие парни, легкий спрей.
Ее нужно часто читатьЭлемент конфигурации Echartsа такжеAPIохватывать
3.5.1 Основные электронные диаграммы
Здесь указан основной метод написания рендеринга, а конкретную графику и данные нужно только изменить.optionВот и все.
<template>
<div id="myecharts" class="myecharts">
</template>
<script>
export default {
mounted(){
this.drawECharts()
},
methods:{
drawECharts(){
// temp 是我们的自定义样式，上面安装Echarts时有介绍
var myChart = this.$echarts.init(document.getElementById("myecharts"),'temp')
var option = {}
option = {
// 吧啦吧啦 一堆配置
}
// 执行渲染图形和数据的操作
if (option && typeof option === "object") {
myChart.setOption(option, true)
}
}
}
}
</script>
<style>
// 一定要设置大小，不然不出来，这玩意和canvas一样
.myecharts{
width : 500px;
height : 300px;
}
</style>
3.5.2 Линейный график
После большой практики вы найдете роль каждой конфигурации и ее параметров.
option = {
// 提示框（就是鼠标放上去后出现的框）
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
// 右上角的组件，用于说明，也可进行点击筛选
legend: {
align : 'right',
x : 'right',
top : 25,
selectedMode : 'single', // 我这里设置的单选模式
data:['好','坏'] // 显示的第一项和第二项，这里的颜色是根据自定义主题的颜色顺序来定的
},
// x、y轴显示一些设置，比如刻度颜色显示什么的，可在自定义主题设置一部分
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
// 具体配置项，根据具体项目查看官网配置项说明
series: [
{
name : '好',
data: [150, 132, 201, 534, 290, 530, 820],
type: 'line',
smooth: true, // 是否平滑曲线
areaStyle: {},
},
{
name : '坏',
data: [82, 93, 90, 93, 129, 333, 432],
type: 'line',
smooth: true,
areaStyle: {},
}
]
}
// 查看Echarts的API，我们需要显示默认的一些数据，配置如下
// 默认显示坏的数据
myChart.dispatchAction({
type: 'legendSelect',
name: '坏',
})
// 默认显示第7个数据
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 1,
dataIndex: 6,
})
Предварительный просмотр:
3.5.3 Гистограмма
Здесь мы используем бипилос непосредственно для демонстрации.
Поскольку для имен и номеров требуются функции подсказки и щелчка, они не используются.echartsизyось.
иначеformatterПриходится их кучу писать.Хоть я и пользовался кастомным,но сначала пользовался им.formatter.
Один и тот же дисплей может быть достигнут, но не может быть манипулирован таким, как намеки на мыши и щелчки мыши.
<div class="left">
<div v-for="it in its1" :key="it.id">
<el-tooltip class="item" effect="light" placement="bottom-start">
<div slot="content">名称：{{it.name}}<br/>个数：{{it.num}}</div>
<div class="name" @click="go"> {{ it.name.substring(0,4)+'...' }}</div>
</el-tooltip>
<div class="num">{{ it.num }}</div>
</div>
</div>
<div class="right">
<div v-for="it in its2" :key="it.id">
<el-tooltip class="item" effect="light" placement="bottom-start">
<div slot="content">名称：{{it.name}}<br/>个数：{{it.num}}</div>
<div class="name" @click="go"> {{ it.name.substring(0,4)+'...' }}</div>
</el-tooltip>
<div class="num">{{ it.num }}</div>
</div>
</div>
<div id="myecharts" class="myecharts">
cssЭто не размещено здесь, эффект состоит в том, что эти 2 строки просто размещены перед 2-й строкой столбца.
Далееechartsконфигурация.
option = {
// 鼠标提示框
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
// 右边显示
legend: {
selectedMode:false,
data: ['好', '坏'],
top:5,
right:8,
},
// 两个图坐标的位置
grid: [
{left: '16%', top:'10%', width: '22%', height: '86%'},
{left: '65%', top:'10%', width: '22%', height: '86%'}
],
// 两个图x轴的设置，这里的gridIndex就是个序号，用于区分
xAxis: [
{gridIndex : 0, show : false},
{gridIndex : 1, show : false},
],
// 两个图y轴的设置，注释的部分是用echarts本身的y轴来显示名称和数量的
yAxis: [
{
gridIndex: 0,
type: 'category',
show : false,
data : ['广东/12','杭州/13','北京北京/14','天津/16'],
// axisLabel: {
// formatter : function(value){
// let arr = value.split('/')
// return '{a|'+arr[0]+'}\n{b|'+ arr[1]+'}';
// },
// rich: {
// a: {
// color : '#ffffff',
// lineHeight : 19,
// fontSize : 14,
// align: 'right',
// },
// b:{
// fontSize : 18,
// lineHeight : 19,
// fontWeight : 'bold',
// align: 'right',
// fontFamily : 'Digital',
// }
// }
// }
},
{
gridIndex: 1,
show : false,
type: 'category',
data : ['海南/12','三亚/13','哈尔滨/14','西双版纳/16'],
// axisLabel: {
// formatter : function(value){
// let arr = value.split('/')
// return '{a|'+arr[0]+'}\n{b|'+ arr[1]+'}';
// },
// rich: {
// a: {
// color : '#ffffff',
// lineHeight : 19,
// fontSize : 14,
// align: 'right',
// },
// b:{
// fontSize : 18,
// lineHeight : 19,
// fontWeight : 'bold',
// align: 'right',
// fontFamily : 'Digital',
// }
// }
// }
},
],
// 渲染图形和数据，bar是柱状图
// barWidth 柱状的宽度
// 两类两套，所以有4组数据，使用xAxisIndex、yAxisIndex来区分。
series: [
{
name: '好',
type: 'bar',
barWidth : 5,
barMinHeight : 5,
barGap : '100%',
xAxisIndex: 0,
yAxisIndex: 0,
data: [0, 3489, 9022234, 922228],
label: {
normal: {
position: 'right',
show: true
}
},
},
{
name: '坏',
type: 'bar',
barWidth : 5,
barMinHeight : 5,
xAxisIndex: 0,
yAxisIndex: 0,
data: [0, 2438, 3300, 1594],
label: {
normal: {
position: 'right',
show: true
}
},
},
{
name: '好',
type: 'bar',
barWidth : 5,
barMinHeight : 10,
barGap : '100%',
xAxisIndex: 1,
yAxisIndex: 1,
data: [8203, 3489, 9034, 222],
label: {
normal: {
position: 'right',
show: true
}
},
},
{
name: '坏',
type: 'bar',
barWidth : 5,
barMinHeight : 5,
xAxisIndex: 1,
yAxisIndex: 1,
data: [445, 2438, 3300, 555],
label: {
normal: {
position: 'right',
show: true
}
},
},
]
}
Предварительный просмотр:
3.5.4 Таблицы
tableя использовал здесьelement-uiПлюс изменить пользовательский интерфейс по умолчаниюcssи полосы прокруткиcss.
Один пункт указан здесь, другие пишутся аналогично.
<el-table
:data="tableData"
height="252"
style="min-width: 100%;">
<el-table-column
prop="date"
min-width="12"
header-align="center"
label="时间">
<template slot-scope="scope">
<template v-if="scope.row.if == '1'">
<img src="../../assets/img/new.png"/>
<div style="color:#E63136;margin-top:-27px;margin-left:35px;">
{{scope.row.date}}
</div>
</template>
<template v-else>
<div style="margin-left:35px;">
{{ scope.row.date }}
</div>
</template>
</template>
</el-table-column>
</el-table>
- стиль пользовательского интерфейса
UI cssМодификация, здесь я использовал кастомный шрифт, полная копия не работает.
Остальные пункты настройки не поясняются, включается F12, можно играть невзначай.
.el-table thead {
color: #FFFFFF;
}
.el-table {
color: #00A5F6;
font-family: 'Regular';
background-color: rgba(0, 0, 0, 0.03);
th {
padding: 2px 0;
background-color: #003260;
}
th.is-leaf {
border-bottom: 0px solid #EBEEF5;
}
tr {
background-color: rgba(0, 0, 0, 0.03);
}
td {
border-bottom: 1px solid #2c3547;
padding: 2px 0;
}
.el-table::before {
height: 0px;
z-index: 0;
background-color: #2c3547;
}
}
- стиль полосы прокрутки
Не стесняйтесь изменить его и увидеть эффект, Google Chrome 😅
/* scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 1px;
background-color:transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #adabab;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background:#394d63;
}
Предварительный просмотр:
3.5.5 Карта Байду
vue-baidu-map Документация
<baidu-map
:center="map.center" // 地图中心经纬 {lng: 114.023598, lat: 33.589299}
:scroll-wheel-zoom="true" // 地图是否滚轮缩放
:zoom="map.zoom" // 默认地图尺寸
:mapStyle="mapStyle" // 地图样式
class="baidumap"> // 地图宽高
<template v-for="(it,index) in ms"> // 标点
<bm-marker
:key="it.id"
:position="it.position" // 标点位置
@click="markclick(it,index)" // 标点点击事件
@mouseover="markover(it,index)" // 鼠标移动到标点上的事件
:icon="it.if? iocn:newincon" // 标点的样式
@mouseout="markout(it,index)"> // 鼠标从标点移走的事件
<bm-info-window
:show="it.show" // 标点提示框的显示true/false
:position="it.position"> // 提示框坐标
<p v-text="it.mess"></p> // 提示框内容
</bm-info-window>
</bm-marker>
</template>
</baidu-map>
Предварительный просмотр:
3.5.6 Векторная карта
Типы векторных карт Echarts:
-
type:'scatter'Точечная пузырьковая диаграмма, которая отображает точки на карте с различной степенью цвета. -
type:'effectScatter'Точечная диаграмма с анимацией эффекта пульсации -
type:'map'Визуализация данных для географических областей -
type:'lines'Визуализация карт маршрутов и маршрутов
импортировать карту
require('echarts/map/js/china.js')
require('echarts/map/js/province/beijing.js')
У меня тут проблема.Если я хочу представить провинции страны, то мне нужно написать еще более 30require, может кто подскажет лучше?
Найдите способ получить полную справку
const rjs = require.context('echarts/map/js/province')
rjs.keys().forEach(rjs)
можно заменить
require('echarts/map/js/province/beijing.js')
require('echarts/map/js/province/shanxi.js')
require('echarts/map/js/province/neimenggu.js')
等等等。。。
Конфигурация карты:
option = {
// 鼠标提示
tooltip : {
trigger: 'item',
formatter : function(params){
var val = params.data
return '名称：'+val.name+'，个数：'+val.value[2]+'<br/>'+'总数：'+val.tol+'，个数：'+val.un
},
},
// 不同颜色的点
visualMap: [
{
min: 0,
max: 1,
show : false,
inRange: {
color: ['#01cae2', '#e63136',]
},
dimension : 3,
},
],
// 地图样式
geo: {
map: 'china', // 地图样式，当为‘北京’时，会显示北京地图
roam : true,
label: {
emphasis: {
show: true
}
},
zoom : 1.2, // 初始大小
scaleLimit : {
min : 1.2, // 最小缩放
max : 6 // 最大缩放
},
regions : regions(data) // 省份样式方法
},
series : [
{
name: '分布',
type: 'scatter',
coordinateSystem: 'geo', // 地图配置
data: convertData(data.sort(function (a, b) { // 数据方法
return b.value - a.value;
})),
encode: {
value : 2
},
hoverAnimation: true,
itemStyle: {
normal: {
// color: '#FF3030',
shadowBlur: 1,
}
},
}
]
};
При нажатии на карту провинции мы можем войти в векторную карту карты провинции
myChart.on('click',function(params){
option.geo.map = '北京'
myChart.setOption(option, true);
})
Предварительный просмотр:
4 Постскриптум
В настоящее время нет доступа к внутренним данным, которые представляют собой отображение всего внешнего интерфейса. Многие из них вводятся полностью, и их можно постепенно упрощать после их освоения.
В заключение:Начало работы с Vue + Начало работы с электронными диаграммами, я надеюсь, что это может быть полезно для вас! ! ! 😜😜😜
Спасибо за поддержку. Если есть какие-то недостатки, пожалуйста, указывайте на них и поощряйте друг друга.
Если вы думаете, что это хорошо, не забудьте поставить лайк, спасибо😂
Приветствую мое внимание: 【Гитхаб】【Наггетс】【Краткая книга】【CSDN】【ОЩИНА】【СФ】
В этой статье используетсяCreative Commons Attribution-NonCommercial-ShareAlike 4.0 Международная лицензияЛицензия.