Echart

效果图

代码

*.html文件

<div echarts [options]="chartOption" class="demo-chart"></div>

*.component.ts文件

window.onresize = function () {
      $('.demo-chart').resize();
    };
    let colors = ['#df8f03', '#0371d8', '#39a902', '#c201f9'];
    this.chartOption = {
      color: colors,
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        }
      },
      grid: {
        right: '20%'
      },
      toolbox: {
        feature: {
          restore: {show: true},
          saveAsImage: {show: true},
          dataZoom: {
            yAxisIndex: 'none'
          },
          magicType: {
            type: ['line', 'bar', 'stack', 'tiled']
          }
        }
      },
      dataView:{
        show:['true'],
        title:['数据视图'],
        lang:['数据视图', '关闭', '刷新'],
      },
      dataZoom: [{
        type: 'inside',
        start: 0,
        end: 10
      }, {
        start: 0,
        end: 10,
        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
        handleSize: '80%',
        handleStyle: {
          color: '#fff',
          shadowBlur: 3,
          shadowColor: 'rgba(0, 0, 0, 0.6)',
          shadowOffsetX: 2,
          shadowOffsetY: 2
        }
      }],
      legend: {
        data:['间夜量','供给量','平均房价','间夜增长率','均价增长率','供给增长率']
      },
      xAxis: [
        {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月','1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月','9月','10月','11月','12月']
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '供给量',
          min: 0,
          max: 1000000,
          position: 'right',
          axisLine: {
            lineStyle: {
              color: colors[0]
            }
          },
          axisLabel: {
            formatter: '{value} 间'
          }
        },
        {
          type: 'value',
          name: '间夜量',
          min: 0,
          max: 10000000,
          position: 'right',
          offset: 80,
          axisLine: {
            lineStyle: {
              color: colors[1]
            }
          },
          axisLabel: {
            formatter: '{value} 间'
          }
        },
        {
          type: 'value',
          name: '平均价',
          min: 0,
          max: 10000,
          barCategoryGap: '50%',
          position: 'left',
          axisLine: {
            lineStyle: {
              color: colors[2]
            }
          },
          axisLabel: {
            formatter: '{value} RMB'
          }
        },
        {
          type: 'value',
          name: '增长率',
          min: -100,
          max: 100,
          position: 'left',
          offset: 80,
          axisLine: {
            lineStyle: {
              color: colors[3]
            }
          },
          axisLabel: {
            formatter: '{value} %'
          }
        }

      ],
      series: [
        {
          name:'供给量',
          type:'bar',
          stack:'量',
          yAxisIndex: 0,
          data:[20000, 22000, 33000, 45000, 63000, 102000, 200300, 203400, 230000, 165000, 120000, 62000,20000, 22000, 33000, 45000, 63000, 102000, 200300, 203400, 230000, 165000, 120000, 62000, 230000, 165000, 120000, 62000]
        },
        {
          name:'间夜量',
          type:'bar',
          stack:'量',
          yAxisIndex: 1,
          data:[9000000, 2200000, 3300000, 4500000, 6300000, 1020000, 2000300, 2034000, 2300000, 1650000, 1200000, 6200000,9000000, 2200000, 3300000, 4500000, 6300000, 1020000, 2000300, 2034000, 2300000, 1650000, 1200000, 6200000, 2300000, 1650000, 1200000, 6200000]
        },
        {
          name:'平均房价',
          type:'bar',
          stack:'价格',
          yAxisIndex: 2,
          data:[2000, 220, 330, 450, 630, 1020, 2003, 2034, 2300, 1650, 1200, 620,2000, 220, 330, 450, 630, 1020, 2003, 2034, 2300, 1650, 1200, 620, 2300, 1650, 1200, 620]
        },
        {
          name:'间夜增长率',
          type:'line',
          // stack:'率',
          yAxisIndex: 3,
          data:[-20, 4.9, 70, -23.2, 25.6, 76.7, -35.6, 62.2, 32.6, -20.0, 64, 3.3,20, -4.9, 70, 23.2, -25.6, 76.7, 35.6, -62.2, 32.6, -20.0, -64, -3.3, -32.6, 20.0, 64, 3.3]
        },
        {
          name:'均价增长率',
          type:'line',
          // stack:'率',
          yAxisIndex: 3,
          data:[-26, 59, 90, -26.4, -28.7, -70.7, -75.6, -82.2, -48.7, 18.8, 6.0, 2.3,26, -59, -90, -26.4, 28.7, 70.7, 75.6, 82.2, 48.7, -18.8, -6.0, -2.3, -48.7, 18.8, 6.0, 2.3]
        },
        {
          name:'供给增长率',
          type:'line',
          // stack:'率',
          yAxisIndex: 3,
          data:[20, 22, 33, 45, -6.3, -10.2, -20.3, -23.4, -23.0, -16.5, -12.0, 62,20, 22, 33, 45, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 62, 23.0, 16.5, 12.0, 62]
        }
      ]
    };