zoukankan      html  css  js  c++  java
  • 添加 Echarts bi库

    1.安装库和依赖

    npm i echarts --save
    npm i ngx-echarts --save
    npm i resize-observer-polyfill --save-dev

    2.相关配置

      在module添加

    import { NgxEchartsModule } from 'ngx-echarts';
    import * as echarts from 'echarts';
    
      imports: [
        NgxEchartsModule.forRoot({ echarts }),
      ],

    3.页面

      ts

    import { Component, OnInit } from '@angular/core';
    import { EChartsOption } from 'echarts';
    
    @Component({
      selector: 'app-demo001',
      templateUrl: './demo001.component.html',
      styleUrls: ['./demo001.component.scss']
    })
    export class Demo001Component implements OnInit {
      data: EChartsOption = {};
      constructor() { }
    
      ngOnInit(): void {
        this.data = {
          title: {
            text: 'ECharts 入门示例'
          },
          tooltip: {},
          xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }]
        }
      }
    
    }

      html

    <div echarts [options] = "data"></div>
  • 相关阅读:
    webStorm常用快捷键
    npm 常用指令
    webpack配置详解
    Tornado-StaticFileHandler参考
    python-希尔排序
    python的__init__几种方法总结
    gitlab和github一起使用
    Git的一些知识
    关于Django的理解
    python-快速排序
  • 原文地址:https://www.cnblogs.com/wskxy/p/14298547.html
Copyright © 2011-2022 走看看