angular9引入echarts

1、yarn add ngx-echarts
2、yarn add echarts
3、import {NgxEchartsModule} from 'ngx-echarts';
4、 <div echarts [options]="option" style="height: 160px;"></div>
5、模板一

import {graphic} from 'echarts';
option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#000'
        }
      }
    },
    lineStyle: {
      width: 1,
      type: 'solid',
      color: '#63ACFF'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '8%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '维修工作',
        type: 'line',
        stack: '总量',
        areaStyle: {},
        data: [120, 132, 101, 134, 90, 230, 210]
      },

    ],
    color: new graphic.LinearGradient(
      0, 0, 0, 1,
      [
        {offset: 0, color: '#9BC9FF'},
        {offset: 0.7, color: '#EFF6FF'},
        {offset: 1, color: '#EFF6FF'}
      ]
    )
  };

6、模板二

 option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: '1%',
      left: '2%',
      right: '7%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: 'category',
      data: ['实际故障', '统计故障', '风险等级']
    },
    series: [
      {
        name: '2011年',
        type: 'bar',
        data: [1049, 1317, 3302],
        itemStyle: {
          emphasis: {
            barBorderRadius: [0, 6, 6, 0]
          },

          normal: {
            barBorderRadius: [0, 6, 6, 0]
          }
        }
      },
      {
        name: '2012年',
        type: 'bar',
        data: [1215, 1341, 3818],
        itemStyle: {
          emphasis: {
            barBorderRadius: [0, 6, 6, 0]
          },

          normal: {
            barBorderRadius: [0, 6, 6, 0]
          }
        }
      }
    ],
    color: ['#268AFF', '#50E3C2']
  };
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容