tuanfeng-pc-admin/src/views/dashboard/componets/AnalysisChart.vue

<template>
  <div ref="chartsWrapperRef" class="diagrams-chart-container"></div>
</template>

<script>
import echartsMixin from '../mixin/echarts'
import { generateLineGraphic, generateDiagramsHoveDom as formatter } from '../utils/echarts'

export default {
  mixins: [echartsMixin('chartsWrapperRef')],
  data() {
    return {
      staticOptions: {
        title: { subtext: '交易总额(元)' },
        grid: { left: '7%', right: '3%', top: '20%', bottom: '12%' },
        tooltip: { trigger: 'axis', showDelay: 10, padding: 0, axisPointer: { type: 'shadow', shadowStyle: { color: generateLineGraphic('rgba(225, 228, 255, 0)', '#E1E4FF') } }, formatter },
        xAxis: { offset: 5, axisTick: { show: false }, axisLine: { show: false }, axisLabel: { color: '#A4A4A4', fontSize: 14 }, data: [] },
        yAxis: { axisLine: { show: false }, axisTick: { show: false }, axisLabel: { color: '#A4A4A4', fontSize: 14 }, splitLine: { show: true, lineStyle: { width: 1, color: '#F3F4F8' } } },
        series: { zlevel: 100, name: '销量', type: 'bar', data: [], barWidth: '24px', itemStyle: { borderRadius: 5, color: generateLineGraphic('#5cc1fd', '#15c9ca') } }
      }
    }
  },

  methods: {
    update(data) {
      this.instance.setOption({ xAxis: { data: Object.keys(data) }, series: { data: Object.values(data) } })
    }
  }
}
</script>

<style lang="scss" scoped>
.diagrams-chart-container {
  height: 242px;
}
</style>