angular展示echarts

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

郭大钰

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

阅读量202

点赞数

分类专栏： angular

本文链接：https://blog.csdn.net/m0_46684624/article/details/108598157

版权

angular 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了如何在Angular应用中集成并展示ECharts图表，包括HTML模板和TypeScript组件的配置方法。

摘要由CSDN通过智能技术生成

angular展示echarts

html

<div id="dev" style="width: 600px; height: 500px;">

</div>

import { Component, OnInit } from '@angular/core';
import { echarts } from 'src/app/shared';

@Component({
  selector: 'app-development-tendency',
  templateUrl: './development-tendency.component.html',
  styleUrls: ['./development-tendency.component.styl']
})
export class DevelopmentTendencyComponent implements OnInit {
  options: any;
  constructor() { }

  ngOnInit() {
    this.options = {
      title: {
          text: '折线图堆叠'
      },
      tooltip: {
          trigger: 'axis'
      },
      legend: {
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
      },
      grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
      },
      toolbox: {
          feature: {
              saveAsImage: {}
          }
      },
      xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
          type: 'value'
      },
      series: [
          {
              name: '邮件营销',
              type: 'line',
              stack: '总量',
              data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
              name: '联盟广告',
              type: 'line',
              stack: '总量',
              data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
              name: '视频广告',
              type: 'line',
              stack: '总量',
              data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
              name: '直接访问',
              type: 'line',
              stack: '总量',
              data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
              name: '搜索引擎',
              type: 'line',
              stack: '总量',
              data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
      ]
    };
    let myCharts = echarts.init(document.getElementById('dev'));
    myCharts.setOption(this.options)
  
  }

}