echarts显示漏斗图，折现图使用以及配置项含义,点击事件

1.在项目中引入echarts

<script src="./static/js/echarts.min.js"></script>

2.把图标当做组件的方式引入到页面中

<j-common-chart :type='item.analysisType'  //图标类型
                          :id="`${item.analysisType}${item.id}`"  //当前图表id
                          :items="item.graphsData" />  //图表数据

//JCommon-chart.vue
<template>
  <div class="charts-container">
    <div :id="id"
         class="css-echarts">
    </div>
  </div>
</template>
export default {
name: 'common-chart',
 props: ['id', 'items', 'type'],
 data () {
    return {
      chartObj: '',
      commonTypes: {},
    }
  },
}
 watch: {
    'items': {
      handler (val) {
        this.commonTypes = this.items //获取echarts数据
        // 解决main process问题
        this.chartObj.showLoading({
          text: '加载中...',
          color: '#409eff',
          textColor: '#409eff'
        })
        setTimeout(() => {
          this.chartObj.hideLoading()
          this.chartObj.setOption(this.commonTypes)
          this.chartObj.resize()
        }, 500)
      },
      deep: true
    }
  },
mounted () {
    this.getInit() //初始化报表
  },
methods:{
 getInit () {
      this.chartObj = echarts.init(document.getElementById(this.id), 'light')
      this.chartObj.setOption(this.commonTypes)
    }
}

以上是按照echarts的数据格式返回给前端

image.png

3.当返回的数据不符合echarts时，前端需要对数据进行处理

image.png

 this.funnelData.push({
              name: `${item} (${result[item].bills})单`,
              value: result[item].amount,
              detail: result[item].detail
            })

  <!-- echarts图表类 -->
    <funnel-chart :chartData="funnelData"></funnel-chart>

//funnelChart.vue
<template>
  <div :id="elId"
       class="jy-container"></div>
</template>

<script>
import uuidv1 from 'uuid/v1'
export default {
  name: 'FunnelChart',
  props: {
    chartData: {
      type: Array
    },
    query: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  watch: {
    chartData: { //获取需要显示的数据
      handler: function (newVal, oldVal) {
        this.init()
      },
      deep: true
    }
  },
  data () {
    return {
      elId: ''
    }
  },
  created () {
    this.elId = uuidv1() // 获取随机id
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      let { text, subtext } = this.query
      let legendData = []  //图例

      this.chartData && this.chartData.forEach(el => {
        legendData.push({  //图例
          name: el.name,
          textStyle: {
            fontSize: 12 //设置图例字体大小
          }
        })
      })

      const option = {
        title: {
          text: text, //设置标题
          subtext: subtext//设置副标题
        },
//默认色板
 color: ['#4FD0C7', '#99D1FC', '#99AAFC', '#A997FD', '#F9DE6E', '#4FD0C7', '#99D1FC', '#99AAFC', '#A997FD', '#F9DE6E', '#4FD0C7', '#99D1FC', '#99AAFC', '#A997FD', '#F9DE6E', '#4FD0C7', '#99D1FC', '#99AAFC', '#A997FD', '#F9DE6E'], 

// 图例
        legend: {
         orient: 'horizontal', // 布局方式，默认为水平布局，'horizontal' ¦ 'vertical'
          x: 'center',// 水平安放位置，默认为全图居中,可选'center' ¦ 'left' ¦ 'right'还有y：‘top’
          top: '80%', //距离顶部距离
          data: legendData, //显示的数据
          itemWidth: 10, //图例的宽度
          itemHeight: 10, //图例色块的高度
          itemGap: 15, //图例之间的距离
          padding: [0, 27, 0, 27], //图例padding值
          textStyle: {
            fontSize: 12,
            color: '#6B6B6B'
          }
        },
        calculable: true,  // 默认关闭可计算特性
        series: [  //漏斗图显示位置以及排序方式
          {
            type: 'funnel',
            x: 'center',
            y: 'top',
            top: 30,
            bottom: 120,
            width: 330,
            sort: 'descending',
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            label: {
              show: true,
              position: 'inside',
              formatter: (data) => {
                return `${(data.value).toFixed(2) || 0}万元`
              }
            },
            data: this.chartData || []
          }
        ]
      }
      const chartObj = echarts.init(document.getElementById(this.elId))
      chartObj.setOption(option)
      chartObj.on('click', (params) => { //漏斗点击事件
        this.$router.push({ name: 'funnelDetail', query: { data: JSON.stringify(params.data.detail) } })
      })
    }

  }
}
</script>
<style scoped>
.jy-container {
  width: 100%;
  min-height: 450px;
}
</style>

自定义宽度，显示真实数据

 this.funnelData.push({
              name: `${item} (${result[item].bills})单`,
              valueTmp: Number(value).toFixed(2),
              value: (length - index) * 500, //显示的宽度逐级递减
              detail: result[item].detail
            })

image.png

注意数据显示数据的时候data.data.valueTmp

具体属性的值可以参考[https://www.cnblogs.com/benmumu/p/8316652.html](https://www.cnblogs.com/benmumu/p/8316652.html)