欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

angular cli 使用echarts

程序员文章站 2022-03-20 16:17:28
1、安装库 npm install typings echarts --global npm install ngx-echarts --save npm install @types/echarts --save 2、app.module引入 import { BrowserModule } fr ......

 1、安装库

angular cli 使用echarts

 

npm install typings echarts --global

npm install ngx-echarts --save

npm install @types/echarts --save

2、app.module引入

import { browsermodule } from '@angular/platform-browser';
import { ngmodule } from '@angular/core';
import { approutingmodule } from './app-routing.module';
import { appcomponent } from './app.component';
import { homecomponent } from './home/home.component';
import {browseranimationsmodule} from "@angular/platform-browser/animations";
import {buttonmodule} from 'primeng/primeng';
import { headercomponent } from './components/header/header.component';  // header  components
import {ngxechartsmodule} from 'ngx-echarts';
@ngmodule({
  declarations: [
    appcomponent,
    homecomponent,
    headercomponent,
    // selfhttp
  ],
  imports: [
    browsermodule,
    httpclientmodule,
    approutingmodule,
    browseranimationsmodule,
    buttonmodule,
    ngxechartsmodule
  ],
  providers: [httpinterceptorproviders, apilist,{provide: locationstrategy, useclass: hashlocationstrategy}],
  bootstrap: [appcomponent]
})
export class appmodule { }

3、具体文件使用

html代码

<div #mycharts echarts [options]="chartoption" class="demo-chart charstdiv" ></div>

ts代码

import { component, oninit, input } from '@angular/core';
import { messageservice } from 'primeng/api';
import * as ec from 'echarts';  // 没有安装ypes/echarts就会报错
@component({
  selector: 'app-table',
  templateurl: './table.component.html',
  styleurls: ['./table.component.css'],
  providers: [messageservice]
})

export class tablecomponent implements oninit {

 
  chartoption: any;
  constructor(private messageservice: messageservice) {

  }

  ngoninit() {
    this.selectedcolumns = this.tablelist.header;
    this.items = [
      {
        label: '查看', icon: 'pi pi-eye', command: (event) => this.showdialog()
      },
      { label: '删除', icon: 'pi pi-trash', command: (event) => this.del() }
    ];

  }
  onrowselect(event) {
    this.data = {
      labels: [],
      datasets: []
    };
    this.displaysidebar = true;
    // 组装图表
    var data1 = [];
    var data2 = [];
    var data3 = [];
    this.selectedlist.foreach((element, index) => {
      data1.push((element.month + '月'));
      // 销量
      data2.push(element.sale);
      // 店铺数
      data3.push(element.comnum);
    });
    this.chartoption = {
      // title: {
      //   text: '堆叠区域图'
      // },
      backgroundcolor: '#2c343c',
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['零售额', '店铺总数',],
        textstyle: {//图例文字的样式
          color: 'white',
          fontsize: 16
        }
      },
      toolbox: {
        orient: 'vertical',
        top: 'middle',
        feature: {
          // dataview: {//数据视图工具,可以展现当前图表所用的数据,编辑后可以动态更新。
          //   show: true,//是否显示组件。
          //   readonly: false
          // },
          magictype: {//动态类型切换 示例:feature: { magictype: {type: ['line', 'bar', 'stack', 'tiled']}}
            show: true,
            type: ['line', 'bar']
          },
          restore: {//配置项还原。
            show: true
          },
          saveasimage: {}
        }
      },
      datazoom: {//datazoom 组件 用于区域缩放,从而能*关注细节的数据信息,或者概览数据整体,或者去除离群点的影响。
        type: 'slider',//滑动条型数据区域缩放组件
        start: 0,//起始位置0
        end: 100//结束位置100
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '40px',
        containlabel: true
      },
      xaxis: [
        {
          type: 'category',
          boundarygap: false,
          axislabel: {
            interval: 0,
            textstyle: {
              color: '#c3dbff',  //更改坐标轴文字颜色
              fontsize: 14      //更改坐标轴文字大小
            }
          },
          data: data1,
          axisline: {
            linestyle: {
              color: 'white', //更改坐标轴颜色
            }
          }
        }
      ],
      yaxis: [
        {
          type: 'value',
          axislabel: {
            interval: 0,
            textstyle: {
              color: '#c3dbff',  //更改坐标轴文字颜色
              fontsize: 14      //更改坐标轴文字大小
            }
          },
          axisline: {
            linestyle: {
              color: 'white', //更改坐标轴颜色
            }
          }
        }
      ],
      series: [
        {
          name: '零售额',
          type: 'line',
          stack: '总量',
          areastyle: {normal: {
            color:new ec.graphic.lineargradient(0, 0, 0, 1, [  //随机颜色
              { offset: 0, color: 'red' },
              { offset: 0.5, color: 'pink' },
              { offset: 1, color: '#ddd' }
            ])
          }},
          itemstyle: {
            normal: {
              color: function () {
                return '#' + math.floor(math.random() * 0xffffff).tostring(16); // 随机颜色
              }
            }
          },
          data: data2
        },
        {
          name: '店铺总数',
          type: 'line',
          stack: '总量',
          areastyle: {normal: {
            color:new ec.graphic.lineargradient(0, 0, 0, 1, [
              { offset: 0, color: '#9cd4d8' },
              { offset: 0.5, color: '#aec9fe' },
              { offset: 1, color: 'pink' }
            ])
          }},
          itemstyle: {
            normal: {
              color: function () {
                return '#' + math.floor(math.random() * 0xffffff).tostring(16);
              }
            }
          },
          data: data3
        },
      ]
    }
  }

}

注意:渲染数据的时机要选好,组装数据放在最后组装,如果把chartoption 定义在前面,再给series赋值图表是不会更新的,当然ec的方法里面可能会有,但是确挺麻烦的,优先考虑简单的。

 

 angular cli 使用echarts

 

 angular cli 使用echarts

 

 有点colorful了,自己调整下。