initChart() {
      this.chart = echarts.init(document.getElementById("myChart"))
      var option = {
        backgroundColor:'#232d36',
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  lineStyle: {
                      color: {
                          type: 'linear',
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [{
                              offset: 0,
                              color: 'rgba(0, 255, 233,0)'
                          }, {
                              offset: 0.5,
                              color: 'rgba(255, 255, 255,1)',
                          }, {
                              offset: 1,
                              color: 'rgba(0, 255, 233,0)'
                          }],
                          global: false
                      }
                  },
              },
          },
          grid: {
              top: '2%',
              left: '0',
              right: '1%',
              bottom: '1%',
              containLabel: true
          },
          xAxis: [{
              type: 'category',
              axisLine: {
                  show: false,
                  color:'#A582EA'
              },
          
              axisLabel: {
                  color: '#A582EA',
                  width:100,
                  interval:0,
              },
              splitLine: {
                  show: false
              },
              boundaryGap: false,
              data: this.name

          }],

          yAxis: [{
              type: 'value',
              min: 0,
              // max: 140,
              splitNumber: 4,
              splitLine: {
                  show: true,
                  lineStyle: {
                      color: '#00BFF3',
                      opacity:0.23
                  }
              },
              axisLine: {
                  show: false,
              },
              axisLabel: {
                  show: true,
                  margin: 20,
                  textStyle: {
                      color: '#fff',

                  },
              },
              axisTick: {
                  show: false,
              },
          }],
          series: [
              {
                  name:'',
                  type: 'line',
                  showAllSymbol: true,
                  symbol: 'circle',
                  symbolSize: 6,
                  lineStyle: {
                      normal: {
                          color: "#A582EA",
                      },
                  },
                  label: {
                      //显示文字
                      show: false,
                      position: 'top',
                      textStyle: {
                          color: '#A582EA',
                      }
                  },
                  itemStyle: {
                      color: "#fff",
                      borderColor: "#A582EA",
                      borderWidth: 2,
                  },
                  areaStyle: {
                      normal: {
                          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                              {
                                  offset: 0,
                                  color: 'rgba(43,193,145,0.3)'
                              },
                              {
                                  offset: 1,
                                  color: 'rgba(43,193,145,0)'
                              }
                          ], false),
                      }
                  },
                  data: this.value
              },
          ]
      };
       //清空上一次数据
      this.section = [];
      this.name = [];
      this.value = [];
      this.chart.setOption(option,true)
    
    }

Logo

更多推荐