Краткое описание проблем, с которыми столкнулись echarts:
1: Как объединить точечную диаграмму и линейную диаграмму, чтобы установить координаты оси X в координаты линейной диаграммы, а данные точечной диаграммы также изменяются с осью X линейной диаграммы (данные это динамические данные)
// 数据格式
const data = [
{
updatetime: '2:00',
maxPower: 12,
minPower: 2,
maxLoad: 34,
minLoad: 17,
sameMaxLoad: 4,
sameMinLoad: 1
},
{
updatetime: '4:00',
maxPower: 14,
minPower: 4,
maxLoad: 3,
minLoad: 7,
sameMaxLoad: 4,
sameMinLoad: 1
}
]
Преобразуйте формат данных в данные, соответствующие диаграммам рассеяния и линейным диаграммам.
Для точечной диаграммы требуется комбинация массивов [2,18]. Обратите внимание, что первым параметром каждого массива в точечной диаграмме не может быть время. Событие необходимо перехватить из данных до ":", и эти данные можно быть строкой или числом
Линейный график требует времени и соответствующих данных. Структура следующая [2:00,3]
Разница между точечной диаграммой и линейной диаграммой заключается в том, что первый параметр каждого массива различен: один — время, а другой — число.
Установите тип оси X: type имеет следующие типы
1: ось значений «значение», подходит для непрерывных данных.
2: ось категорий «категории», подходит для данных дискретной категории. При использовании этого типа данные категории могут быть автоматически взяты из series.data или dataset.source, либо данные категории могут быть установлены через xAxis.data.
3: ось времени «время», подходит для непрерывных данных временных рядов. По сравнению с числовой осью, ось времени имеет формат времени, а также отличается расчетом масштаба. Например, месяц, неделя и т. д. будут определяться на основе диапазон шкалы Дневная или часовая шкала.
4: логарифмическая ось «логарифм». Работает для логарифмических данных.
//echarts里面具体的代码
xAxis: [
{
type: 'category',
name: '时间',
splitLine: {
show: false
},
axisLine: {
show: true, // 坐标轴轴线。
lineStyle: {
color: '#237dc1'
}
},
data: this.xAxis
},
// 写两个x轴，让第二个x轴隐藏，这个x轴是散点图的X轴，type设置成category，如果设置成value的，那散点图的位置和X轴时间对应的位置是不对应的
{
type: 'category',
max: this.xAxis[1000],
show: false
}
]
Далее следует конкретная серия полилиний и точек разброса. Целью является установка оси X точечной диаграммы на вторую ось X: xAxisIndex: 1
Я привязываю каждые данные в точечных и линейных диаграммах к данным в реквизитах, потому что это компонент и в конечном итоге он будет встроен в родительский компонент. Вы можете изменить его в соответствии со своими потребностями.
series: [
{
type: 'scatter',
name: '散点图',
symbolSize: 8, // 标记的大小
symbol: 'rect',
itemStyle: {
// 图形样式
color: '#f9e551'
},
data: this.maximumLoad,
xAxisIndex: 1
},
{
name: '折线图',
type: 'line',
showSymbol: false,
smooth: true,
stack: '次数',
data: this.lowerLimitLoad,
// data: [1320, 1132, 601, 234, 120, 90, 20],
itemStyle: {
color: '#75fb4c', // 折线的颜色
borderColor: '#FFE618', //拐点的边框颜色
borderWidth: 0
},
lineStyle: {
color: '#75fb4c', // 折线的颜色
type: 'dotted' // 折线的类型
}
}
]
2: Как изменить форму значка в легенде на диаграмме Echarts. Если имеется несколько полилиний или точечных диаграмм, измените соответствующий значок. Я изменил его на квадрат, используя путь svg.
В легенде можно установить ширину, положение, цвет текста и другие параметры.
При инициализации данных добавляется параметр, который представляет собой изображение svg.
Код
data() {
return {
rectSvg: 'path://M-0.000,-0.000 L10.000,-0.000 L10.000,10.000 L-0.000,10.000 L-0.000,-0.000 Z' //柱状图横轴
}
}
// 这个是option中的
legend: {
data: [
{ name: '最大负荷', icon: this.rectSvg },
{ name: '最小负荷', icon: this.rectSvg },
{ name: '最大关口功率' },
{ name: '最小关口功率' },
{ name: '去年同期同一天负荷的上限' },
{ name: '去年同期同一天负荷的下限' }
],
right: '22%',
width: '60%',
textStyle: {
color: '#fff'
}
},
3: Как изменить форму значка во всплывающей подсказке на диаграмме Echarts. Если имеется несколько полилиний или точечных диаграмм, измените соответствующий значок. Я установил максимальную нагрузку и минимальную нагрузку в квадрат. Для других настроек используется форматтер установите круг. : Форматирование содержимого плавающего слоя в окне подсказки, поддерживает две формы: шаблон строки и функцию обратного вызова.
Я вынес здесь свое суждение. Если во всех всплывающих подсказках используется один и тот же значок, нет необходимости выносить суждение. Просто установите стиль для элемента div.
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
show: true
},
formatter: params => {
// 获取xAxis data中的数据
let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
params.forEach(item => {
if (item.seriesName === '最小负荷' || item.seriesName === '最大负荷') {
dataStr += `<div>
<div style="margin: 0 8px;">
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color};"></span>
<span>${item.seriesName}</span>
<span style="float:right;color:#000000;margin-left:20px;">${item.data[1]}</span>
</div>
</div>`
} else {
dataStr += `<div>
<div style="margin: 0 8px;">
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;border-radius:10px;background-color:${
item.color
};"></span>
<span>${item.seriesName}</span>
<span style="float:right;color:#000000;margin-left:20px;">${
item.seriesName === '去年同期同一天负荷的上限' ||
item.seriesName === '去年同期同一天负荷的下限'
? item.data
: item.data[1]
}</span>
</div>
</div>`
}
})
return dataStr
}
},
4: Как изменить точку перегиба линейного графика на диаграмме Echarts, чтобы значок точки перегиба не отображался
Как показано на картинке, я удалил круг в месте перегиба.
showSymbol: отображать ли символ, если false, он будет отображаться только при наведении курсора мыши.
Конкретный код выглядит следующим образом:
{
name: '折线图',
type: 'line',
showSymbol: false,
smooth: true,
stack: '次数',
data: this.upperLimitLoad,
itemStyle: {
color: '#fbe651', // 每一个点
borderColor: '#FFE618', //拐点的边框颜色
},
lineStyle: {
color: '#fbe651', // 折线的颜色
type: 'dotted' // 折线的类型
}
},
5: в легенде линейной диаграммы echarts удалены круги
Просто задайте форму полилинии индивидуально и установите значение непрозрачности itemStyle равным 0.
legend: {
data: [
{ name: '去年同期同一天负荷的上限', itemStyle: { opacity: 0 } },
{ name: '去年同期同一天负荷的下限', itemStyle: { opacity: 0 } }
],
right: '22%',
width: '60%',
textStyle: {
color: '#fff'
}
},
6: перенос строки легенды настройки значка echarts
Идея реализации: Установить легенду в виде массива для выполнения разрывов строк. Обратите внимание, что вам нужно задать стиль для каждого элемента массива.
Конкретный код выглядит следующим образом:
legend: [
{
x: 'center',
data: [
{ name: '最大负荷', icon: this.rectSvg },
{ name: '最小负荷', icon: this.rectSvg },
{ name: '最大关口功率' },
{ name: '最小关口功率' }
],
left: 'center', //设置legend居中
width: '442',
itemGap: 31, //每一个item之间的间距
textStyle: {
color: '#fff',
padding: [5, 0, 2, 0],//设置图标和文字居中
rich: {
a: {
verticalAlign: 'middle' //设置图标和文字居中
}
}
}
},
{
x: 'center',
top: '7%',
data: [
{ name: '去年同期同一天负荷的上限', itemStyle: { opacity: 0 } },
{ name: '去年同期同一天负荷的下限', itemStyle: { opacity: 0 } }
],
left: 'center',
width: '442',
itemGap: 88, //每一个item之间的间距
textStyle: {
color: '#fff',
padding: [5, 0, 2, 0],
rich: {
a: {
verticalAlign: 'middle'
}
}
}
}
],
7: Как установить точки останова на линейном графике echarts
Две части, обведенные на рисунке, представляют собой несвязанные точки останова.
Конкретная идея реализации состоит в том, чтобы заменить точки в кружке, где данные, возвращаемые фоном, равны 0, недифференцированы или нулевые, на «-», чтобы эти точки без данных образовывали точки останова. Конкретный код выглядит следующим образом:
Если вам нужно самостоятельно просмотреть и обработать данные, возвращаемые серверной частью, примите решение: если оно равно 0, не определено или равно нулю, просто замените его на «-», что может образовать точку останова.
8: Как исправить данные по оси X в диаграмме Echarts: как показано на рисунке.
Просто добавьте max: и SplitNumber в файл конфигурации оси X.
#####1: SplitNumber: количество разделенных сегментов оси координат. Следует отметить, что это количество разделенных сегментов является приблизительным. Окончательное количество фактически отображаемых сегментов будет зависеть от разборчивости разделенных сегментов. Отображение масштаба оси.Регулировка.
#####2: max: максимальное значение масштаба оси координат. Для него можно установить специальное значение dataMax, и в этом случае максимальное значение данных на оси принимается за максимальный масштаб.
Если не установлено, максимальное значение будет рассчитываться автоматически, чтобы обеспечить равномерное распределение масштабов по осям координат.
Недопустимо для оси категорий.
Мой конкретный код настроек
xAxis: {
type: 'value',
name: '负载率%',
splitLine: {
show: false
},
axisLine: {
show: true, // 坐标轴轴线。
lineStyle: {
color: '#237dc1'
}
},
max: 100,
splitNumber: 11
},
Подведем итог:
Это первый раз, когда я создавал электронные диаграммы, включая линейные диаграммы, гистограммы, точечные диаграммы, круговые диаграммы, диаграммы, сочетающие линии и точки рассеяния, а также диаграммы, сочетающие столбцы и линейные линии. За этот период я столкнулся со многими проблемами. Не знаю.Иногда я просто просматриваю документацию или Baidu.На самом деле основная причина в том, что у меня слишком мало опыта и я не знаком с документацией, поэтому я обобщил проблемы, с которыми столкнулся в процессе разработки.Если есть Если есть ошибки, пожалуйста, укажите на них. Давайте усердно работать вместе и усердно учиться.