echarts折线图配置项

80 阅读1分钟
<div id="charweeks_mineTest" style="width: 100%; height: 306px"></div>
 drawCharbrokenline(range) {
      console.log(range)
      let legendData, defaultDate
      if (range === 'month') {
        defaultDate = moment().month()
        legendData = ['今年', '去年']
      } else if (range === 'week') {
        defaultDate = 6
        legendData = ['近七周']
      } else if (range === 'day') {
        defaultDate = moment().weekday() - 1
        legendData = ['本周', '上周']
      }
      // 折线图

      const myChart = this.$echarts.init(document.getElementById('charweeks_mineTest'), null, { renderer: 'svg' })
      if (this.tabletype === '1') {
        myChart.resize({ width: this.echartsWidth2 })
      }
      const option = {
        color: ['#FD864A', '#96B1D8'],
        tooltip: {
          trigger: 'axis'
        },
        axisPointer: {
          // 坐标轴指示器,坐标轴触发有效,
          lineStyle: {
            color: 'rgba(253,134,74)',
            opacity: 0.25,
            width: 5,
            type: 'solid'
          }
        },
        legend: {
          left: 'right', // 图例对齐方式
          data: legendData, // 图例文字
          selectedMode: false,
          icon: 'rectangle', // 图例前面的样式高宽
          padding: [16, 32, 0, 0],
          itemHeight: 1,
          itemWidth: 9,
          textStyle: {
            // 图例文字颜色
            color: '#666'
          },
          itemGap: 20 // 图例设置间距
        },
        grid: {
          // 整个在容器中的位置
          left: '4%', // 原尺寸4842
          right: '8%',
          bottom: '4%',
          top: '2%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.chartgroupdata.past ? this.chartgroupdata.past.xaxis : this.chartgroupdata.recent.xaxis, // x轴
          axisTick: {
            show: false // 不显示坐标轴刻度线
          },
          axisLine: {
            lineStyle: {
              color: '#ddd',
              width: 1
            }
          },
          axisLabel: {
            // x轴相关设置
            inside: false,
            textStyle: {
              color: '#888888',
              fontSize: '10',
              itemSize: ''
            },
            interval: 0
          }
        },
        yAxis: {
          show: false,
          type: 'value',
          // axisLabel: {
          //   formatter: '{value}'
          // },
          splitLine: {
            // 不显示网格线
            show: false
          },
          axisLabel: {
            // 不显示y轴数据
            formatter: function() {
              return ''
            }
          } // 不可注释以防偏移
        },
        series: [
          {
            name: legendData[0],
            type: 'line',
            smooth: true,
            data: this.chartgroupdata.recent.series,
            itemStyle: {
              // 线条样式
              normal: {
                color: '#FD864A',
                lineStyle: {
                  width: 1 // 设置线条粗细
                }
              }
            }
          },
          {
            // 一个图的就屏蔽掉一个
            name: this.chartgroupdata.past ? legendData[1] : '',
            type: 'line',
            smooth: true,
            data: this.chartgroupdata.past ? this.chartgroupdata.past.series : [],
            itemStyle: {
              normal: {
                color: '#96B1D8',
                lineStyle: {
                  width: 1 // 设置线条粗细
                }
              }
            }
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option, true)
      myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: defaultDate
      })
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },