Пользовательский стиль, используя богатые в отеле Echarts

ECharts

В последнее время я проделал большую работу на больших экранах, и, конечно, я использовал некоторые неиспользуемые атрибуты echarts.Сегодня я хочу записать полезный атрибут, богатый echarts.

богатое использование

В диаграммах rich в основном используется для установки пользовательских стилей, мы можем использовать rich в заголовке и легенде. Например, следующий эффект может быть достигнут с помощью богатых

Видно, что в легенде диаграммы на картинке цвет отображаемого позже шрифта номера отличается, а между ним и названием есть пробел.Используйте насыщенный для достижения дизайнерского эффекта.

 const options = {
    textStyle: {
        rich: {
           orgname: {
             fontSize: 12,
             width: 100,
           },
         count: {
              fontSize: 12
              verticalAlign: 'top',
              align: 'center',
              color: '#597FF3',
              padding: [0, 0, 0, 15],
             },
        },
    },
    legend: {
        formatter:(name) => {
            let target;
            const data = this.fmsDevice;
            for (let i = 0; i < data.length; i++) {
               if (data[i].orgname === name) {
                   target = `${data[i].count}辆`;
               }
           }
           const arr = [
               `{orgname|${name}}`,
               `{count|${target}}`,
            ];
           return arr.join('');
        }
    }
 }

Мы можем настроить имя стиля в программе форматирования и определить содержимое стиля в textStyle. Конечно, мы также можем использовать тот же метод при настройке стиля заголовка.

Установите axisLabel с богатым

Например, эффект следующей картинки

Мы хотим стилизовать осьLabel. Вы можете установить форматтер в axisLabel, добавить собственное имя стиля

xAxis: [
    {
       axisLabel: {
          color: '#747DA0',
          fontSize: 12,
          formatter: name => (`{name|${name}}`),
          rich: {
             name: {
                color: '#fff',
                shadowBlur: 3,
                borderWidth: 1,
                borderColor: 'green',
                borderRadius: 2,
             },
          },
       },
    }
]

Богатый атрибут в echarts обеспечивает большое удобство для определяемых пользователем стилей.

Категории