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>
  • 相关阅读:
    selenium之css选择器高级用法
    常系数线性齐次递推新理解
    关于莫队本质的理解
    2021.5.8总结
    决策单调性优化dp
    字符串 复习
    5.1总结
    树分块 学习笔记
    莫反 复习
    P4570 [BJWC2011]元素
  • 原文地址:https://www.cnblogs.com/wskxy/p/14298547.html
Copyright © 2011-2022 走看看