资讯专栏INFORMATION COLUMN

angular4中引入echarts

ormsf / 1269人阅读

摘要:安装在项目中引入文件使用在你真正需要使用指令的中堆叠区域图邮件营销联盟广告视频广告直接访问搜索引擎周一周二周三周四周五周六周日邮件营销总量联盟广告总量视频广告总量直接访问总量搜索引擎总量直达营销广告搜索引擎邮件营销联

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: "堆叠区域图"
    },
    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} 
{b}: {c} ({d}%)" }, 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: { // 坐标轴指示器,坐标轴触发有效 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: "{b}", 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: "{b}", position: "right", show: true } }, itemStyle: { normal: { color: "#f4e925", shadowBlur: 10, shadowColor: "#333" } }, zlevel: 1 } ] } }

echarts.component.html

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/108923.html

相关文章

  • echarts使用总结

    摘要:最近一段时间做了一个使用的图表项目。由于理解能力有限,使用起来并非畅通无阻。所谓好记性不如烂笔头,现将一些比较关键的点记录一下,供后续查看。 最近一段时间做了一个使用echarts的图表项目。由于理解API能力有限,使用起来并非畅通无阻。所谓好记性不如烂笔头,现将一些比较关键的点记录一下,供后续查看。 一 使用方法 项目:ionic+angular4+echarts 1.由于打包原因,...

    spademan 评论0 收藏0
  • Angular学习资料

    摘要:目前稳定在,进入了版本状态,谷歌表示会长期进行支持。版本是谷歌开发的一款类型的框架,具有优越的性能和绝佳的跨平台性。于年月正式发布,目前已发布到版本。中文翻译与主站同步的非常及时。 Angular是一款面向企业级应用开发的前端框架,掌握好Angular相关技术,有助于我们提升开发效率,编写高质量的前端代码。 Angular 1.x版本 AngularJS 诞生于2009年,由Misko H...

    james 评论0 收藏0
  • Angular4使用经验之:jwplayer插件运用到angular4插件普适法

    摘要:是的,在这种情况下可以好像是可以使用插件了。第四步,重启服务使用经验之插件运用到插件普适法上善若水的博客结果是找不到,报了错。。。 背景:这几天我在使用使用angular4做项目,由于也是才接触angular和typescript所以遇到不少的问题。这是刚才解决一个的引用外部插件编译出错的问题。问题描述:使用的插件名称:jwplayer.js插件作用:视频播放插件第一步:使用npm s...

    李文鹏 评论0 收藏0
  • angular4动画的使用

    摘要:引入动画模块的动画模块是独立出去,所以要通过来下拉动画模块在中导入动画模块并注册注册下面就开始写一个简单的动画这里是封装好动画引入,在里面新建一个文件引入动画需要的模块编写默认,出场,离场的动画下面是实现代码之后和平时使用动画差不多 引入动画模块 angular4的动画模块是独立出去,所以要通过npm来下拉动画模块 npm install -S @angular/animations...

    chadLi 评论0 收藏0
  • angular4实战(2) router

    摘要:在上一章节,通过新建项目之后,会自动引入路由模块,接下来需要做的事情就是对路由模块进行配置。为了方便维护,单独把路由模块的配置拿出来,再去输出到中。路由守卫业务需求是在没有登录的情况下,是不允许跳入到下一个页面的。 router 单页面应用通过路由来去渲染不同的视图,为用户在同一个页面看到不同的场景,提供基础服务。 在上一章节,通过新建项目之后,ngModule会自动引入路由模块,接下...

    wanglu1209 评论0 收藏0

发表评论

0条评论

ormsf

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<