ODS Charts provides Orange Charts components to developers.
Once the library integrated, via
use ODSCharts.getThemeManager( ODSChartsThemeOptions) to get the ODSChartsTheme.
The ODSChartsTheme is used to build the ODS theme and the charts options.
<html lang="en">
<head>
<script type="text/javascript" src="<...>ods-charts.js"></script>
<script src=" https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js "></script>
</head>
<body>
<div id="chart1" style="width: 800px; height: 400px"></div>
<div id="chart1_legends"></div>
<script>
var lineChartODSTheme = ODSCharts.getThemeManager();
echarts.registerTheme(lineChartODSTheme.name, lineChartODSTheme.theme);
const chart1 = echarts.init(document.getElementById('chart1'), lineChartODSTheme.name, {
renderer: 'svg',
});
chart1.setOption(
lineChartODSTheme
.setDataOptions({
xAxis: {
data: ['shirt', 'cardigan', 'chiffon', 'pants', 'heels', 'socks'],
},
series: [
{
name: 'sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
},
],
})
.manageChartResize(chart1, 'chart1')
.externalizePopover()
.externalizeLegends(chart1, 'chart1_legends')
.getChartOptions()
);
</script>
</body>
</html>
See more online dynamic examples
Code released under the MIT License.