摘要：安裝在項目中引入文件使用在你真正需要使用指令的中堆疊區(qū)域圖郵件營銷聯盟廣告視頻廣告直接訪問搜索引擎周一周二周三周四周五周六周日郵件營銷總量聯盟廣告總量視頻廣告總量直接訪問總量搜索引擎總量直達營銷廣告搜索引擎郵件營銷聯

1.安裝ngx-echarts

//if you use npm
npm install echarts --save

//if your angular version >=6
npm install ngx-echarts --save

//else if your angular version<6
npm install ngx-echarts@2.3.1 --save

2.在項目中引入echarts

//angular-cli.json文件

{
    "apps": [{
        "scripts":[
            "../node_modules/echarts/dist/echarts.min.js",
            "../node_modules/echarts/map/js/china.js",
            "../node_modules/echarts/dist/extension/bmap.js"
        ]
    }]
}

3.使用 在你真正需要使用echarts指令的module中import NgxEchartsModule
echarts.module.ts

import { NgModule } from "@angular/core";
import { EchartsComponent } from "./echarts/echarts.component";
import { NgxEchartsModule } from "ngx-echarts";

@NgModule({
  imports: [
    NgxEchartsModule 
  ],
  declarations: [EchartsComponent],
})
export class EchartsModule { }

echarts.component.ts

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-echarts",
  templateUrl: "./echarts.component.html",
  styleUrls: ["./echarts.component.scss"]
})
export class EchartsComponent implements OnInit {
  showloading:boolean = true;

  constructor() { 
    
    setTimeout(()=> {
      this.showloading = false;
    }, 3000);
  }

  ngOnInit() {
  }

  chartOption = {
    title: {
      text: "堆疊區(qū)域圖"
    },
    tooltip: {
      trigger: "axis"
    },
    legend: {
      data: ["郵件營銷", "聯盟廣告", "視頻廣告", "直接訪問", "搜索引擎"]
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
      }
    ],
    yAxis: [
      {
        type: "value"
      }
    ],
    series: [
      {
        name: "郵件營銷",
        type: "line",
        stack: "總量",
        areaStyle: { normal: {} },
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: "聯盟廣告",
        type: "line",
        stack: "總量",
        areaStyle: { normal: {} },
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: "視頻廣告",
        type: "line",
        stack: "總量",
        areaStyle: { normal: {} },
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: "直接訪問",
        type: "line",
        stack: "總量",
        areaStyle: { normal: {} },
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: "搜索引擎",
        type: "line",
        stack: "總量",
        label: {
          normal: {
            show: true,
            position: "top"
          }
        },
        areaStyle: { normal: {} },
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      }
    ]
  }

  Baroptions = {
    tooltip: {
      trigger: "item",
      formatter: "{a} 
: {c} (oa2e2i0%)"
    },
    legend: {
      orient: "vertical",
      x: "left",
      data: ["直達", "營銷廣告", "搜索引擎", "郵件營銷", "聯盟廣告", "視頻廣告", "百度", "谷歌", "必應", "其他"]
    },
    series: [
      {
        name: "訪問來源",
        type: "pie",
        selectedMode: "single",
        radius: [0, "30%"],

        label: {
          normal: {
            position: "inner"
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: [
          { value: 335, name: "直達", selected: true },
          { value: 679, name: "營銷廣告" },
          { value: 1548, name: "搜索引擎" }
        ]
      },
      {
        name: "訪問來源",
        type: "pie",
        radius: ["40%", "55%"],

        data: [
          { value: 335, name: "直達" },
          { value: 310, name: "郵件營銷" },
          { value: 234, name: "聯盟廣告" },
          { value: 135, name: "視頻廣告" },
          { value: 1048, name: "百度" },
          { value: 251, name: "谷歌" },
          { value: 147, name: "必應" },
          { value: 102, name: "其他" }
        ]
      }
    ]
  }



  linkoption = {
    title: {
      text: "懶貓今日訪問量"
    },
    color: ["#3398DB"],
    //氣泡提示框，常用于展現更詳細的數據
    tooltip: {
      trigger: "axis",
      axisPointer: { // 坐標軸指示器，坐標軸觸發(fā)有效
        type: "shadow" // 默認為直線，可選為："line" | "shadow"
      }
    },
    toolbox: {
      show: true,
      feature: {
        //顯示縮放按鈕
        dataZoom: {
          show: true
        },
        //顯示折線和塊狀圖之間的切換
        magicType: {
          show: true,
          type: ["bar", "line"]
        },
        //顯示是否還原
        restore: {
          show: true
        },
        //是否顯示圖片
        saveAsImage: {
          show: true
        }
      }
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: [{
      type: "category",
      data: [21231,1212,21231,3213],
      axisTick: {
        alignWithLabel: true
      },
      axisLabel: {
        interval: 0,
        rotate: 20
      },
    }],
    yAxis: [{
      name: "懶貓今日訪問量",
      type: "value"
    }],
    series: [{
      name: "今日訪問次數",
      type: "bar",
      barWidth: "60%",
      label: {
        normal: {
          show: true
        }
      },
      data:[21231,1212,21231,3213]
    }]
  }


  datamapvalue = [
       {name: "海門", value: [121.15,31.89,9]},
       {name: "鄂爾多斯", value: [109.781327,39.608266,12]},
       {name: "招遠", value: [120.38,37.35,12]},
       {name: "舟山", value: [122.207216,29.985295,12]},
       {name: "齊齊哈爾", value: [123.97,47.33,14]},
       {name: "鹽城", value: [120.13,33.38,15]},
       {name: "赤峰", value: [118.87,42.28,16]},
       {name: "青島", value: [120.33,36.07,18]},
       {name: "乳山", value: [121.52,36.89,18]},
       {name: "金昌", value: [102.188043,38.520089,19]}
   ];


  mapoption = {
    backgroundColor: "#404a59",
    title: {
      text: "全國主要城市空氣質量",
      subtext: "data from PM25.in",
      sublink: "http://www.pm25.in",
      left: "center",
      textStyle: {
        color: "#fff"
      }
    },
    tooltip: {
      trigger: "item"
    },
    legend: {
      orient: "vertical",
      y: "bottom",
      x: "right",
      data: ["pm2.5"],
      textStyle: {
        color: "#fff"
      }
    },
    geo: {
      map: "china",
      label: {
        emphasis: {
          show: false
        }
      },
      roam: true,
      itemStyle: {
        normal: {
          areaColor: "#323c48",
          borderColor: "#111"
        },
        emphasis: {
          areaColor: "#2a333d"
        }
      }
    },
    series: [
      {
        name: "pm2.5",
        type: "scatter",
        coordinateSystem: "geo",
        data: this.datamapvalue,
        symbolSize: function (val) {
          return val[2] / 10;
        },
        label: {
          normal: {
            formatter: "",
            position: "right",
            show: false
          },
          emphasis: {
            show: true
          }
        },
        itemStyle: {
          normal: {
            color: "#ddb926"
          }
        }
      },
      {
        name: "Top 5",
        type: "effectScatter",
        coordinateSystem: "geo",
        data: this.datamapvalue,
        symbolSize: function (val) {
          return val[2] / 10;
        },
        showEffectOn: "render",
        rippleEffect: {
          brushType: "stroke"
        },
        hoverAnimation: true,
        label: {
          normal: {
            formatter: "",
            position: "right",
            show: true
          }
        },
        itemStyle: {
          normal: {
            color: "#f4e925",
            shadowBlur: 10,
            shadowColor: "#333"
          }
        },
        zlevel: 1
      }
    ]
  }

}

echarts.component.html