美文网首页
angular9引入echarts

angular9引入echarts

作者: luckyvip | 来源:发表于2020-05-21 10:57 被阅读0次

    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']
      };
    

    相关文章

      网友评论

          本文标题:angular9引入echarts

          本文链接:https://www.haomeiwen.com/subject/jjfzohtx.html