Anguar4 echarts折线图滑动

最新推荐文章于 2024-08-13 12:00:00 发布

前端小白123

最新推荐文章于 2024-08-13 12:00:00 发布

阅读量1.6k

点赞数

文章标签： Angular4 echarts

本文链接：https://blog.csdn.net/zhenmingyue123/article/details/83088179

版权

在html中声明

 <div echarts [options]=" echartsLine"  id="lineChart" class="lineChart">

在angular4的ts文件中

import * as echarts from 'echarts';
@Component({
  selector: 'app-line',
  templateUrl: './app-line.component.html',
  styleUrls: ['./app-line.component.scss']
})

export class AppLineComponent implements OnInit {
lineChart:any;
echartsLine:any;
 ngOnInit() {
  this.lineChart = echarts.init(document.getElementById('lineChart'));
  this.echartsLine = {
      animation: false,
      title: {
        text: ''
      },
      tooltip: {
        trigger: 'axis',
        textStyle: {
          fontFamily: 'globalFirstFont'
        },
        axisPointer: {
          type: 'none'
        },
      calculable: true,
      grid: {
        left: '0%',
        right: '0%',
        bottom: '22%',
        containLabel: false
      },
  
      //折线图滑动通过zoom
         dataZoom: [
        {
          type: 'slider',
          show: false,
          realtime: false,
          start: 0,
          end: 100,
          handleSize: 8,
          height: 0,
        },
        {
          type: 'inside',
          realtime: false,
        },
      ],
   
      xAxis: {
        type: 'category',
        axisTick: {
          show: false
        },
        axisLine: {
          show: false,
          lineStyle: {
            width: 0,
            type: 'solid',
          }
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: '#FFF',
            fontSize: 15,
          }
        },
        data:  this.xAxisData1//(这是可变数据),
      },
      yAxis: {
        type: 'value',
        show: false,
      },
      series: [
        {
          name: ‘’,
          type: 'line',
          stack: 'line',
          symbol: 'circle',
          symbolSize: 12,
          selectedMode: 'single',
          itemStyle: {
            normal: {
              color: '#FCDB93',
              borderColor: '#FFF',
              borderWidth: 2,
              lineStyle: {
                width: 4,
                color: '#FFF'
              }
            }
          },
          data:this.seriesData1//(这是可变数据),
        }
      ]
    };
    this.lineChart.setOption(this.echartsLine, true);
 }