Настройки стиля ECharts
С помощью настроек стиля ECharts может изменять цвет, яркость, размер и т. д. графических элементов или текста.
Цветовая тема
Начиная с ECharts 4, помимо темы по умолчанию, включены две встроенные темы, а именноlightиdark。
Использование выглядит так:
Пример
Попробуйте сами »
Кроме того, мы также можем в официальномредакторе темвыбрать понравившуюся тему и скачать её.
Сейчас загрузка темы предоставляет как JS-версию, так и JSON-версию.
Если вы используете JS-версию, вы можете сохранить код JS-темы в файлthemeName.js, затем подключить файл в HTML и, наконец, использовать тему в своем коде.
Например, на изображении выше мы выбрали тему; сохраните код JS какwonderland.js。
Пример
<script src="https://www.example.com/static/js/wonderland.js"></script>
...
//После подключения файла wonderland.js в HTML вызовите его при инициализации.
var myChart = echarts.init(dom, 'wonderland');
// ...
Попробуйте сами »
Если тема сохранена в виде JSON-файла, вы можете загрузить и зарегистрировать ее самостоятельно.
Например, на изображении выше мы выбрали тему; сохраните код JSON какwonderland.json。
Пример
$.getJSON('wonderland.json', function (themeJSON) {
echarts.registerTheme('wonderland', themeJSON)
var myChart = echarts.init(dom, 'wonderland');
});
Попробуйте сами »
Примечание:Мы используем $.getJSON, поэтому необходимо подключить jQuery.
цветовая палитра
Цветовую палитру можно задать в параметре option.
Цветовая палитра предоставляет набор цветов, а графические элементы и серии будут автоматически выбирать из неё цвета.
Вы можете задать глобальную цветовую палитру или цветовую палитру, отдельную для серии.
// Глобальная цветовая палитра.
color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#6D9AC7','#5B80A6', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
series: [{
type: 'bar',
// Собственная цветовая палитра этой серии.
color: ['#dd6b66','#759aa0','#e69d87','#6A96C1','#ea7e53','#eedd78','#5B80A6','#73b9bc','#7289ab', '#6F9DCA','#f49f42'],
...
}, {
type: 'pie',
// Собственная цветовая палитра этой серии.
color: ['#37A2DA', '#32C5E9', '#67E0E3', '#7FB2E6', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
...
}]
}
Примеры глобальной цветовой палитры:
Пример
color: ['#ff0000','#0080FF', '#0000ff', '#d48265', '#6D9AC7','#5B80A6', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
Попробуйте сами »
Примеры цветовой палитры серии:
Пример
type: 'pie',
// Собственная цветовая палитра этой серии.
color: ['#ff0000','#0080FF', '#0000ff', '#7FB2E6', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
...
}]
Попробуйте сами »
Прямые настройки стиля: itemStyle, lineStyle, areaStyle, label, ...
Прямая настройка стиля — довольно распространённый способ настройки. Просматривая ECharts'optionво многих местах можно задатьitemStyle、lineStyle、areaStyle、labelи т.д. В этих местах можно напрямую задавать цвет, толщину линии, размер точки, текст метки, стиль метки и т.д. графических элементов.
Вообще говоря, все серии и компоненты ECharts следуют этим соглашениям об именовании, хотя в разных графиках и компонентах,itemStyle、labelи т.д. могут появляться в разных местах.
Другое введение в прямую настройку стиля см. вкруговой диаграмме ECharts。
Стиль выделения: emphasis
При наведении мыши на графический элемент обычно появляется стиль выделения. По умолчанию стиль выделения автоматически создаётся на основе обычного стиля.
Если вы хотите настроить стиль выделения, вы можете настроить его через свойство emphasis:
Пример
emphasis: {
itemStyle: {
// Цвет точки при выделении.
color: 'red'
},
label: {
show: true,
// Текст метки при подсветке
formatter: 'Содержимое метки, отображаемое при подсветке'
}
},
Попробуйте сами »