vue2 + Echarts(4.2.1) 版本

全国地图

柱状折线图

饼图

折线图

雷达图

象限图

手写的浮窗

比例盒子+排序

 <block1 :data="completeData" />

 completeData: {
   lrwcl: [100, 90, 80, 70, 60, 50, 40],
   name: ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6', '数据7'],
   srwcl: [40, 50, 60, 70, 80, 90, 100]
 },

<party-members :data="membersData" />

 membersData: {
   partyMemberFormal: '1',
   partyMemberRetirement: '2',
   partyMemberPrepare: '3',
   partyMemberMan: '4',
   partyMemberJob: '5',
   partyMemberWoman: '6',
   partyMemberTotle: '7'
 },

<resourcesharing style="height:50%" :data="resourcesharingData" />

resourcesharingData: {
  leaderTalk: 10,
  partyFile: 80
},

<div style="height;20px;display:flex" @mousemove="handlePopWindow(tipList, 1, 'aside', $event, '标题')" @mouseleave="handlePopWindow(tipList, 0, 'aside', $event, '标题')">
 <span :style="{ width: (tipList[0].value / (tipList[0].value + tipList[1].value + tipList[2].value)) * 100 + '%', 'background-color': tipList[0].color, height: '100%' }">1</span>
  <span :style="{ width: (tipList[1].value / (tipList[0].value + tipList[1].value + tipList[2].value)) * 100 + '%', 'background-color': tipList[1].color, height: '100%' }">2</span>
  <span :style="{ width: (tipList[2].value / (tipList[0].value + tipList[1].value + tipList[2].value)) * 100 + '%', 'background-color': tipList[2].color, height: '100%' }">3</span>
</div>

export default {
data(){
	return {
		tipList: [
	        {
	          name: '数据1',
	          color: '#eda472',
	          value: 10
	        },
	        {
	          name: '数据2',
	          color: '#43c262',
	          value: 30
	        },
	        {
	          name: '数据3',
	          color: '#5082de',
	          value: 50
	        }
	      ],
      popData: {
        left: 0,
        top: 0,
        data: {},
        active: 0,
        name: ''
      },
      isOver: false,
      timeout: null
      }
	},
methods: {
    handlePopWindow(data, active, type, node, name) {
      const self = this
      if (!active) {
        this.isOver = true
      } else {
        this.isOver = false
        clearTimeout(this.timeout)
        this.timeout = null
      }
      if (this.isOver) {
        this.timeout = setTimeout(() => {
          self.popData.active = active
          self.popData.__ob__.dep.notify()
        }, 200)
      } else {
        this.popData.left = node.clientX + 'px'
        this.popData.top = node.clientY + 10 + 'px'
        this.popData.active = active
        this.popData.name = name
        this.popData.data = data
        this.popData.__ob__.dep.notify()
      }
    },
  }
}