angular cli 使用echarts

 1、安装库

 

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的方法里面可能会有，但是确挺麻烦的，优先考虑简单的。

 

 

 

 

 

 有点colorful了，自己调整下。