angular5引入折线图_qq_32496215的博客-程序员宝宝_angular折线图

1)安装插件

npm install echarts -S
npm install ngx-echarts -S
npm install @types/echarts -D
 

2)修改tsconfig.json文件
tsconfig.json---->complierOptions中添加

  "paths":{
              "echarts": ["node_modules/echarts/dist/echarts.min.js"]
            },

在这里插入图片描述
3)app.module中引入

import { NgxEchartsModule } from 'ngx-echarts';

app.modules.ts–>@NgModule–>imports中添加NgxEchartsModule

在这里插入图片描述
5)模板中使用

在这里插入图片描述
实例一

option= {
    tooltip : {
      trigger: 'axis',
      axisPointer : {            // 坐标轴指示器,坐标轴触发有效
        type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
      }
    },
    grid: {
      left: '10%',
      right: '14%',
      bottom: '3%',
      containLabel: true
    },
    xAxis:  {
      type: 'value',
      show: false, //将x轴隐藏
    },
    yAxis: {
      axisLine: {
        show: false
      }, // y轴坐标轴线隐藏,注意不是y轴隐藏,我们还要显示文字的
      axisTick: [{
        show: false
      }], // y轴坐标轴刻度隐藏
      type: 'category',
      data: ['现世界无锡新世界','无锡新世界','无锡新世无锡界','现世界无锡新世界','无锡新世界','无锡新世界']
    },
    series: [
      {
        type: 'bar',
        data:[6000.0,6000.0,6000.0,6000.0,6000.0,6000.0],
        tooltip: { show: false},
        barMinHeight: 30, //最小柱高
        barWidth: 12, // 柱宽度
        z: 10, // 控制图表前后顺序
        barGap: '-100%',
       
        itemStyle: { // 柱子样式
          normal: {
            color: 'rgba(172,229,251,1)', // 柱状图颜色
            label: {
                show: true, // 显示文本
                color:'rgba(51,51,51,1)',
                position:'right'
            }
          }
        }
      },
      {
        type: 'bar',
        data:[3704.0,5704.0,1704.0,90.0,521.0,4521.0],
        tooltip: { show: false},
        barMinHeight: 30, //最小柱高
        barWidth: 12, // 柱宽度
        z: 10, // 控制图表前后顺序
        itemStyle: { // 柱子样式
          normal: {
            color: 'rgba(20,180,242,1)', // 柱状图颜色
            label: {
              show: true, // 显示文本
              color:'rgba(255,255,255,1)'
            }
          }
        }
      },


    ]
  };

在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_32496215/article/details/82898330

智能推荐

王者荣耀的帧同步机智_勇-子的博客-程序员宝宝

这是王者荣耀技术分析系列第二篇,有兴趣请持续关注。1、像《王者荣耀》一样红过2、从《王者荣耀》来聊聊游戏的帧同步3、游戏服务器的架构演进农药自从上线以来,依靠着强大的产品力以及腾讯的运营能力,在游戏市场上表现可谓是风生水起,根据第三方的调研数据显示,《王者荣耀》渗透率达到22.3%,用户规模达到2.01亿人,每日的日活跃用户(DAU)均值为5412.8万

Unity游戏中使用贝塞尔曲线_u010019717的博客-程序员宝宝

孙广东   2015.8.15比如在3D rpg游戏中,我们想设置弹道,不同的轨迹类型!目的:这篇文章的主要目的是要给你关于在游戏如何使用贝塞尔曲线的基本想法。          贝塞尔曲线是最基本的曲线,一般用在计算机 图形学和 图像处理。贝塞尔曲线可以用来创建平滑的曲线的道路、 弯曲的路径就像 祖玛游戏、 弯曲型的河流等。        一条贝塞尔曲线是由一组定义的控制点 P0到 Pn,在 n

fastjson的值过滤器ValueFilter_踩坑娃的博客-程序员宝宝

使用fastjson序列化对象时,可以添加值过滤器(ValueFilter),以此来对序列化出来的值做统一处理,步骤如下:实现com.alibaba.fastjson.serializer.ValueFilter接口,实现其Object process(Object object, String name, Object value)方法,根据需要修改返回的值。调用fastjson序列化对象时,使...

uc/os-ii消息队列_fillthesky的博客-程序员宝宝

使用消息队列可以在任务之间传递多条消息。消息队列由三个部分组成:事件控制块、消息队列和消息。 消息队列的数据结构如下图所示。从图中可以看到,消息队列相当于一个共用一个任务等待列表的消息邮箱数组,事件控制块成员OSEventPtr指向了一个叫做队列控制块(OS_Q)的结构,该结构管理了一个数组MsgTbl[ ],该数组中的元素都是一些指向消息的指针。

asp.net小说网站案例_师哥帮忙的博客-程序员宝宝

项目描述:用户模块:新用户注册、老用户登录。留言交互:用户可以查看以前的留言,会员可以发表新的留言以及回复。小说搜索:可以根据书名或作者进行搜索。小说在线阅读:用户可以直接或者对搜索到的小说进行阅读。发送原创小说:可以根据网站主页提供的信息将自己的原创作品发送给管理员。小说排行榜:根据点击率对现在最热门的小说进行排行。管理员对功能的需求:管理员管理:增加、删除、修改管理员和会员信息。留言管理:对用户留言进行回复,同时可删除留言。小说发布管理:发表各类小说。小说更新

字符串函数---atof()函数详解及实现_hushhw的博客-程序员宝宝

atof()函数atof():double atof(const char *str );功 能: 把字符串转换成浮点数str:要转换的字符串。返回值:每个函数返回 double 值,此值由将输入字符作为数字解析而生成。 如果该输入无法转换为该类型的值,则返回值为 0.0。函数说明 :atof()会扫描参数nptr字符串,跳过前面的空格字符,直到遇上数字或正

随便推点

【ARTS】01_23_左耳听风-201900415~2019004021_weixin_30532837的博客-程序员宝宝

ARTS:Algrothm: leetcode算法题目Review: 阅读并且点评一篇英文技术文章Tip/Techni: 学习一个技术技巧Share: 分享一篇有观点和思考的技术文章Algorithm【leetcode】20. Valid Parentheseshttps://leetcode.com/problems/valid-parentheses/1)prob...

unordered_map详细介绍_程序猿小泽的博客-程序员宝宝_unordered_map

转载自关联容器:unordered_map详细介绍(附可运行代码) 介绍1 特性2 Hashtable和bucket模版1 迭代器功能函数1 构造函数12示例代码2 容量操作21 size22 empty3 元素操作31 find32 insert33 at34 erase35 clear36 swap37 示例代码4 迭代器和...

android jsoup简书,Jsoup学习及使用_懒惰的胖达的博客-程序员宝宝

* Jsoup:jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API,可通过DOM,CSS以及类似于jQuery的操作方法来取出和操作数据。* 快速入门:* 步骤:1. 导入jar包2. 获取Document对象3. 获取对应的标签Element对象4. 获取数据* 代码://2.1获取student.xml的pathString ...

JsonSerialize.Inclusion @Deprecated的解决方案_yandao的博客-程序员宝宝_deprecated: return type of hyperf\utils\stringable

Json默认是包含空串的,如果我们不想让json返回null值,可以在bean上添加一些注解。/** @deprecated */ @Deprecated public static enum Inclusion { ALWAYS, NON_NULL, NON_DEFAULT, NON_EMPTY, DEFAULT_INCLUSION; private Inclusion() { } }例如@JsonSerialize(using

Flask Web 极简教程(四)- Flask WTF Froms_思维新观察的博客-程序员宝宝

表单在页面中主要负责数据采集,一个表单有三个基本组成部分:表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域:包含了文本框密码框、隐藏域多行文本框、复选框单选框下拉选择框和文件上传框等。表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作...

基于 Linux 的服务端环境自动部署_测男的博客-程序员宝宝

无意中翻出了几年前写的shell脚本。当时,测试环境有好几套,而且每套环境又是分布式+负载均衡+热备,全部由测试部维护和管理的。当时,测试部就几个人,手动部署耗费人力不说,且经常出错。作为部门老大,亲力亲为的实现了测试环境自动化部署解决方案,这些脚本不但让测试部受益,让奋斗在前线的技术支持也成为受益者。由于时间久远,开发和调试都是基于当时的系统版本完成的。考虑到公司隐私,本文只开放部分