web/src/views/analysisReport/components/MarketLineChart.vue

<template>
  <div class="market-line-chart">
    <LineChart :options="options" :datas="chartData" :extend="extend" />
  </div>
</template>

<script>
import LineChart from '@/components/chart/LineChart'
export default {
  name: 'market-line-chart',
  components: {
    LineChart
  },
  props: {
    chartData: {
      type: Object,
      default () {
        return {
          columns: [],
          rows: []
        }
      }
    }
  },
  data () {
    return {
      extend: {
        yAxis: {
          axisLabel: {
            formatter: p => p + '%'
          }
        }
      },
      options: {
        height: '326px',
        colors: ['#05A6F3', '#FF9F40'],
        config: this.configOptions
      }
    }
  },
  methods: {
    configOptions (options) {
      // 面积颜色-渐变
      Object.assign(options.series[0], {
        areaStyle: {
          normal: {
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(42, 190, 209, 0.12)'
              },
              {
                offset: 1,
                color: 'rgba(42, 190, 209, 0)'
              }
            ], false)
          }
        }
      })
      Object.assign(options.series[1], {
        areaStyle: {
          normal: {
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(255, 159, 63, 0.12)'
              },
              {
                offset: 1,
                color: 'rgba(255, 159, 63, 0)'
              }
            ], false)
          }
        }
      })

      Object.assign(options.legend, {
        icon: 'rect'
      })

      options.tooltip.formatter = params => {
        let tip = `<div style="padding-top:2px;color:#9B9CA3;">${params[0].name}</div>`
        for (let i = 0; i < params.length; i++) {
          params[i].marker = '<span style="display:inline-block;margin-right:5px;border-radius:8px;width:8px;height:8px;background-color:' + params[i].color + ';"></span>'
          tip += params[i].marker + params[i].seriesName + '：' + params[i].value[1].toString().replace(/,/, '') + '%' + '<br/>'
        }
        return tip
      }
      return options
    }
  }
}
</script>