Echart

来源：互联网发布：编程语言的发展方向编辑：程序博客网时间：2024/05/16 17:29
效果图
这里写图片描述
代码
*.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]        }      ]    };
阅读全文
0 0