echarts图中添加标志有备注的锚点

echarts图中添加标志有备注的锚点 echarts图中点击锚点弹出备注信息，并支持修改

lineMarker.vue 组件文件

<template>

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

<script>
import echarts from 'echarts'
import resize from '@/views/erp/components/mixins/resize'

export default {
  mixins: [resize],
  props: {
    data: {
      type: Array,
      default: () => []
    },
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    }
  },
  data() {
    return {
      chart: null,
      userId: ''

    }
  },
  watch: {
    data: {
      deep: true,
      handler(val) {
        this.setOptions()
      }
    }
  },
  mounted() {
    this.userId = this.$route.query.userId
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      if (this.data.product !== undefined) {
        this.setOptions()
      }
      var that = this
      this.chart.on('click', function(params) {
        var data =
        {
          amountSaleReport: '',
          accountSaleReport: '',
          phoneSaleReport: '',
          overdueSaleReport: '',
          userId: that.userId,
          reportTime: params.data.product
        }

        switch (params.seriesName) {
          case '消费总额(千元)':
            data.accountSaleReport = params.data.accountSaleReport
            data.phoneSaleReport = params.data.phoneSaleReport
            data.overdueSaleReport = params.data.overdueSaleReport
            data.loginSaleReport = params.data.loginSaleReport
            that.open(params.data.amountSaleReport, data, 'amountSaleReport')
            break
          case '租用手机总数':
            data.accountSaleReport = params.data.accountSaleReport
            data.amountSaleReport = params.data.amountSaleReport
            data.overdueSaleReport = params.data.overdueSaleReport
            data.loginSaleReport = params.data.loginSaleReport
            that.open(params.data.phoneSaleReport, data, 'phoneSaleReport')
            break
          case '租用账号总数':
            data.amountSaleReport = params.data.amountSaleReport
            data.phoneSaleReport = params.data.phoneSaleReport
            data.overdueSaleReport = params.data.overdueSaleReport
            data.loginSaleReport = params.data.loginSaleReport
            that.open(params.data.accountSaleReport, data, 'accountSaleReport')
            break
          case '过期账号总数':
            data.accountSaleReport = params.data.accountSaleReport
            data.phoneSaleReport = params.data.phoneSaleReport
            data.amountSaleReport = params.data.amountSaleReport
            data.loginSaleReport = params.data.loginSaleReport
            that.open(params.data.overdueSaleReport, data, 'overdueSaleReport')
            break
          case '登录次数':
            data.accountSaleReport = params.data.accountSaleReport
            data.phoneSaleReport = params.data.phoneSaleReport
            data.amountSaleReport = params.data.amountSaleReport
            data.overdueSaleReport = params.data.overdueSaleReport
            that.open(params.data.loginSaleReport, data, 'loginSaleReport')
            break
        }
        // that.open(params, data)
      })
    },
    open(value, data, key) {
      this.$emit('open', value, data, key)
    },
    setOptions() {
      this.chart.setOption({
        // 数据源
        dataset: {
          dimensions: ['product', 'amount', 'phoneTotal', 'accountTotal', 'overdueTotal', 'loginTotal'],
          source: this.data
        },
        backgroundColor: '#344b58',
        title: {
          text: this.$route.query.userName,
          x: '20',
          top: '20',
          textStyle: {
            color: '#fff',
            fontSize: '22'
          },
          subtextStyle: {
            color: '#90979c',
            fontSize: '16'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            textStyle: {
              color: '#fff'
            }
          }
          // formatter: function(params) {
          //   // console.log(params[0].data.text)
          //   return params[0].data.text === '' ? '' : '备注：' + params[0].data.text
          // }
        },
        grid: {
          left: '5%',
          right: '5%',
          borderWidth: 0,
          top: 150,
          bottom: 95,
          textStyle: {
            color: '#fff'
          }
        },
        color: ['rgba(255,144,128,1)', 'rgba(0,191,183,1)', '#909399', 'rgba(252,230,48,1)', 'loginTotal'],
        legend: {
          x: '5%',
          top: '10%',
          textStyle: {
            color: '#90979c'
          },
          data: ['消费总额(千元)', '租用手机总数', '租用账号总数', '过期账号总数', '登录次数']
        },
        calculable: true,
        xAxis: [{
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#90979c'
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitArea: {
            show: false
          },
          axisLabel: {
            interval: 0

          }
        }],
        yAxis: [{
          type: 'value',
          name: '总额(千元)',
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,144,128,1)'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0
          }
        },
        {
          type: 'value',
          name: '租用手机',
          position: 'left',
          offset: 50,
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(0,191,183,1)'
            }
          },
          axisLabel: {
            formatter: '{value}'
          }
        },
        {
          type: 'value',
          name: '租用账号',
          position: 'right',
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#909399'
            }
          },
          axisLabel: {
            formatter: '{value}'
          }
        },
        {
          type: 'value',
          name: '过期账号',
          position: 'right',
          splitLine: {
            show: false
          },
          offset: 50,
          axisLine: {
            lineStyle: {
              color: 'rgba(252,230,48,1)'
            }
          },
          axisLabel: {
            formatter: '{value}'
          }
        },
        {
          type: 'value',
          name: '登录次数',
          position: 'right',
          splitLine: {
            show: false
          },
          offset: -50,
          axisLine: {
            lineStyle: {
              color: '#409EFF'
            }
          },
          axisLabel: {
            formatter: '{value}'
          }
        }],
        // series: [{ type: 'line' }]
        dataZoom: [{
          show: true,
          height: 30,
          xAxisIndex: [
            0
          ],
          bottom: 30,
          start: 0,
          end: 100,
          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          handleSize: '110%',
          handleStyle: {
            color: '#d3dee5'
          },
          textStyle: {
            color: '#fff'
          },
          borderColor: '#90979c'

        }, {
          type: 'inside',
          show: true,
          height: 15,
          start: 1,
          end: 35
        }],
        series: [{
          name: '消费总额(千元)',
          type: 'line',
          symbolSize: 10,
          symbol: 'circle',

          itemStyle: {
            normal: {
              // color: 'rgba(255,144,128,1)',
              color: function(params) {
                return params.data.amountSaleReport === '' ? 'rgba(255,144,128,1)' : 'red'
              },
              label: {
                show: false,
                textStyle: {
                  color: '#fff'
                }
              }
            }
          },
          lineStyle: {
            color: 'rgba(255,144,128,1)'
          },
          yAxisIndex: 0
        },
        {
          name: '租用手机总数',
          type: 'line',
          symbolSize: 10,
          symbol: 'circle',
          itemStyle: {
            normal: {
              // color: 'rgba(0,191,183,1)',
              color: function(params) {
                return params.data.phoneSaleReport === '' ? 'rgba(0,191,183,1)' : 'red'
              },
              label: {
                show: false,
                textStyle: {
                  color: '#fff'
                }
                // formatter(p) {
                //   var flag = p.value.text === ''
                //   return flag ? '' : '备注' + p.value.text
                // }
              }
            }
          },
          lineStyle: {
            color: 'rgba(0,191,183,1)'
          },
          yAxisIndex: 1
        },

        {
          name: '租用账号总数',
          type: 'line',
          stack: 'total',
          symbolSize: 10,
          symbol: 'circle',
          itemStyle: {
            normal: {
              // color: '#909399',
              color: function(params) {
                return params.data.accountSaleReport === '' ? '#909399' : 'red'
              },
              barBorderRadius: 0,
              label: {
                show: true,
                position: 'top',
                formatter(p) {
                  return p.value > 0 ? p.value : ''
                }
              }
            }
          },
          lineStyle: {
            color: '#909399'
          },
          yAxisIndex: 2

        }, {
          name: '过期账号总数',
          type: 'line',
          stack: 'total',
          symbolSize: 10,
          symbol: 'circle',
          itemStyle: {
            normal: {
              // color: 'rgba(252,230,48,1)',
              color: function(params) {
                return params.data.overdueSaleReport === '' ? 'rgba(252,230,48,1)' : 'red'
              },
              barBorderRadius: 0,
              label: {
                show: true,
                position: 'top',
                formatter(p) {
                  return p.value > 0 ? p.value : ''
                }
              }
            }
          },
          lineStyle: {
            color: 'rgba(252,230,48,1)'
          },
          yAxisIndex: 3
        }, {
          name: '登录次数',
          type: 'line',
          stack: 'total',
          symbolSize: 10,
          symbol: 'circle',
          itemStyle: {
            normal: {
              // color: 'rgba(252,230,48,1)',
              color: function(params) {
                return params.data.loginSaleReport === '' ? '#409EFF' : 'red'
              },
              barBorderRadius: 0,
              label: {
                show: true,
                position: 'top',
                formatter(p) {
                  return p.value > 0 ? p.value : ''
                }
              }
            }
          },
          lineStyle: {
            color: '#409EFF'
          },
          yAxisIndex: 4
        }
        ]
      })
    }
  }
}
</script>

主页面文件

<template>
  <div class="chart-container">
    <chart
      height="100%"
      width="100%"
      :data="data"
      @open="open"
    />
    <div class="buttonClass">

      <el-button
        v-for="(item,index) in nday"
        :key="index"
        size="mini"
        class="button"
        :class="{color: color}"
        @click="handleDay(item.key,$event)"
      >{{ item.label }}</el-button>
    </div>
    <el-dialog
      title="备注"
      :visible.sync="dialogVisible"
    >
      <el-form label-position="left">

        <el-form-item>
          <el-input
            v-model="text"
            type="textarea"
            :rows="10"
          />
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="submit()"
        >
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Chart from './components/LineMarker'
import { adminCartogramData } from '@/api/userManage'
import { adminUpdateSaleReport } from '@/api/userManage'
export default {
  name: 'LineChart',
  components: { Chart },
  data() {
    return {
      data: [],
      color: false,
      day: '',
      nday: [{ label: '最近7天', key: '7' }, { label: '最近一个月', key: '30' }, { label: '最近三个月', key: '60' }],
      dialogVisible: false,
      text: '',
      submitData: '',
      key: ''
    }
  },
  mounted() {
    // console.log(document.getElementsByClassName('button')[0])

    document.getElementsByClassName('button')[0].click()
  },
  methods: {
    async handleDay(day, e) {
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.clearColorBtn()
      // console.log(e)
      e.currentTarget.classList.add('color')
      var res = await adminCartogramData({ nday: day, userId: this.$route.query.userId })
      this.data = res.data
      loading.close()
    },
    refresh() {
      document.getElementsByClassName('color')[0].click()
    },
    clearColorBtn() {
      var eBtn = document.getElementsByClassName('button')
      for (let index = 0; index < eBtn.length; index++) {
        eBtn[index].classList.remove('color')
      }
    },
    open(value, data, key) {
      console.log(data)
      if (value !== undefined) {
        this.text = value
      }
      this.submitData = data
      this.key = key
      this.dialogVisible = true
    },
    async submit() {
      switch (this.key) {
        case 'amountSaleReport':
          this.submitData.amountSaleReport = this.text
          break
        case 'phoneSaleReport':
          this.submitData.phoneSaleReport = this.text
          break
        case 'accountSaleReport':
          this.submitData.accountSaleReport = this.text
          break
        case 'overdueSaleReport':
          this.submitData.overdueSaleReport = this.text
          break
        case 'loginSaleReport':
          this.submitData.loginSaleReport = this.text
          break
      }
      var res = await adminUpdateSaleReport(this.submitData)
      if (res.code === 0) {
        this.$notify({
          title: '提示信息',
          message: '操作成功',
          type: 'success',
          duration: 2000
        })
        this.dialogVisible = false
        this.refresh()
      } else {
        this.$notify({
          title: '提示信息',
          message: '操作失败',
          type: 'error',
          duration: 2000
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 50px);
  .buttonClass {
    position: absolute;
    top: 50px;
    right: 72px;
    z-index: 3000;
    .button {
      &.color {
        background-color: #ef9e6f;
        border-color: #ef9e6f;
      }
    }
  }
}
</style>