HarmonyOS鸿蒙Next中echarts图标的使用

HarmonyOS鸿蒙Next中echarts图标的使用 项目中有图标统计功能，需要使用echarts功能，有什么好的建议

3 回复

您可以使用鸿蒙自带的charts：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/js-components-basic-chart-V13# 示例

除了您找到的三方库，还有以下方案支持鸿蒙图表绘制：

更多关于HarmonyOS鸿蒙Next中echarts图标的使用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中使用ECharts图表，可以通过集成ECharts的JavaScript库来实现。首先，确保项目中已经引入了ECharts的相关文件。可以通过npm安装ECharts，或者直接下载ECharts的JS文件并引入到项目中。

  1. 引入ECharts库：

    • 如果使用npm，可以通过以下命令安装ECharts：
      npm install echarts --save
    • 如果直接使用JS文件，可以将ECharts的JS文件下载到本地，并在HTML文件中引入：
      <script src="path/to/echarts.min.js"></script>

  2. 创建图表容器： 在HTML中创建一个容器元素，用于渲染ECharts图表：

    <div id="chart" style="width: 600px;height:400px;"></div>

  3. 初始化ECharts实例： 在JavaScript中初始化ECharts实例，并将其绑定到容器元素上：

    var myChart = echarts.init(document.getElementById('chart'));

  4. 配置图表选项： 设置图表的配置项，包括标题、图例、X轴、Y轴、数据系列等：

    var option = {
    title: {
        text: '示例图表'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

  5. 渲染图表： 使用配置项渲染图表：

    myChart.setOption(option);

通过以上步骤，可以在HarmonyOS鸿蒙Next中成功使用ECharts图表。

在HarmonyOS鸿蒙Next中使用ECharts图表，首先需要引入ECharts库。可以通过npm安装ECharts，然后在项目中导入并使用。具体步骤如下：

  1. 安装ECharts：

    npm install echarts --save

  2. 在代码中引入ECharts：

    import * as echarts from 'echarts';

  3. 初始化图表： 在onInit生命周期中初始化图表，指定容器的DOM元素，并设置图表配置。

    onInit() {
    const chart = echarts.init(this.$element('chart-container'));
    const option = {
        title: { text: '示例图表' },
        tooltip: {},
        xAxis: { data: ['A', 'B', 'C', 'D', 'E'] },
        yAxis: {},
        series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10] }]
    };
    chart.setOption(option);
}

  4. 在模板中定义容器：

    <div id="chart-container" style="width: 100%; height: 400px;"></div>

通过以上步骤，即可在鸿蒙Next中成功使用ECharts绘制图表。

回到顶部