экранизация
Принцип изображения на большом экране - почти вся проекция экрана, то есть экран компьютера проецируется на большой экран через проводной сигнал, и то, что отображается на компьютере, будет отображаться на большом экране, поэтому экран компьютера нельзя прокручивать по горизонтали или вертикали полоса. Я видел в Интернете некоторые схемы адаптации, и, наконец, сослался наВизуализация данных на большом экране - схема экранной адаптации (с несколькими разрешениями), используя масштаб CSS3, задайте для контейнера ширину и высоту чернового варианта дизайна, например 3840*2160, и динамически масштабируйте его в соответствии с шириной и высотой области просмотра браузера, чтобы контейнер всегда заполнил область просмотра браузера без полос прокрутки. .
Структура контейнерного компонента:
<template>
<div class="bsd-frame" :style="{'background': bgColor}" ref="bsdFrame">
<slot></slot>
</div>
</template>
Первым шагом является получение фактической ширины и высоты контейнера, обычно это ширина и высота эскизного проекта или ширина и высота экрана компьютера.
setSize () {
this.frameWidth = this.width || screen.width
this.frameHeight = this.height || screen.height
const frame = this.$refs.bsdFrame //为容器根元素设置宽高
frame.style.width = this.frameWidth + 'px'
frame.style.height = this.frameHeight + 'px'
}
Второй шаг — установить коэффициент масштабирования для контейнера в соответствии с шириной и высотой области просмотра браузера.
setScale () {
const bodyWidth = document.body.clientWidth //前提是html,body的height: 100%; width: 100%
const bodyHeight = document.body.clientHeight
const scaleX = bodyWidth / this.frameWidth
const scaleY = bodyHeight / this.frameHeight
this.$refs.bsdFrame.style.transform = `scale(${scaleX},${scaleY})`
}
Третья часть, слушайте событие изменения размера и пересчитывайте коэффициент масштабирования контейнера каждый раз, когда запускается событие изменения размера.
mounted () {
this.setSize()
this.setScale()
window.addEventListener('resize', this.setScale)
},
destroyed () {
window.removeEventListener('resize', this.setScale)
}
график развития
Основное использование гистограмм, линейных диаграмм, круговых диаграмм и другой инфраструктуры, а также карт. Основная часть этой работы заключается в том, чтобы найти значок элемента конфигурации echarts для настройки конфигурации.E charts.apache.org/this/option Также…
echarts5 внесла коррективы в представления по запросу. Отделяйте средства визуализации, компоненты и диаграммы от ядра echart и ссылайтесь на них по мере необходимости. Раньше средства визуализации холста и svg были включены по умолчанию. Теперь вы можете выбрать средство визуализации холста или svg по мере необходимости. Импорт компонентов и схем по запросу также отличается от предыдущего. Например, чтобы нарисовать линейную диаграмму с заголовком, введите TitleComponent и LineChart следующим образом.
import * as echarts from 'echarts/core';
import { TitleComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use(
[TitleComponent, LineChart, CanvasRenderer]
);
использовать:
var dom = document.getElementById('main');
var myChart = echarts.init(dom); //初始化
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}]
};
option && myChart.setOption(option); // 设置选项
Чтобы нарисовать диаграмму в доме, сначалаecharts.init(dom)Инициализируйте экземпляр echarts, затем установите параметры для этого экземпляраmyChart.setOption(option), вы можете завершить рисунок диаграммы. Вы можете обратиться к официальному сайту дела,случай с диаграммами.
При изменении данных, для перерисовки вызовите еще разmyChart.setOption(newOption).
echarts используется во многих местах в проекте, который использовался доvue-echarts组件库Он основан на echarts4, поэтому просто инкапсулирует компонент, основанный на echarts5, который может инициализировать диаграмму в соответствии с входящей опцией и повторно отображать диаграмму при изменении опции.
<template>
<div class="echarts"></div>
</template>
<script>
import * as echarts from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
echarts.use([CanvasRenderer])
export default {
name: 'vue-echarts',
props: {
options: {
type: Object,
required: true
}
},
watch: {
options (newValue, oldValue) {
if (this.chart && newValue) { //没有设置deep：true，所以当数据改变时，要改变option指针，才能触发该方法。
this.chart.setOption(newValue)
}
}
},
methods: {
init (opt) {
if (!this.chart) {
this.chart = echarts.init(this.$el)
}
this.chart.setOption(this.options)
}
},
mounted () {
this.init()
}
}
</script>
<style lang="scss" scoped>
.echarts {
width: 100%;
height: 100%;
}
</style>
использовать:
<vue-echarts :options="chartOption" />
computed: {
chartOption () {
const categorySales = this.$store.state.categorySales
categoryOpt.series[0].data = categorySales
return Object.assign({}, categoryOpt)
}
}
прокрутить
Прокрутка воспроизведение использует переход, который меняет высоту верхнего ряда.
transition: height 0.3s linear;
Когда верхняя строка скрыта, переместите ее данные из головы в конец массива. Реализовать круговую прокрутку.
//this.rowHeight为计算出的每一行的高度，这里是将所有行高都还原成初始值，len是数组长度
this.rowHeights = new Array(len).fill(this.rowHeight)
//将最上面一行的高度设为0
this.rowHeights.splice(0, 1, 0)
//将数组头部的数据移到尾部， this.currentIndex为移动指针，初始值为0
const temp = this.rowsx.slice(this.currentIndex)
temp.push(...this.rowsx.slice(0, this.currentIndex))
this.rowsData = temp
this.currentIndex += 1
<div v-for="(item, index) in rowsData" :key = "item.index"></div>
разработка карты
echarts.registerMapAPI поддерживает пользовательские системы географических координат, такие какecharts.registerMap('china', map), первый параметр — это имя пользовательской карты, а второй параметр — данные в формате GeoJson, как показано ниже:Данные в формате GeoJson можно получить, введя географические названия на этом веб-сайте.DAT av.aliyun.com/tools/Atlas…
Пользовательское использование географической системы координат:
- нарисуйте карту напрямую, для
type: 'map'тип диаграммы
series: [
{
name: '产品流向分布',
type: 'map',
map: 'china',
zoom: 1.6,
center: [104.114129, 36.050339],
itemStyle: {
borderColor: 'blue',
borderWidth: 2
}
}
]
Плюс визуальный картографический компонент
visualMap, может быть реализована карта теплового распределения.
visualMap: {
show: false,
min: 0,
max: 10000,
seriesIndex: [0],
inRange: {
color: ['#a7d5f2', '#3f95ff', '#5470c6']
}
},
series: [
{
name: '产品流向分布',
type: 'map',
map: 'china',
zoom: 1.6,
center: [104.114129, 36.050339],
itemStyle: {
borderColor: 'blue',
borderWidth: 2
}
}
]
- В качестве системы координат рисуйте точечные диаграммы, наборы линий и т. д. в системе координат.
geo: {
map: 'china', //自定义的地图名称
zoom: 1.6,
center: [104.114129, 36.050339],
itemStyle: {
borderColor: 'blue',
borderWidth: 2
}
},
series: [
{
type: 'effectScatter',
coordinateSystem: 'geo', //指定geo坐标系
symbolSize: function (val) {
return val[2] / 200
},
rippleEffect: {
brushType: 'stroke'
},
label: {
show: true,
position: ['20', '0'],
formatter: '{b}',
fontSize: 16
},
itemStyle: {
color: 'yellow'
}
}]
Использование пользовательской географической системы координат очень распространено, и некоторые статистические ситуации в провинциях и городах могут быть реализованы с использованием вышеуказанных методов.
данные
В проекте используются смоделированные данные, а vuex используется для управления данными и связи. Метод обновления принимает регулярный опрос.
//Home.vue
created () {
this.$store.dispatch('updateAll')
setInterval(() => { // 模拟定时轮询
this.$store.dispatch('updateAll')
}, 5 * 60 * 1000)
}
Имитация данных запроса в действиях.
actions: {
updateAll (context) {
setTimeout(() => { // 模拟成功请求接口数据
// 接口返回，数据变化，更新状态
//context.commit('updateOverall', data)
...
}, 1000)
}
},
Обрабатывать данные об использовании в вычисляемом компоненте:
computed: {
chartOption () {
const categorySales = this.$store.state.categorySales
categoryOpt.series[0].data = categorySales
return Object.assign({}, categoryOpt)
}
}