在这里插入图片描述
因为页面多处用到,所以选择封装
来,都让开!上代码:

    commonLine(echart, seriesName, dataX, dataY) {
      // 基于准备好的dom,初始化echarts实例
      const echarts = require('echarts')
      // 基于准备好的dom,初始化echarts实例
      const myChart = echarts.init(echart)
      // 绘制图表
      myChart.setOption({
        backgroundColor: '', // 背景颜色透明
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          x: 0,
          y: 40,
          x2: 0,
          y2: 15,
          containLabel: true
        },
        xAxis: {
          data: dataX,
          axisLabel: {
            // interval: 0, // 强制文字产生间隔
            rotate: 45,
            textStyle: { // 文字样式
              color: '#FFF',
              fontSize: 12
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(191, 191, 191, 0.2)' // 更改坐标轴颜色
            }
          }
        },
        yAxis: {
          // max: 150,
          // interval: 50, // 每次增加几个
          axisLine: { // 隐藏y轴
            show: false
          },
          axisTick: { // 隐藏y轴刻度线
            show: false
          },
          splitLine: { // 自定义网格线样式
            lineStyle: {
              type: 'dashed',
              color: 'rgba(233, 233, 233, 0.2)'
            }
          },
          axisLabel: {
            interval: 1,
            textStyle: { // 自定义文字样式
              color: '#FFF',
              fontSize: 12
            }
          }
        },
        series: [
          {
            name: seriesName,
            type: 'line',
            // smooth: true,
            symbol: 'circle', // 折线点设置为实心点
            symbolSize: 8, // 折线点的大小
            data: dataY,
            itemStyle: {
              normal: {
                color: '#1890FF',
                lineStyle: {
                  color: '#1890FF'
                }
              }
            }
          }
        ]
      })
      this.resizeEcharts(echart, myChart) // 调用封装的自适应echarts函数
    },
Logo

前往低代码交流专区

更多推荐