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>
  • 相关阅读:
    alt、title和label
    css3-transform
    word break和word wrap
    聊聊svg
    JS严格模式
    JS提前声明和定义方式
    js跨域
    IE7append新的元素自动补充完整路径
    HTML5摇一摇
    基于jQuery仿uploadify的HTML5图片上传控件jquery.html5uploader
  • 原文地址:https://www.cnblogs.com/wskxy/p/14298547.html
Copyright © 2011-2022 走看看