Echarts折线图样式效果

echarts yekong 98℃

Echarts折线图样式效果

    drawLine() {
      var that = this
      window.addEventListener('resize', this.drawLine)
      let myChart = this.$echarts.init(this.$refs.echarts)
      const color = ['#0787ED', '#EB5742', '#1BF3FF']
      const xAxisData = ['1.15', '1.16', '1.17', '1.18', '1.19', '1.20', '1.21', '1.22', '1.23', '1.24']
      const yAxisData1 = [10, 38, 50, 73, 80, 50, 78, 10, 38, 50, 73, 80, 50, 78,]
      const yAxisData2 = [50, 60, 90, 80, 60, 50, 70, 50, 60, 90, 80, 60, 50, 70,]
      const yAxisData3 = [60, 90, 80, 60, 50, 70, 50, 60, 90, 80, 60, 50, 70, 50,]
      const lineStyle = (index) => {
        return {
          normal: {
            color: color[index],
            shadowColor: hexToRgba(color[index], 0.5),
            shadowBlur: 0,
            shadowOffsetY: 0
          }
        }
      }
      var option = {
        color: color,
        grid: {
          top: '10%',
          left: '10%',
          right: '5%',
          bottom: '20%'
        },
        legend: {
          itemHeight: 10,
          itemWidth: 10,
          top: 'top',
          right: 'center',
          orient: 'horizontal',
          textStyle: {
            fontSize: 12,
            color: '#E0E4E9'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          show: true,
          splitLine: {
            show: false,
            lineStyle: {
              type: 'dashed',
              color: '#1B3062',
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#395383'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            margin: 10,
            interval: 0,
            rotate: 0,
            textStyle: {
              fontSize: 12,
              color: '#BBC2CF'
            }
          },
          data: xAxisData
        },
        yAxis: {
          show: true,
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#1B3062',
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#395383'
            }
          },
          axisLabel: {
            margin: 10,
            interval: 0,
            textStyle: {
              fontSize: 12,
              color: '#328DC8'
            }
          },
        },
        series: [{
          name: '胡海公司',
          type: 'line',
          data: yAxisData1,
          smooth: false,
          symbolSize: 6,
          lineStyle: lineStyle(0),
        }, {
          name: '丰收公司',
          type: 'line',
          data: yAxisData2,
          smooth: false,
          symbolSize: 6,
          lineStyle: lineStyle(1),
        }, {
          name: '南光公司',
          type: 'line',
          data: yAxisData3,
          smooth: false,
          symbolSize: 6,
          lineStyle: lineStyle(2),
        }]
      };
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
喜欢 (0)