angular6:使用echarts方法

最新推荐文章于 2024-09-06 10:41:19 发布

一米八的耗子

最新推荐文章于 2024-09-06 10:41:19 发布

阅读量706

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript随笔

本文链接：https://blog.youkuaiyun.com/qq_36082247/article/details/98947274

本文档介绍了如何在Angular6项目中集成ECharts，包括安装ngx-echarts和echarts库，配置angular.json文件，以及在组件中声明并设置ECharts的option选项，适用于希望在Angular应用中实现数据可视化的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意：n本人采用最新版本的 echarts4.1.0，ngx-echarts3.1.0angular6.0.0；其余版本可以下载对应的文件
1.通过npm 导入相对应的包
npm install echarts --save
npm install ngx-echarts --save

２．在angular.jsonn文件中引入echart

在这里插入图片描述
3.在app.module中引入文件
import { NgxEchartsModule } from “ngx-echarts”;
在importsn中引入NgxEchartsModule

４．在对应页面使用，在ｃｏｍｐｏｎｅｎｔ中声明option

this.visitOption= {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      toolbox: {
        feature: {
          dataView: {show: true, readOnly: false},
          magicType: {show: true, type: ['line', 'bar']},
          restore: {show: true},
          saveAsImage: {show: true}
        }
      },
      legend: {
        data:['时间','访问量','平均访问量']
      },
      xAxis: [
        {
          type: 'catego