angular5引入折线图

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)'
            }
          }
        }
      },


    ]
  };

在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
  • 打赏
    打赏
  • 0
    评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

qq_32496215

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值