echarts组件——强调曲线图

echarts组件——强调曲线图

组件代码

<template>
  <div :class="classname" :style="{height:height,width:width}" />
</template>

<script>
// 强调曲线图
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

const animationDuration = 2000

export default {
  mixins: [resize],
  props: {
    classname: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    color: { // 线条颜色
      type: Array,
      default: () => ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
    },
    xaxisdata: { // x轴数据
      type: Array,
      default: () => ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
    },
    legenddata: { // 图例
      type: Array,
      default: () => ['Email']
    },
    legendshow: {
      type: Boolean,
      default: false
    },
    gridtop: {
      type: String,
      default: '10%'
    },
    linedata: {
      type: Array,
      default: () => [120, 132, 101, 134, 90, 230, 210]

    },
    symbol: { // 折线标记点的图形
      type: String,
      default: 'circle'
    },
    symbolsize: { // 标记点大小
      type: Number,
      default: 0
    },
    title: { //  标题
      type: String,
      default: ''
    },
    yaxisshow: { // y轴是否显示
      type: Boolean,
      default: true
    },
    markareadata: { // 强调区域
      type: Array,
      default: () => []
    },
    ratiodata: { // 环比数据
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chart: null,
      series: []
    }
  },
  watch: {
    legenddata: {
      deep: true,
      handler(val) {
        this.$nextTick(() => {
          const _this = this
          this.series = this.legenddata.map((name, sid) => {
            return {
              name,
              type: 'line',
              smooth: true,
              symbol: this.symbol,
              showAllSymbol: false,
              symbolSize: this.symbolsize,
              label: {
                show: true,
                position: 'top',
                formatter: function(params) {
                  return `${_this.ratiodata[params.dataIndex]}%`
                },
                color: '#387F48',
                fontSize: 14
              },
              data: this.linedata,
              animationDuration,
              markArea: { // 标记区域
                itemStyle: {
                  color: 'rgba(255, 173, 177, 0.4)'
                },
                label: { // 给标记区域添加标签
                  color: '#5470c6',
                  show: true,
                  position: 'top',
                  formatter: function(parm) {
                    return parm.name
                  },
                  // 使用rich文本，定义自定义样式
                  rich: {
                    // customStyle: {
                  //         backgroundColor: {
                  //             image: 'url_of_your_image', // 图片的 URL
                  //             repeat: 'no-repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
                  //         },
                  //         borderRadius: 5,
                  //         color: '#fff',
                  //         padding: [5, 10]
                  //     }
                  }
                  // align: 'center',
                  // verticalAlign: 'middle',
                  // position: ['50%', '50%'],

                },
                data: this.markareadata
              }
            }
          })
          this.initChart()
        })
      }
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({
        color: this.color,
        tooltip: {
          trigger: 'axis',
          formatter: (params) => {
            let result = `<div>${params[0].axisValue}</div>`
            params.map((item, index) => {
              result += `<div style="display: flex; justify-content: space-between"><span>${item.seriesName}: &nbsp; </span><span>${item.value}</span></div>`
            })
            if (this.ratiodata.length) {
              result += `<div>占比: &nbsp; ${this.ratiodata[params[0].dataIndex]}%</div>`
            }
            return result
          }
        },
        title: {
          text: this.title
        },
        // tooltip: {
        //   trigger: 'axis',
        //   show: false
        // },
        legend: {
          show: this.legendshow,
          data: this.legenddata
        },
        grid: {
          left: '1%',
          right: '1%',
          top: this.gridtop,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          axisTick: {
            show: false // 隐藏x轴的分割点
          },
          axisLine: {
            lineStyle: {
              color: '#86909C'
            }
          },
          data: this.xaxisdata
        },
        yAxis: {
          type: 'value',
          show: this.yaxisshow,
          axisLine: {
            lineStyle: {
              color: '#86909C'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#E5E6EB',
              type: 'dashed'
            }
          },
          splitArea: {
            show: false
          }
        },
        series: this.series
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.markarea-label-bg {
  border-style: solid;
  white-space: nowrap;
  // z-index: 9999999;
  box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px;

  background-color: rgba(31, 68, 97, 0.8);
  border: 1px solid rgba(23, 192, 255, 0.25);
  color: rgb(255, 255, 255);
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  line-height: 15px;
}
</style>