آموزش من می خواهم به اشتراک بگذارم که چگونه می توان از نمودارها در توسعه هنگمنگ استفاده کرد. بنابراین من هنوز تصمیم به استفاده از echarts گرفتم.
دوستانی که از Echarts در سیستم عامل های دیگر استفاده کرده اند می دانند که فرآیند استفاده از Echarts این است که ابتدا از HTML برای معرفی کتابخانه Echarts استفاده کنید ، سپس از WebView برای بارگیری HTML استفاده کنید و در نهایت داده های نمودار را تزریق کنید. هنوز هم در هنگمنگ نیز از این قاعده مستثنی نیست.
کتابخانه Echarts می تواند در وب سایت رسمی سفارشی و بارگیری شود.
<body>
<div id="chart"></div>
</body>
<script>
const container = document.getElementById('chart')
function init(width, height) {
container.style.width = width;
container.style.height = height;
window.myChart = window.echarts.init(container);
window.myChart.on('click', function(params) {
window.ohosCallNative.callNative('click', {
componentType: params.componentType,
seriesType: params.seriesType,
seriesIndex: params.seriesIndex,
seriesName: params.seriesName,
name: params.name,
dataIndex: params.dataIndex,
dataType: params.dataType,
value: params.value,
color: params.color,
});
});
}
</script>
سپس HTML را در Arkts بارگیری کنید:
Web({ src: $rawfile('echarts.html'), controller: this.controller })
.width('100%')
.height('100%')
.javaScriptAccess(true)
.backgroundColor(this.webBackgroundColor)
.onPageBegin(() => {
})
.onPageEnd(e => {
this.init(this.canvasWidth, this.canvasHeight);
this.setOption(this.option);
if (this.onLoaded) {
this.onLoaded(this);
}
})
با توجه به تزریق داده ها به نمودار ، ما از روش RunjavaScript از مؤلفه وب برای اجرای آن استفاده می کنیم:
option: EChartsOption = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
this.controller.runJavaScript(`myChart.setOption(${JSON.stringify(option)})`);
